| Table of Contents | ||
|---|---|---|
|
Description
A filter pane is a pane an area located on the left side of a page, allowing users to filter the currently presented data by a set of parameters.
...
Default State
In most cases, no tabs will be are selected by default.
Interaction
...
For validations within a form see Field Validation.
Transitions
The filter pane content panel will open and close with a brief slide effect.
When pinning / unpinning the content panel, the content on the main area of the page will collapse / expand with a transition effect.
...
The width of a chicklet will depend on its content, with a minimum and maximum limits.
Each chicklet contains:
an icon, which is a smaller version of the corresponding icon on the filter bar,
the chicklet text will be:
In case of a single selection - the selected value (e.g. “Last 24 hours”).
In case of a multiple selection - either the selected values, separated by commas (e.g. “APAC, EMEA”), or, if the text exceeds the maximum width of the chicklet, the name of the filter followed by the number of values in brackets (e.g. “Interactions (3)”). In this case, hovering the chicklet will show a tooltip with the full list of items.
In case of a multiple selection - either the selected values, separated by commas (e.g. “APAC, EMEA”), or, if the text exceeds the maximum width of the chicklet, the name of the filter followed by the number of values in brackets (e.g. “Interactions (3)”). In this case, hovering the chicklet will show a tooltip with the full list of items.
a closing icon (x, showing on hover), allowing the user to clear the filter.
If the content of the chicklet exceeds the maximum width, the text will be truncated, ending with an ellipsis (…). In this case, hovering the chicklet will show a tooltip with the full text.
A Clear All icon button will appear after the last chicklet.
...
Use:
when a major data set (a table, a grid, a dashboard etc.) is shown in the page and there is a need to filter it by one or more parameters.
for complex filtering or when a large number of filters is needed.
Don’t use:
for data in a dialog or a detail details pane.
Common Examples
Designs | Comment |
|---|---|
 | A single list filter with no dialog buttons |
 | A date picker filter |
 | A multi accordion filter |
...