Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Description

The filter

Description

This is specific in case the content panel subsection is a “drill-down” section used for additional settings in regard to the filter it was opened from.

See example:

Image RemovedImage Added

Usage & Behavior

General guidelines

When used for the advanced editing of a filter, a subsection does not apply the filter on the workspace but only apply the filter itself.

Structure

The subsection consists of

  • Header.

  • Exit button - returns to the main filter content panel.

  • Subsection content.

  • Apply button at the bottom.

Placement and Positioning

  • Positioned beneath the Filter header.

  • Uses the entire height of the remaining space.

Content

Content may vary depending on usage (e.g. an input form for advanced filtering).

Interaction

  • Entering the subsection is done from a filter within the filter content panel.

  • Clicking the exit button or the Apply button will return to the initial filter content panel.

  • Navigating away (e.g. selecting another filter) while changes were made, will may display an “unsaved changes” confirmation pop-up.

Transitions

Entering the subsection will have a transition as seen in the example

Filter pane - subsection_Transition_ASAF.mp4

Best practices

Use:

  • when a filter contains too many values and needs to be narrowed down (ie.eg. filtering the filter).

  • if additional options exist for a filter but are rarely used.

Don’t use 

  • <…>

General 

  • When used for the advanced editing of a filter, a subsection should not apply the filter on the workspace but only apply the filter itself.

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Design

Zeplin link

Screen thumbnail

<<Short Zeplin link. You
Use this 

<<Screen with 200 width>>

Code

<<a box containing the code - discuss with Femi>>