Lead:  Omer.Glazer (Unlicensed)  ONGOING 

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

Description

Lists are continuous, vertical indexes of text and images. 

Types 

Type	Usage	Image
Simple list	The most common list, a flat collection of objects.
Checkbox list	list of options where the user may select multiple options
Tree list	a hierarchical list with expanding and collapsing nodes

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

a list item can have a leading icon/image or not, it can can have non or up to 2 secondly lines.

Single-line list	Two-line list	Three-line list

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

Can include: image, tags, icons, secondary text.

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

• 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

• You can click on the entire label

• Click on the node label (+counter) will select the node.

• When the label is truncated (node name), hovering over it will show a tooltip with the full label

• Selecting:

1. Single select: One item of the list can be selected. To select an item, click anywhere on the item row. Always keep one item selected. For single selection, this is the preferred mode.

2. Multiple selections: Allow the selection of one or more items. For this, the list provides checkboxes on the left side of each line item. Each item is selected independently of the others

Scrolling:

1. wide lists/long tables - sticky areas. When the user scrolls, the title and the filter info bar can stick to the top of the surrounding layout container

2. Mouse wheel should work on scroll.

Best practices

• 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

• Don’t use

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

  • For more complex items with multiple attributes that should be displayed use Data Tables

Other principles

• 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 visible container)and a slider is displayed beside the list . the sorting and the grouping alone are not sufficient and search should be applied (see search)

• Accessibility compliance

  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

We already set a general guidelines described in Keyboard & Focus Management Guidelines

Screen reader support

Make sure the components support screen reader for content or behavior where needed - see Screen Reader Guidelines

Design

Code

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