Table of Contents | ||
---|---|---|
|
...
Chicklets are indicators of the currently applied filters.
There are two types of chicklets:
Regular.Deleting these chicklets will clear the corresponding filters.
Mandatory.Each mandatory chicklet will have a default value.Amandatory Mandatory chicklets cannot be deleted, only be reset to its their default values (see below).
In rare cases, a filter pane can be used without chicklets. In this case, a Clear button should be included in the content panel.
...
The width of a chicklet will depend on its content, within minimum and maximum limits.
Each chicklet contains:
an icon, which is a smaller version of the corresponding tab icon on the filter bar.
chicklet text.
For a single selection, the selected value will be shown (e.g. Last 24 hours).
For multiple selections, it can show 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 close icon button (for regular chicklets) or a reset icon button (for mandatory chicklets), shown on hover.
If no mandatory chicklets were defined, a Clear All icon button will appear after the last chicklet, allowing users to clear all filters.
If at least one mandatory chicklet was defined, a Reset to default icon button will appear after the last chicklet.
The Reset to default button will be disabled by default. Changing the default value or adding more chicklets will enable the buttonit.
...
Placement and Positioning
...
Hovering a chicklet
Regular chicklet chicklets - shows an X icon inside the chicklet, allowing the user to remove it.
Mandatory chicklet chicklets - shows a reset icon inside the chicklet, allowing the user to reset the chicklet to its default value.
...
When the panel is pinned - shows the relevant content in the panel.
When unpinned - opens the relevant content panel (if not already open).
Clicking the chicklet x icon
...