Versions Compared

Version Old Version 47 New Version Current
Changes made by

Rajesh Venkatesh

Ayelet Servi

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Lists are continuous, vertical indexes of text and images.

  • They are composed of items containing primary and in some cases supplemental information, which can be shown as text, icons, or images.

  • The component may be part of a page layout or in a Popover. They also often appear as a sub-component within a larger element, such as a Drop-down Menu, Drag and Drop, or Combo Box.

Image RemovedImage AddedImage RemovedImage AddedImage RemovedImage Added

Types

Type

Image

Usage

Simple list

Image RemovedImage Added

The most common list is a flat collection of objects.

Checkbox list

Image RemovedImage Added

A list where the user can select multiple options.

Tree list

Image RemovedImage Added

A hierarchical list with expanding and collapsing nodes which contain nested items. See the Tree page.

...

Single-line list

Two-line list

Three-line list

Full list

Image RemovedImage AddedImage RemovedImage Added

Single Item

Single item with icon / image

Single item with multi select

...

  • Alphabetical. If there are more than 8 options available, sort them alphabetically. This helps the user to find the right option quickly. Sort currencies, names, and similar content alphabetically.

  • Numeric. Sort numeric values in a sequential order, with the lowest number first.

  • Chronological. Sort time-related information into chronological order, with the most recent first.

States

State

Image

Regular

Image Removedimage-20240404-081201.pngImage Added

Hover

Image Removedimage-20240404-081257.pngImage Added

Active

Image Removedimage-20240404-081332.pngImage Added

Active, Hoverimage-20240404-074932.pngImage Removed

image-20240404-081403.pngImage Added

DisabledImage Removed

image-20240404-080132.pngImage Added

Focused

Image Removedimage-20240404-081545.pngImage Added

Focused, Hover

Image Removedimage-20240404-081628.pngImage Added

Focused, Active

Image Removedimage-20240404-081704.pngImage Added

Focused, Disabled

Image Removedimage-20240404-081729.pngImage Added

Interaction

  • On hover, the row will be highlighted and Checkboxes or Icon Buttons will appear, where applicable.

  • When the label is truncated (item name), hovering over it will show a Tooltip with the full label.

  • Items in the header area, including the search bar and list title, should remain sticky when the list is scrolled.

...

Interaction

Screenshot

Single Selection

  • Only one item can be selected.

  • Clicking anywhere on the item row will select it.

  • One item must always be selected.

  • Selecting an item will automatically deselect the previously-selected item.

Image Removed

Single Select-20240529-093756.jpgImage Added

Multi-select checkboxes

  • Clicking on any checkbox or anywhere on the item row will select or deselect the corresponding item.

  • Items can also be selected by holding the ctrl or shift keys on the keyboard and clicking anywhere on the item.

Image Removed

Multi-20240529-093413.jpgImage Added

Smart Selection

  • On hover anywhere over an item, a checkbox appears.

  • Clicking anywhere on the item row will select it. As with Single selection, selecting an item in this way will automatically deselect the previously-selected item.

  • Additionally, the user can select multiple items in one of two ways:

    • By directly checking any item checkboxes.

    • By holding the ctrl or shift keys on the keyboard and clicking anywhere on the item.

  • When relevant, an Apply button will appear, allowing the user to apply the selected items.

Image Removed

Smart-20240529-093343.pngImage Added

When the tree list includes a search field and the user starts typing the characters, the text “<number> found” or “<number> found out of <total no.>” will be displayed instead of the total no. of items.

...