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.

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.

Container
Left Slot (Optional)
Middle Slot
Right Slot (Optional)
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.

Container
List heading - Subtitle 1
Compact Button or Small QAB (Optional)
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.

List Row Reordering

When list reordering is needed, the grab and sort icons can either be surfaced when it is the main objective for the user or shown on hover for ayn advanced user needs. Note: The entire container is clickable to grab and drop.

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
List Heading	Text color	∆colorPlatformGray900
Reorder Avatar	Background color	∆colorPlatformAlpha0
Reorder Avatar	Icon color	∆colorAffordanceAccessible
Reorder Container and Content	Transparancy	∆colorPlatformAlpha500

Elevation

Elevation is considered when rows are dragged to be sorted.

Element	Property	Value
Row reordering container	Shadow Y offset	∆surfacePlatformRaisedShadowY
Row reordering container	Shadow opacity	∆surfacePlatformRaisedShadowOpacity
Row reordering container	Shadow spread	∆surfacePlatformRaisedShadowSpread
Row reordering container (static)	Shadow blur	∆surfacePlatformRaisedShadowBlurResting
Row reordering container (hover)	Shadow blur	∆surfacePlatformRaisedShadowBlurLifted
Row reordering container (pressed/active)	Shadow blur	∆surfacePlatformRaisedShadowBlurPressed
Row reordering container (dragged)	Shadow blur	∆surfacePlatformRaisedShadowBlurLifted

‍

Spacing

The right spacing on the list component is optional. There are use cases when we need the padding and when we do not. Flutter by default will have the padding but Iris Vue by default will not.

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. Single column lists don't have a bottom line on the last item. Multi-column lists do have a line on the last item. On Flutter, the list component will go into the right margin padding but in HTML it does not.

‍

Behavior

Developer Docs

Vue Developer Docs

Component documentation coming soon!