List

Approved — Ready for dev

Lists are continuous, vertical indexes of text that have the option to be selectable or not. The list component is not consistently made up of specific atoms or molecules.

List

Anatomy

The left slot is for content that exists outside of the divider. The content in any of the three slots can be any atom or molecules and will be defined by the design. 

  1. Container
  2. Left Slot (Optional)
  3. Middle Slot
  4. Right Slot (Optional)
  5. Divider (Optional)

List header

Lists may need a global header attached to them to give it a grouping name and allow a global action to the entire header. The items within the header are center aligned with the title being left aligned and the action being right aligned.

  1. Container
  2. List heading - Subtitle 1
  3. Compact Button or Small QAB (Optional)
  4. 2px line (Optional)

Content alignment

Left slot

The left slot content outside of the divider will be left aligned.

Middle slot

The content within the middle slot will be left aligned and either top aligned if it is more than one line of content or vertically aligned if it is only one line of content.

Right slot

The right slot content may be a type of action item, like a quick action button or switch, but it can also be additional data. All content can reside in a top, middle or bottom placement within the right slot. The action items will always be in the middle placement. 

Height

Container height

The height of a list item will grow with additional content added to it but the minimum height of a list component is 73px.

Slot height

The height of the slots will grow with additional content added to it but the minimum height of the slots will be 40px.


Specs

Color

Element Property Value
Divider Background color See divider documentation
Container (Static) Background color ∆colorPlatformAlpha0
Container (Hover) Background color ∆colorPlatformAlpha0
Container (Pressed) Background color ∆colorAffordance100
Container (Selected) Background color ∆colorPlatformAlpha0

Spacing


States

States

The list component can be in a read only state or the entire component can be clickable to go to another page. 


Theming

No theming considerations for the list component.


Placement

The list component can be used anywhere where a group of details is needed. The divider for the list will bleed into the right margin, if possible. If that is not possible then it will get cut off by the margin padding for the container it is in. The last item in the list will not have a divider. 


Behavior

Developer Docs

Vue Developer Docs

Component documentation coming soon!