Lead:  Liav Nadler Asaf Ben-Oved  ONGOING

Description

A filter pane is a panel located on the left side of a page, allowing users to filter the presented data set by a variety of parameters

Basic Flow

• The filter pane contains two areas: the filter bar and the filter panel

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

• The filter panel has two states:

  • Unpinned (default) - the panel overlays the content

  • Pinned - the panel pushes the content so nothing is hidden

• In some cases, active filters are represented by chicklets, appearing at the top of the data set (see below)

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

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

  • Funnel - the filters are ordered by hierarchy. Applying a parent filter will affect child filters, but applying a child filter will not affect parents filters

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

• 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 the related workspaces

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

The Filter Bar

Structure

• The filter bar contains one or more tabs

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

• An active filter is represented by a blue dot shown on the left side of the 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:

Default State

• By default no tabs are selected

Interaction

• Clicking a tab:

  • Switches the tab to Selected state

  • Unselects any other tab

  • If the filter panel is unpinned - opens the filter panel in overlay mode, hiding the content behind it

  • If it’s pinned - shows the relevant content

The Filter Panel

Structure

• The filter panel contains the following elements:

  • At the top:

    • A title, similar to the title on the filter bar

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

    • A help icon (optional)

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

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

    • An Apply button:

      • The button is mandatory, unless the panel contains only one possible selection

      • The button is disabled until the content of the panel was changed

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

    • A Cancel button:

      • The button is disabled until the content of the panel was changed

    • A Reset button (TBD)

      • The button is disabled until the filter was applied

Placement and Positioning

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

• The width of the panel is fixed

Content

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

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

Interaction

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

  • When pinned:

    • The content of the page is stretched to its full width

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

  • When unpinned:

    • 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 enabled the Apply, the Cancel and the Reset buttons, if exists

• Clicking the Apply button:

  • Applies the filter to the data set

  • Disables the Apply button

  • Enables the Reset button

  • Shows a blue indicator next to the relevant tab on the filter bar

  • If unpinned - closes the panel

  • When relevant - adds a chicklet to the chicklet area (see below)

• Clicking the Cancel button:

  • Cancels any changes made to the content before hitting the Apply button

  • Disables the Apply and Cancel buttons

  • If unpinned - closes the panel

• Clicking the Reset button:

  • Resets all fields in the filter to their initial state, either blanks or default values

  • At this point, the user can either:

    • Click the Apply button. In this case the

    • Clears the relevant filter

  • Removes the blue dot next to the relevant tab on the filter bar

  • Disables the Apply and Cancel buttons

  • If unpinned - closes the panel

• Clicking outside the panel:

  • If no changes were made to the content and the panel is unpinned - closes the panel

  • If changes were made to the content but the filter was not applied, a dialog appears, 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

Transitions

• The filter pane will open and close with a brief slide effect

• When pinning / unpinning the content will get wide / narrow with an effect

Best Practices

Opening a panel containing a form will set the focus to the first field of the form

The Chicklet Area

General Guidelines

• Chicklets gives the user an indication that the data is currently filtered by one or more filters

• There are two types of chicklets:

  • Pre-defined Mandatory- The user can change their value but cannot remove them (for example, when filtering by organization is mandatory)
    Deleting these chicklets will switch the data to empty state, instructing the user to apply all mandatory filters

  • Optional - the user can add, update and delete chicklets

States

Structure

• The chicklet area stretched to the full width of its container

• Each chicklet contains:

  • An icon, similar to the relevant icon on the filter bar

  • A label, showing the filter value (e.g. Last 24 hours). In case of multiple selection the chicklet will show the name of the filter, followed by the number of items in brackets (e.g. Interactions (3)). In this case, hovering the chicklet will show a tooltip with the list of items

  • A closing icon (x), allowing the user to remove the filter

Placement and Positioning

• The chicklet area appears on the content section of the page, above the data

• In case the chicklet area has no items it will be hidden. Adding the first item will push all the content below the chicklet area

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

• In case the set of chicklets exceeds the width of the chicklet area, it will wrap to the next row. Exceeding three rows will show a scroll bar

Interaction

• Clicking a chicklet:

  • When the filter panel is pinned: switches the filter panel to the selected filter

  • When unpinned: opens the relevant filter panel

• Clicking the x icon:

  • Removes the chicklet

  • Clears the corresponding filter

  • Removes the relevant blue indicator from the filter bar

• Note: on complex scenarios, behaviour may vary (see below)

Best Practices

• When to use

  • When a major data set (a table or a grid) is shown in the page and there is a need to filter it by one or more parameters

  • When dealing with complex filtering or with a large number of filters

• When not to use

  • When the data set is presented in a dialog or details pane

Common Examples

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

Future Version (TBD)

• Advanced filter pane, including drill

• Complex chicklet area, including operators, settings, freezing chicklets etc.

Accessibility compliance

<<In general each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>

Contrast & size compliance

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Design

Code

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