List

Healthy
Show details
Healthy
Published: May 22, 2023
Updated: March 20, 2024

Overview

The List is a collection of items in an organized, vertical arrangement presented in a concise, readable format—making it ideal for displaying a variety of content types, from simple text to more complex data structures.

Lists can be used in lieu of a table if the List item does not need multiple metadata attributes visible on the list at all times. Lists generally have less-complex filtering mechanics than an Index and that should be considered when opting to use this component.

The List component works well in cases where an unpredictable number of items can be created and the creation of the item can be done either inline or in a simple modal.

Basic List

Design

Structure

  • List header:
  • List container
  • List Footer
  • List Item

Interactions

Basic list

  • Actions for each row appear as ghost buttons with icons only.
  • A list can include a button to add a new item.
  • For lists that allow a default item to be set, an action will appear on hover that allows the marketer to click and that item as the default. A filled star will appear to the far-right before the actions to indicate that the default is set for that item.
  • The bottom row indicates the number of items shown in the list and the total number of items. This is to indicate the amount of search results compared to the total.
  • The saved default should always be displayed at the top of the list.

 

Searchable list

  • Searching filters the list by the keyword, but never changes the height of the container component.
  • The “X selected” displays the total amount selected, regardless of whether those items appear in the search-filtered list.

 

Selectable rows

  • The neutral badge component can be used to indicate metadata of the item, such as data type.
  • For MVP, the optional checkbox for each row indicates a boolean property of the item, NOT a bulk-action selection. In this instance, a checkbox would indicate which User Fields are marked as “hidden”. This list would be accompanied by a help text that says “Select user fields to be hidden”
  • When items are selectable, we display the total number selected on the right side of the footer. This number will always show the TOTAL number selected, even if the search filter is active.

 

Empty state

  • This variant is when there are no items at all. Search is disabled when there are no items.

 

No results

  • This variant is when there are no items found in the resulting search.
  • The footer is still shown when there are TOTAL items, even if there are 0 results.

 

Creating items

  • The “+ New [resource]” button will spawn a modal with an overlay that obscures the rest of the page.
  • The locale modal will retain the behavior where multiple locales can be added at once (comma separated). The new locale is added to the list immediately, but there is no “added” confirmation, because these changes won’t take effect until the “Save project settings” button is triggered.
  • The locale modal will retain the behavior where multiple locales can be added at once (comma separated)

 

Deleting items

  • After the default locale is deleted, the next locale in the list becomes the default. (Existing behavior)

 

Setting default action

  • When hovering over an item that isn’t actively the default item, an option will appear to make it the default.
  • Once clicked, it will set the item as the default in the list. The item will move to the top of the lis
  • A confirmation toast will appear alerting the marketer that the default has been set. The default set can be indicated by a star at the end of the list item.
  • If a default was previously set, this will replace the prior default.

 

Overflow actions

  • Since actions in the list are usually IconButtons paired with a tooltip, more complex actions that need a more explicit, visible label or may be tertiary actions should be placed in the overflow menu.

 

Guidelines

Use cases

Creating locales

The list component is used within Project Settings to create and set default Locales.

 

 

 

 

Content

 

 

Accessibility

 

Health

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Storybook

Includes a link to an external code repository

Status

The component has a health status indicated

Healthy