Lead:  Liav Nadler Asaf Ben-Oved  

...

• 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 indicator (ring?) - indicates that the filter contains one or more unsaved fields

Default State

• By default no item is selected

...

• Clicking an item:

  • Switches the item to the selected state

  • Unselects any other selected item

  • Opens If filter panel is unpinned - opens the relevant filter panel (if unpinned) or switches to it (if pinned)in overlay mode, hiding the content beneath it

  • If it’s pinned - switches to the relevant panel

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 statestates

    • 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 showing the number of selected items (e.g. 4 queues selected)

...

• 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 barThe 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 , a List or a combination of the two
  TBD

• The content area may have a variety of layoutsSee Common Examples . see common examples below

Interaction

• Clicking the pin icon will:

  • Toggle between pinned and unpinned states

  • On pinned state - will also close the panelWhen pinned:

    • Switches the icon to unpinned

    • Closes the panel

    • Stretches the main area of the page to take the place of the closed panel

    • In case the panel’s content was updated but the filter was not applied:

      • The panel will keep both the data and the focus

      • The orange indicator will appear next to the relevant item on the filter bar

  • When unpinned:

    • Switches the icon to pinned

    • Narrows the main area of the page to be shown next to the panel (so nothing is hidden)

  • Note: pinning and unpinning a panel will pin/unpin all other panels simultaneously

• 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 changescurrent selections and focus in the panel

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

  • If unpinned - closes the panel

• Clicking the Apply button will:

  • Apply Applies the filter to the data set

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

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

  • On If unpinned state - will also close closes the panel

• Clicking If the panel contains a form, clicking the Cancel button (if relevant) will:

  • When unpinned - close the panel without saving any changes

Validations and errors

• For validations within a form see Field Validation

...

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

Best Practices

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

The Chicklet Bar

...

General Guidelines

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

• There are two types of chicklets:

  • Pre-defined - The user can change their value but cannot remove them (for example, when filtering by a single organization is mandatory)

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

Structure

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

• The bar may contain any number of items. In case items doesn’t fit in a single row, the bar will expand to show items in multiple rows

• 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) multiple selection?

  • If the chicklet is optional - a closing icon (x), allowing the user to remove the filter

Placement and Positioning

• The chicklet bar appears on the main area of the page, above the data set

• In case the chicklet bar has no item it will be hidden. Adding the first item will show the bar, pushing all the content below it

• Pre-defined chicklets will be the first items on the bar. Other items will appear in the order they were added (in the order shown on the chicklet bar?)

• In case the set of chicklets exceeds the width of the chicklet bar’s container, it will wrap to another row

Best Practices

• When to use

• When not to use

...