Form Input - Design System

[mmirca]

Form Input - Design System

1 - Prerequisites

• Host element will have the .dcx-form-input class name
• Host element will have conditional classes for error state .dcx-form-input--error class name
• Host element will have conditional classes for filled state .dcx-form-input--filled class name

2 - Overview

2.1 - Possible states

Name	Description
Default	Instance without specific properties defined
Disabled	Instance with native input disabled
Filled	Instance with value
Focus	Instance while receiving focus on native input
Error	Instance with validation errors

2.2 - Variants

Name	Description
Default	Default look & feel
Floating	Same as FormSelect we can have a floating label effect

2.3 - Structure

Element	Description	Token Name
InputBox	The native input itself	formcontrol
InputBox Prefix	The element prefixing the native input	formcontrol_pre
InputBox Postfix	The element postfixing the native input	formcontrol_post
Label	The label element, acts as placeholder too	formcontrol_label
Error	The error message	formcontrol_error
Hint	The hint message	formcontrol_hint

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/forminput.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-error
• color-text-formcontrol-floating-filled
• color-text-formcontrol_label
• color-text-formcontrol_label-filled
• color-text-formcontrol_label-error
• color-text-formcontrol_label-floating-error
• 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/forminput-design-system'

[daniele-zurico]

closed by #586