Lead:  << Your name/s >> << Select the status -  

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

Description

<< Short description of the component and when it is used >>

<< Most communicative screenshot of the component >>

Basic Flow

<< Relevant only for patterns that have a more complex flow than the typical control (e.g. drag & drop) >> Lists are continuous, vertical indexes of text (or images). They are composed of items containing primary and supplemental information, which are represented by icons and text.

They help improve the visual comprehension of the content they hold.

The component may be part of a page layout as well as popover dialog box.  

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 >><<If you are using this section Usage & Behaviour should be used only for the Common functionalities in the page>>

List components serves many time as a sub component within larger UI components

Usage & Behaviour

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

General guidelines

<< Describes the component, use sub-section when they are relevant to the components >>

...

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

Structure

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

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