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 5 Next »

See also: Data Tables

Lead:  Liav Nadler ONGOING 

Description

A column picker is a component allowing the user to select and reorder columns in a data table

Usage & Behaviour

General guidelines

  • The column picker appears inside a dialog box named Set Columns
  • The dialog box contains two lists of items:
    • Selected Columns (on the right): a list of the currently displayed column in the data table
    • Available Columns (on the left): a list of all other available columns for that table
  • Between the two list there is a set of buttons, allowing the user to move items between lists
  • Under the selected columns list there is a set of buttons, allowing the user the reorder the selected items
  • Next to the selected columns title there is an indicator, showing the number of selected items out of the total number of items 
  • Each list will contain a search bar
  • If the number of items on a list is large enough to exceed its container, a scroll bar will appear

Order

  • The selected columns list will show the list of currently displayed columns in the same order as the original table
  • The available columns list will be ordered alphabetically 

Interaction

  • Mouseover an item will switch to hover state
  • Clicking an item will select it
  • The user can select more than one item on each list, using the Ctrl (or Command) key for discrete selection or the Shift key for a block selection
  • Selecting items in a list deselects all items on the other list

Best practices

<<e.g. Slider should display a .label its on>>

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