List Item - Design System

[cg-mmirca]

Prerequisites

⚠️ This ticket can only be start once the ticket 453 is completed

• List element will have the .dcx-list class name
• List Item element will have the .dcx-list-item class name
• List element will have .dcx-list--[variant] class name for all possible variants

Overview

Possible states:

• Default

Variants:

• ordered
• unordered

We need to define tokens for all the combinations between states and variants:

• default-ordered
• default-unordered

Keeping in mind we have the elements to style:

• List Item -> body - We use the body tokens, as it should look as plain body text
• Marker (Bullet/Square for unordered, Number/letter/roman numerals for ordered) -> marker

Note that the List element is not mentioned. It's a simple container element that provides semantic context. It should not have any styles, same as a DIV element.

Storybook

Create the pages for:

• Playground
• Default (Unordered)
• Ordered
• AccessibleTheme
• DarkTheme
• MaterialTheme

On each MDX page make examples for:

• List with single element
• List with multiple elements

Token definition

Considerations:

• Take as reference the FormSelect component. Take into consideration FormSelect will be refactored to follow the token names as described bellow in "possible tokens".
• Add the tokens to src/design-system/tokens.json
• Define all styles in src/design-system/list.css
• Add import to the new CSS file in src/design-system/index.css

Possible tokens:

• color-text-body
• color-marker
• color-marker--ordered
• etc.

Note that the List Element will use the body tokens. It won't be affected by the different variants. Only the marker element is affected.

Follow the naming pattern:

[token_category]-[property]-[element]-[variant]-[state]

F.e. for color-marker--ordered we have:

• category: color
• property: NONE -> it would be redundant
• element: marker
• variant: ordered
• state: default -> not necessary to show in name

Please follow these steps to create your branch:

git checkout release/0.8
git pull
git checkout -b 'feature/ds-list-item'

[daniele-zurico]

solved by #495

[daniele-zurico]

@cg-mmirca can you please raise another ticket about list in case you need specific classes to be added?

[daniele-zurico]

closed by #519