Description

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

See example:

Usage & Behavior

General guidelines

Structure

The subsection consists of

• Header

• Exit button - returns to the main filter 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 panel

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

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

Transitions

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

Best practices

Use:

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

• if Additional options exist for a filter but are rarely used

Don’t use 

• <…>

General 

• When used for 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

Code

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