List Styles

Right now there is an array of different list styles in GNOME design. This page is an attempt to define some common patterns.

Variables

Aspects of the list styles that vary:

• Separators between rows
• Background colors
• Row height
• Behaviour - press to select a row or press to activate (such as open a dialog or switch view)
• Selection indication - check mark vs change background color
• Height of list - expands to fill space, or is constained to the height of visible rows
• Attached toolbars

Examples

Tentative Guidelines

There are three primary types of lists in GNOME 3: standard, embedded, and sidebar.

Standard and embedded lists share some visual properties:

• Identical background colour and separators between rows.
• They encapsulate constituent rows (don't expand vertically).
• Selected rows are indicated through a checkbox or check mark icon, rather than the background color changing.

Standard Lists

• Generally used for lists of content items.
• No padding around the list.
• How to associate actions:
  • If rows link to other views or content items, clicking the row should open that item.
  • Selection mode can be used to perform actions on rows.
• Controls for sorting are located in the header bar.

Embedded Lists

• Used for lists of options and add/remove lists.
• Are surrounded by padding, to appear embedded.
• How to associate actions:
  • Each row can contain a small number of controls which affect that item.
  • Clicking a row can either:
    • Select it (selected rows are indicated with a check mark).
    • If the row contains a single control, activate that control (eg. a switch can be toggled).
    • Open a window, popover, or switch to another view.
  • Shouldn't be combined with selection mode.

Sidebar Lists

• Background color indicates which row is selected.
• No separators between rows.
• Used for sidebars only.
• How to associate actions:
  • Header bar controls can affect the selected row (eg. a delete button in the header bar could delete the selected row).
  • Selection mode can be used for acting on multiple items.
  • Rows can contain buttons or other controls (eg. each row could have a star icon for selecting favorites).

Add/Remove Lists

These are lists where rows can be added and removed. They are a common variant of the embedded list pattern.

• Shorter lists - the bottom row acts as an add button and each row includes a remove button.
• Longer lists - an add button is placed outside of the list (typically in the header bar). Selection mode allows rows to be removed.

Outstanding Questions

• Do we want to talk about / define traditional multi-column lists with headers (implemented with the tree view)?

Comments