Label - Design System

[cg-mmirca]

Prerequisites

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

• Label element will have the .dcx-label class name
• • Label element will have the .dcx-label--[state] class name

Overview

Possible states:

• Default
• Error
• Filled

Variants: NONE

Keeping in mind we have the elements:

• Label (element itself) -> formcontrol_label

Note that the tokens already exists. They were created for FormSelect. We can simply reuse them here.

Storybook

Create the pages for:

• Playground
• Default
• AccessibleTheme
• DarkTheme
• MaterialTheme

On each MDX page make examples for:

• Default label with a related Input.
• Error label with a related error input.
• Filled input with label

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/label.css
• Add import to the new CSS file in src/design-system/index.css

Possible tokens:

• color-text-formcontrol_label
• font-family-formcontrol_label
• color-text-formcontrol_label-error
• font-weight-formcontrol_label
• font-size-formcontrol_label
• etc.

Follow the naming pattern:

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

F.e. for font-size-formcontrol_label-error we have:

• category: font
• property: size
• element: formcontrol_label
• variant: default -> not necessary to show in name
• state: error

Please follow these steps to create your branch:

git checkout release/0.8
git pull
git checkout -b 'feature/ds-label'

[daniele-zurico]

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

[daniele-zurico]

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