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:
...
| Table of Contents |
|---|
Description
A subsection is a special instance of a Filter Pane, where users can open various subsections with the content panel, in order to access additional settings.
Navigating to the Subsection | The Subsection |
|---|---|
 |  |
Usage & Behavior
General guidelines
Structure
The subsection consists of:
Header
Exit button - returns to the main filter panel
Subsection content
A header.
An exit button (X).
The subsection content area.
An Apply button at the bottom.
Placement and Positioning
...
The subsection area:
is positioned beneath the Filter filter header.
Uses uses the entire height of the remaining space.
uses the entire width of the content panel.
Content
Content may vary depending on usage (e.g. an input form for advanced filtering).
Interaction
Entering Navigating to the subsection is done from a filter within the filter panelcontent panel, according to the specific scenario.
Clicking the exit button or returns to the initial content panel.
Clicking the Apply button will return to the initial filter panelreturns to the parent content panel and updates it accordingly (without applying the parent filter).
Navigating away (e.g. selecting another filter) while after unapplied changes were have been made, will may display an “unsaved changes” confirmation pop-up Unsaved changes confirmation Popup.
Transitions
Entering the subsection will have a transition, as seen in the this example
...
:
...
Best practices
Use:
when When a filter contains too many values and needs to be narrowed down (i.e. filtering the filter)if Additional
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
...
Zeplin link
...
Screen thumbnail
...
.
...
<<Screen with 200 width>>
Code
<<a box containing the code - discuss with Femi>>