Versions Compared

Key

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

...

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

  • On hover anywhere over an item, a check box 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 check boxes.

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

    • In this case:

      • clicking any other items (either the checkbox or the label) will add it to selected items

      • An “Apply” buttons appears, allowing the user to apply the selected items

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

...

<<Short Zeplin link. You
Use this
Image Removed>>

Zeplin link

Screen thumbnail

https://zpl.io/V1XnDX2

https://zpl.io/VOZ6QL2

https://zpl.io/aX06xpa

https://zpl.io/aBL3oe2

https://zpl.io/b6qGrNa

Image RemovedImage RemovedImage Removed



Code

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