Progress - Design System

Open
#680 0 comments 0 reactions 1 assignee View on GitHub

@mariamontes7 is already working on this.

Since Jun 17, 2025.

Assessment

This issue has not been assessed yet.

Description

design-system

Progress - Design System

1 - Prerequisites

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

2 - Overview

2.1 - Possible states
Name Description
Default Instance without specific properties defined
2.2 - Variants
  • No variants
2.3 - Structure
Element Description  Token Name
ProgressBox Container native Input spacing-x-formcontrol
Progress Native progress itself  formcontrol
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-progress_box
  • color-background-formcontrol
  • 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/progress-design-system'
Dominant language
TypeScript
Stars
120
Forks
6
PR merge metrics
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Capgemini/dcx-react-library

All issues in Capgemini/dcx-react-library

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.