Lead:  Omer.Glazer (Unlicensed)  ONGOING 

Related Pages: << Links to related pages, if relevant >>

Description

Lists are continuous, vertical indexes of text (or images). 

Types 

<< Relevant only if the component has several distinct types (e.g. editable tables, nested tables). In this case each type should be described in a sub-page >>

Usage & Behaviour

<< Use a visual for each sub-section >>

General guidelines

• Use data lists when-

  • A flexible layout is more important than arranging information in a grid

  • You want to include active content like a chart

  • Content displayed may vary between rows

• Logical ordering - Lists should be sorted in logical ways that make content easy to scan, such as alphabetical, numerical, chronological, or by user preference.

• Actionable - Lists present content in a way that makes it easy to identify a specific item in a collection and act on it.

• Searchable- When a list is really long, the sorting and the grouping alone are not sufficient and search should be applied (see search).

• Groupable -For a more complex and longer lists grouping and categorisation can be applied (see list view)

Structure

<<A description of the structure of the component, including areas, sub-components etc.>>

Icon (optional)

should be used only if the list can contain several types of objects . If all nodes are of the same type, an icon should not be used.

Label

Object name + tooltip in case the entire name does not fit.

Secondly text (optional)

One or two Secondly text, they should not have their own leading icons.

Meta data (optional)

Can be text , tag or an icon. Should be aligned to top right side of the list item.

Action icons (optional)
Should be aligned to top right side of the list item. should appear only on item hover (instead of the meta data if exists)

States: Focus, Hover, Selected, Disabled.

Placement and Positioning

<<For example, in popups and toast messages>>

Default State

<<When there is more than one state for a control or area. Including default values>>

Content

<<Including labels, microcopy, number of items, order of items etc.>>

Internal Logic

<<For example, controls dependencies in a form>>

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

Code

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