...

A filter pane is an area located on the left side of a page, allowing users to filter the currently presented data by a set of parameters.

...

• The filter pane contains two areas:

  • the filter bar, and

  • the content panel.

• On relevant pages, the filter bar is always shown.

• Selected filters are represented by chicklets, appearing above the presented data (see The Chicklet Area below).

States

• The content panel has two states:

  • Unpinned (default) - the panel overlays the content of the page, hiding everything behind it.

  • Pinned - the panel is shown next to the content of the page so nothing is hidden.

  Active filters are represented by chicklets, appearing at the top of the presented data (see below).

Usage and Behavior

• A set of filters can behave in one of three ways:

  • Faceted - the filters are sorted by importance or popularity. Applying a filter affects the number of results shown on other filters (common).

  • Funnel - the filters are ordered by hierarchy. Applying a parent filter affects child filters, but applying a child filter does not affect parent filters (less common).

  • Independent - applying a filter does not affect other filters (not recommended).

• The filter pane can operate in one of two modes:

  • Discrete - the user applies the set of filters on each content content panel separatelytheir selection from each filter tab independently, by clicking the Apply button separately for each one (common).
    An exception is a case where there is if only one possible selection in is allowed within the tab. In this case, the Apply button will be hidden, and performing that single selection will apply the filter and close the filter pane.

  • Combined - the user can set filters on multiple tabs, and then click apply selections from multiple filter tabs in one go, by clicking the Apply All Filters button, which appears on each tab.

• An application may have a similar set of filters across related workspaces. In this case, applying a filter on one workspace will affect the same filter on all related workspaces.

For more information see The Filter Bar, The Content Panel and The Chicklet Area below.

The Filter Bar

Image RemovedImage Added

Structure

• The filter bar contains one or more tabs.

• Each tab consists of an icon and a title (e.g. Employees).

• A filter that was applied is represented by Once a filter has been applied, a blue dot shown on the left side of the relevant tab.

Placement and Positioning

• The filter bar sticks to the left side of the page.

• The background of the bar stretches from the page header to the bottom of the page.

• The width of the bar is fixed.

• The group of tabs is aligned to the top of the bar.

States

• Each tab can have one of these states:

State	Image	Comments
Regular
Applied
Hover
Active
Selected		Only one tab can be selected at any given time.
Selected, Hover
Focused
Focused, Hover
Focused, Selected

...

• In most cases, no tabs are selected by default.

Interaction

Clicking a tab:

• selects it, and

• unselects any other tab

  ,

  .

  if

If the content panel is unpinned

...

:

• clicking a tab will open the content panel in overlay mode, hiding everything behind it

  ,if it is pinned -

  .

If the content panel is pinned:

• clicking a tab will shows the relevant content in the content panel.

The Content Panel

Structure

The content panel contains the following elements:

• At the top:

  • a title, similar to the corresponding title on the filter bar

    ,

    .

  • a pin icon button, allowing the user to switch between pinned and unpinned states

    ,

    .

  • a help icon button (optional).

• The area under the title is the main content area of the panel. See

  content

  Content below.

• The bottom of the panel may contain the following elements:

  • Either an Apply or an Apply to All button, depending on

    the filtering mode

    whether you’re using Discrete or Combined filtering (see

    above

    Basic Flow).

    • The Apply button is disabled until the filters currently shown in the content

      of the

      panel

      was

      have been changed.

    • The Apply All Filters button is disabled until the

      content on

      filters in any of the

      panels was

      tabs have been changed.

  • An indicator showing the number of selected items (e.g. 4 queues selected).

  • A Cancel button

    :

    .

    • The button is disabled until the filter selection in the content

      of the

      panel

      was

      has been changed.

  • A Clear button (in case the design has no chicklets)

    :

    .

    • The button is disabled

      until the filter was

      if no filters have been applied.

Placement and Positioning

• The content panel is attached positioned to the right side of the filter bar.

• The width of the panel is fixed.

...

• The main content area of the panel can show either a form Form, a list List, or a combination of the two.

• The content can have a variety of layouts. see common Common examples below.

• In some cases, users can navigate from the content panel to subsections Subsections, allowing them to access additional settings.

...

• Clicking the pin icon switches the icon between pinned and unpinned states.

  • When pinned:unpinned, the content of the page stretches to its full width,

    being partially hidden by the content panel

    closes, unless changes were made to the content before applying the filter. If changes were made, the panel will stay open until the changes are applied or cancelled

    .

  • When unpinned:pinned, the content of the page narrows to be shown next to the panel

    (

    , so nothing is hidden

    )

    .

• Clicking the help icon opens a relevant help page in a new browser window.

• Changing the content of the panel enables the Apply / Apply All Filters, Cancel, and Clear buttons, if existswhere they exist.

• Clicking the Apply / Apply All Filters button:

  • applies the filter (or filters),.

  • disables the button,.

  • enables the Clear button, if where it exists,.

  • shows a blue indicator next to the relevant tab (or tabs) on the filter bar,.

  • adds a chicklet (or chicklets) to the chicklet area (see The Chicklet Area below), unless otherwise specified,.

  • if unpinned - closes the content panel, if it is unpinned.

• Clicking the Cancelbutton:

  • cancels any changes made to the content before hitting the Apply / Apply All Filters button,.

  • cancels any unapplied changes made to the content.

  • disables the Apply / Apply All Filters and Cancel buttons,.

  • if unpinned - closes the content panel, if it is unpinned.

• Clicking the Clear button:

  • Resets all fields in the content panel to their initial default states , to (either blanks blank or with default valuesselections).

  • At this point, the user can either:

    • click Apply - this will remove the blue dot next to the relevant tab on the filter bar, as well as the corresponding chicklet, if exists,

    • click Cancel - this will revert the content panel to its previous state, before clicking the Clear button.

• Clicking outside the content panel:

  • If no changes were made to the content and The content panel closes if:

    • the panel is unpinned

    - closes the panel

    • . (When pinned, the panel always stays open).

    • no unapplied changes have been made.

  • If changes were have been made to the content but the filter was have not been applied, a popup Popup may appearsappear, allowing the user to either:

    • close the panel without applying the filter, or

    • continue editing.

...

Validations and errors

For validations within a form see Field Validation.

...

General Guidelines

• Chicklets give show the user an indication that the their data is currently filtered by one or more filters, which can be quickly cleared.

• There are two types of chicklets:

  • Regular - deleting these chicklets will clear the corresponding filters.

  • Mandatory - deleting these chicklets will show an empty state for the data, instructing the user to apply the mandatory filters (see below).

• In Discrete mode (see Basic Flow above), :

  • in most cases, clicking Apply in the content panel creates a single chicklet. However, when the panel contains several distinct parameters, applying the filter may create several chicklets.

• In Combined mode, :

  • clicking Apply All Filters may create a single or multiple chicklets, depending on the number of filters that

  were

  • have been changed.

States

• Each chicklet can have one of these states:

State	Image	Comments
Regular
Hover
Active / Selected		Only one chicklet can be selected at any given time.
Ghost
Ghost, Hover
Ghost, Active
Focused
Focused, Hover
Focused, Active

...

• The width of a chicklet will depend on its content, with a within minimum and maximum limits.

• Each chicklet contains:

  • an icon, which is a smaller version of the corresponding tab icon on the filter bar,.

  • the chicklet text will be:

    In case of

    .

    • For a single selection - , the selected value will be shown (e.g. “Last Last 24 hours”hours).In case of a multiple selection - either

    • For multiple selections, it can show either:

      • the selected values, separated by commas (e.g.

      “APAC

      • APAC,

      EMEA”

      • 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

      • Interactions (3))

      ”

      • . In this case, hovering the chicklet will show a tooltip with the full list of items.

  • a closing Close icon button (xX), showing shown 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 , shown to the right of the last chicklet.

Placement and Positioning

• The chicklet area appears on the content section of the pagein the main workspace, above the corresponding data.

• In case When no filters are applied, the chicklet area has no items it will be hidden. Adding the first chicklet will push all the content down, below the chicklet area.

• Mandatory chicklets will be the first items. Other items chicklets will appear in the order they were added.

• In case the set of chicklets (including the Clear All button) exceeds the width of the chicklet area, it they will wrap on to the next row, pushing the page content down. There can be up to three rows. Beyond : beyond that point, a scrollbar will appear.

Interaction

...

Clicking a chicklet

• When the content panel is pinned - shows the relevant content in the content panel.

• When unpinned - opens the relevant content panel.

Hovering a chicklet will show an X icon button, allowing the user to remove it.

Clicking the x icon:

• clears the corresponding filter,.

• clears the blue indicator from the corresponding tab on the filter bar (unless there are more items related to that filter).

• In case of a regular chicklet - :

  • removes the chicklet

  , moving

  • . Any remaining chicklets will move to

  take the place of the chicklet that was removed

  • close the gap.

• In case of a mandatory chicklet:

  • switches the chicklet to a “ghost” state,.

  • shows an empty state for the data, instructing the user to add the mandatory filter (see example above).

• If all chicklets were removed, an empty state will appear.

...

• shows a confirmation dialog (optional),.

• removes all chicklets, except for “ghost” chicklets if, exists,, where they exist.

• clears all filters,.

• clears the blue indicator from all tabs on the filter bar,.

• Shows shows an empty state.

Note: in complex scenarios, behaviour may vary (see below).

Best Practices

Use:

• when a major data set ( for example a table,

  a

  grid,

  a

  or dashboard

  etc.

  ) is shown

  in

  on 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 details pane

  Dialog or Details Panel.

Common Examples

Designs	Comment
	A single list filter with no dialog buttons.
	A date picker filter.
	A multi accordion filter.

Accessibility compliance

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

Design

Zeplin link	Screen thumbnail
https://zpl.io/VYPW7Ew
https://zpl.io/aR6MBxE
https://zpl.io/ad6xDz7
https://zpl.io/29pqgwy

...