Capgemini / dcx-react-library

React Library UI/UX agnostic
https://main--6069a6f47f4b9f002171f8e1.chromatic.com
MIT License
107 stars 7 forks source link

MultiUpload - Design System #639

Open jgonza16 opened 2 months ago

jgonza16 commented 2 months ago

MultiUpload - Design System

1 - Prerequisites

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

2.3 - Structure

Element Description  Token Name
InputBox The native input itself  formcontrol
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:

Possible tokens:

Follow the naming pattern

3 - Storybook

Create the pages for:

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/multi-upload-design-system'