Skip to end of banner
Go to start of banner

Column Picker

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

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 with the title "Set Columns"
  • The dialog box contains these elements:
 Example for heading in general

<<use heading 3>>

  • Text (Headings, labels, microcopty, help text Etc..) ( how to write microcopy for that component. For example, in lists the list items must be grammatically parallel and don’t mix active and passive voice etc)
  • Format / structure (describe the objects the component is made of and are optional e.g. search bar in a table) (for search component include - variations, results)(for tabs - Number of tabs)
  • Content (for example, in dropdowns and lists)
  • Length (e.g. length of list)
  • Order (e.g. order of drop down menu)
  • Placement or Positioning (when this is important, e.g. toast message)
  • Internal Logic (when explaining how to use different components inside the current component. For example, when to use radio buttons, checkboxes, and fields in a form)
  • Default section or Default values 

States

<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>

Interaction

<<for example, how to change a value – type, arrows, use slider>>

<<use Click target to describe the interaction>>

Validations and errors

<<used for specific components e.g. slider>>

Transitions

<<Used to describe transitions or animations the occurs in any of the interaction stages>>

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