Button - Design System

[cg-mmirca]

Prerequisites

⚠️ This ticket can only be start once the ticket 466 is completed

• Button element will have the .dcx-button class name
• Button element will have .dcx-button--[variant] class name for all possible variants

Overview

Possible states:

• Default
• Disabled
• Active
• Hover
• Focus

Variants:

• Primary
• Secondary
• Tertiary

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

• default-primary
• default-secondary
• default-tertiary
• disabled-primary
• etc.

Keeping in mind we have the elements:

• Prefix -> action_prefix
• Postfix -> action_postfix
• Label -> action_label
• Box (Button element itself) -> action

Storybook

Create the pages for:

• Playground
• Default (Primary)
• Primary
• Secondary
• Tertiary
• AccessibleTheme
• DarkTheme
• MaterialTheme

On each MDX page make examples for:

• Text with prefix - icon on left side
• Text with postfix - icon on right side
• icon only
• Text only
• Disabled button

Token definition

Considerations:

• Take as reference the FormSelect component
• Add the tokens to src/design-system/tokens.json
• Define all styles in src/design-system/button.css
• Add import to the new CSS file in src/design-system/index.css

Possible tokens:

• color-action-primary
• color-action_prefix-primary
• color-action-primary-disabled
• color-text-action-primary
• color-text-action-primary-disabled
• color-text-action-secondary-disabled
• etc.

Follow the naming pattern:

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

F.e. for color-text-action_label-primary-disabled we have:

• catgory: color-text
• element: action_label
• variant: primary
• state: disabled

Please follow these steps to create your branch:

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

[daniele-zurico]

dependency solved by https://github.com/Capgemini/dcx-react-library/pull/490