List Item - Design System

cg-mmirca commented 1 year ago

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 commented 1 year ago

solved by https://github.com/Capgemini/dcx-react-library/pull/495

daniele-zurico commented 1 year ago

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

daniele-zurico commented 10 months ago

closed by https://github.com/Capgemini/dcx-react-library/pull/519

Capgemini / dcx-react-library