Versions Compared

Key

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

...

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

...

  • a leading icon. These should only be used if the list can contain several types of object. If all items are of the same type, an icon should not be used.

  • a leading image.

  • up to 2 secondary lines of text. Secondary lines cannot have their own leading icons or images.

  • extra metadata, such as a tag, text, or an icon. These should be positioned to the right of the item, centered vertically.

  • action icons, such as delete. These should only appear on hover or when an item is selected. They should be positioned to the right of the item, centered vertically (replacing the extra metadata, if it exists).

Single-line list

Two-line list

Three-line list

Full list

Single Item

Single item with icon / image

Single item with multi select

Lists can also have:

  • A a preceding label at the top of the list, to inform the user about the items included in the list.

  • A a Search field can be used for long, scrolling on long lists, allowing users to help the user to find items easily.

Internal Logic

...

State

Image

Comment

Regular

Hover

Active

Disabled

Focused

Focused, Hover

Focused, Active

Focused, Disabled

Interaction

  • On hover, the row will be highlighted and Check boxes 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.

There are three possible selection modes:

Single Selection

Multi-select check boxes

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

Multi-select check boxes

  • On hover anywhere over an item, a

Check
  • check box will appear.

  • Clicking on a check box will select or deselect an item. This can be repeated for multiple items in the list.

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

Smart Selection

  • 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

    selecting
    • checking any item check boxes.

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

  • When scrolling, the title and Search bar should stick to the top and remain visible.

...

Zeplin link

Screen thumbnail

<<Short Zeplin link. You
Use this
>><<Screen with 200 width>>

Image AddedImage AddedImage AddedImage AddedImage AddedImage AddedImage AddedImage Added



Code

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