FormSelect - Design System - Githubissues

Capgemini / dcx-react-library

React Library UI/UX agnostic

https://main--6069a6f47f4b9f002171f8e1.chromatic.com

MIT License

111 stars 7 forks source link

FormSelect - Design System #469

Closed cg-mmirca closed 1 year ago

cg-mmirca commented 1 year ago

Prerequisites

FormSelect element will have the .dcx-formselect class name
FormSelect element will have .dcx-formselect--[variant] class name for all possible variants

Overview

Possible states:

Default
Disabled
Filled
Focus

Variants:

Default
Floating - floating label, similar to material

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

default
disabled
filled
focus
default-floating
disabled-floating
filled-floating
focus-floating

Keeping in mind we have the elements:

Label -> formcontrol_label
Select -> formcontrol
Hint -> formcontrol_hint
Error Message -> formcontrol_error

Storybook

Create the pages for:

Playground
Default
Floating
AccessibleTheme
DarkTheme
MaterialTheme

On each MDX page make examples for:

Default
With hint
With error
With hint and error
With value

Token definition

Considerations:

Create src/design-system/tokens.json file to store all Design Tokens in JSON format
Define all styles in src/design-system/formselect.css
Create new CSS file in src/design-system/index.css that bundles all components CSS for Design System to work

Possible tokens:

color-outline-formcontrol
color-outline-formcontrol-floating
color-text-formcontrol_label
color-text-formcontrol_label-floating
color-text-formcontrol_label-floating-filled
etc.

Follow the naming pattern:

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

F.e. for color-text-formcontrol_label-floating-filled we have:

catgory: color-text
element: formcontrol_label
variant: floating
state: filled

Please follow these steps to create your branch:

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

daniele-zurico commented 1 year ago

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