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 details panel has two states:

  • Unpinned (default) - the panel overlays the content. Applying a filter or clicking outside the panel closes it

  • Pinned - the panel pushes the content so nothing is hidden. Applying a filter or clicking outside the panel keeps it visible

• In some cases, active filters are represented by a chicklet, appearing on a bar at the top of the data set

• A set of filters can behave in one of two 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 parent filters

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

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

The Filter Bar

Structure

• The filter bar contains one or more items

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

Placement and Positioning

• The filter bar sticks to the left end 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 items is aligned to the top of the bar

States

• Each item can have one of these states:

• In addition, an item can have one of these indicators, shown to the left of the icon:

  • A blue dot - indicates that the presented data set is currently filtered by this item

  • An orange ring - indicates that the filter contains one or more unsaved fields

Default State

• By default no item is selected

Interaction

• Clicking an item:

  • Switches the item to the selected state

  • Unselects any other selected item

  • Opens the relevant filter panel (if unpinned) or switches to it (if pinned)

The Filter Panel

Structure

• The filter panel contains the following elements:

  • At the top:

    • A title, similar to the filter’s name on the filter bar

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

    • A help icon (optional)

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

  • At the bottom:

    • An Apply button

    • In case of a form - a Cancel button

    • In case of a list - an indicator for the number of selected items (e.g. 4 queues selected)

Placement and Positioning

• The filter panel will be attached to the right side of the filter bar

  • In unpinned state it will overlay the content of the page, hiding the left part of it

  • In pinned state the data set will appear next to it, so nothing is hidden

• The filter panel will stretch vertically to the entire height of the filter bar

• The width of the panel will be fixed

Default State

• If the main content area contains a form, the first field will be in focus

Content

• The main content area of the panel can hold either a Form or a List, and have a variety of layouts

• See Common Examples below

Interaction

• Clicking the pin icon will:

  • Toggle between pinned and unpinned states

  • On pinned state - will also close the panel

• Clicking the help icon will open a relevant help page in a new tab

• Clicking outside the panel will:

  • On unpinned state - close the panel

  • If changes were made but the filter was not applied, it will:

    • Keep the changes

    • Show an orange indicator next to the relevant item on the filter bar

• Clicking the Apply button will:

  • Apply the filter to the data set

  • Show a blue indicator next to the relevant item on the filter bar

  • If relevant - add a chicklet to the chicklet bar (see below)

  • On unpinned state - will also close the panel

• Clicking the Cancel button (if relevant) will:

Validations and errors

• For validations within a form see Field Validation

Transitions

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

The Chicklet Bar

Best Practices

• When to use

• When not to use

Common Examples

Future Version (TBD)

< Edge cases, uncertain aspects, incomplete description>

• <…>

• <…>

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>>