See also: Data Tables

Lead:  Liav Nadler 

Description

A dual list box selector is a component allowing the user to select multiple items. It is especially useful when the number of available items is large.

A common application for a dual list box is would be the "Customise Columns" popup used in data tables.

...

Usage & Behaviour

General guidelines

• In case of a column picker:

  • The dual list

  box

  • selector appears in a dialog box

   titled Customise Columns

  • It is triggered by clicking the Columns action in the column contextual menu

Structure

• The component contains two lists:

  • Selected Columns (on the right): a list of the currently displayed columns of the table

  • Available Columns (on the left): a list of all other columns available for that table

• Between the two lists there is a set of buttons, allowing the user to move items between them (as described below)

• Under the selected columns list there is a set of buttons, allowing the user the reorder the selected items (as described below)

• Next to the selected columns title there is an indicator, showing the number of selected items out of the total number of items (e.g. 7/22)

• At the top of each list there is a search bar, allowing the user to quickly locate specific items. The search bar is optional, depending on the number of items

• If the list is too long to be displayed in its container, a vertical scroll bar appears

• At the bottom-left corner of the dialog box a Restore Defaults button appears (see Interaction below)

...

• The right and left buttons are disabled until the user selected at least one item: selecting items on the right enables the left button, and vice versa

• The up and down buttons are disabled until the user selected at least one item on the Selected Columns list:

  • Selecting the top item will enable only the down button

  • Selecting the bottom item will enable only the up button

  • Selecting any other item will enable both the up and down buttons

• If the table contain columns that cannot be removed or reordered, the relevant items on the selected columns list will show as disabled

Interaction

• Mouseover an item triggers hover state

• Clicking the Restore Defaults button restores the dialog box to its original state, before any changes were made to the columns list

...

• The user can lock any column on the selected columns list by clicking the pin icon, shown on hover. In this case:

  • The icon changes from idle to selected

  • The item moves to the top of the list

  • The item can be ordered only inside the group of locked items

  • On the actual table the locked columns are anchored to the left. Locked items can be reordered only inside the group of locked items

• The user can unlock the column by clicking the lock icon again

...

Validation and Errors

• If the user removed all items from the selected list:

  • The search bar and reordering buttons are hiddendisabled

  • A message will appearappears, guiding the user to select at least one item

...

• In this case, clicking the Done button will:

  • Show Shows an error message

  • Switch Disables the Done button to disabled state

...

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