Description

A subsection is a special application of a filter pane, where users can navigate from the content panel to various subsections in order to access additional settings.

Usage & Behavior

General guidelines

Structure

The subsection consists of:

• A header.

• An exit button (X).

• The subsection content.

• An Apply button at the bottom.

Placement and Positioning

• The subsection area:

  • is 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 the content panel. Should we describe how?

• Clicking the exit button returns to the initial content panel.

• Clicking the Apply button:

  • Applies the filter of the subsection (without applying the parent filter on the workspace),

  • Returns to the initial content panel.

• Navigating away (e.g. selecting another filter) while changes were made, may 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 (e.g. filtering the filter).

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

Accessibility Compliance

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

Design

Code

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