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

Type	Usage	Image
Basic line list	The most common list, a flat collection of objects.
Single-line list	Up to one line of text.
Two-line list	Up to two lines of text.
Three-line list	Up to three lines of text
Checkbox list	list of options where the user may select multiple options

Related components

List components serves many time as a sub component within larger UI components like: Tree list, Drop Down Menu, Multiple selection drop down menu, Drag and drop and Combo box

Usage & Behaviour

General guidelines

Structure

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 middle and right side of the list item.

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

States:

 Focus, Hover, Selected, Disabled.

Content

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

Internal Logic

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

Interaction

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

<<use Click target to describe the interaction>>

• Mouseover an item will highlight the row and show a checkbox or action icons if exist.

• Clicking a single list item will select it.

• Clicking a checkbox will select / deselect the relevant item

• If at least one item is selected the Add to Search button will be enabled

• Clicking the Add to Search button will:

  • Close the popover

  • Add the selected terms or phrases to the search bar. Multiple items will be managed as if they had the OR operator between them

• To complete the search the user will press Enter or click the magnifying glass icon on the search bar (as usual)

• The popover will also be closed in clicking outside the popover

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

• 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

• 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 (more than the visabule container) , the sorting and the grouping alone are not sufficient and search should be applied (see search).

• When not to use

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

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