Skip to end of banner
Go to start of banner

Dual List Selector

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 24 Next »

See also: Data Tables

Lead:  Liav Nadler ONGOING 

Description

A dual list 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 selector is the "Customise Columns" popup used in data tables.

Because it is also the most complex, this page will describe the Customise Columns popup.

Usage & Behaviour

General guidelines

  • The dual list selector appears in a dialog box titled Customise Columns
  • It is triggered by clicking the Columns action in the column contextual menu
  • 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)

Order

  • The Selected Columns list shows the list of columns in the same order as they appear on the data table
  • The Available Columns list is sorted alphanumerically

States

  • 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

Selecting Items

  • Clicking an item selects it. The user can select more than one item on the list, using the Ctrl (or Command) key for discrete selection, or the Shift key for a block selection. Toggle buttons?
  • Selecting items on a list deselects all the items on the other list

Moving items between lists

  • The user can move selected items between lists using one of two ways:
    • Clicking the right or left button between the lists
    • Using drag and drop
  • After the items were moved they remain selected until the user selects other items

Reordering items

  • The user can reorder selected items on the selected columns list by clicking the up or down buttons under the list
  • After the items were ordered they remain selected until the user selects other items
  • The user can also reorder items using /wiki/spaces/~347593403/pages/918783940

Locking columns (optional)

  • 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

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

Zeplin linkScreen thumbnail





Code

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

  • No labels