Toggle - Design System

[jgonza16]

Toggle - Design System

1 - Prerequisites

• Host element will have the .dcx-toggle class name
• Host element will have sub-element with .dcx-toggle-custom-on-label class name
• Host element will have sub-element with .dcx-toggle-custom-off-label class name

2 - Overview

2.1 - Possible states

Name	Description
Default	Instance without specific properties defined
Disabled	Instance with native input disabled
Filled (Checked)	Instance with value
Focus	Instance while receiving focus on native input

2.2 - Variants

Name	Description
Default	Default look & feel

2.3 - Structure

Element	Description	Token Name
InputBox	The container box label element	formcontro_boxl
Input	The native input itself	formcontrol
CustomOnLabel	The label custom element	formcontrol_label
CustomOffLabel	The label custom element	formcontrol_label

When developing take a close look to the FormSelect component. It is a form element as well, the tokens and styling approach should be similar.

2.4 - Tokens definition

Considerations:

• ❗ Take a close look to the FormSelect component. It is a form element as well, the tokens and styling approach should be similar.
• Add the tokens to src/design-system/tokens.json
• Define all styles in src/design-system/toggle.css
• Add import to the new CSS file in src/design-system/index.css

Possible tokens:

• color-text-formcontrol
• color-text-formcontrol-filled
• color-text-formcontrol_label
• color-text-formcontrol_label-filled
• 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.0.0
git pull
git checkout -b 'feature/toggle-design-system'