Range - Design System

[jgonza16]

Range - Design System

1 - Prerequisites

• Host element will have the .dcx-range class name

2 - Overview

2.1 - Possible states

Name	Description
Default	Instance without specific properties defined
Disabled	Instance with native input disabled
Focus	Instance while receiving focus on native input
Hover	Instance while receiving hover on native input

2.2 - Variants

• No variants

2.3 - Structure

Element	Description	Token Name
RangeBox	Container native Input	spacing-x-formcontrol
Range	Native input itself	formcontrol
Prefix	Prefix container element	formcontrol_prefix
Suffix	Prefix container element	formcontrol_suffix

2.4 - Tokens definition

Considerations:

• Add the tokens to src/design-system/tokens.json
• Define all styles in src/design-system/forminput.css
• Add import to the new CSS file in src/design-system/index.css

Possible tokens:

• spacing-x-formcontrol
• color-background-range_box
• color-background-formcontrol
• color-background-formcontrol-hover
• color-background-formcontrol_suffix
• color-background-formcontrol_prefix
• etc.

Follow the naming pattern

3 - Storybook

Create the pages for:

• Playground
• Default
• AccessibleTheme
• DarkTheme
• MaterialTheme

On each MDX page make examples for each possible variant

4 - Initial setup

Please follow these steps to create your branch:

git checkout release/1.1.0
git pull
git checkout -b 'feature/forminput-design-system'

[Ahmet-K]

The branch's name might be 'feature/form-range-design-system' instead of 'feature/forminput-design-system'

[jgonza16]

Close with https://github.com/Capgemini/dcx-react-library/pull/662