Skip to content

Add ProgressBar/ProgressCircle component#634

Merged
mkernohanbc merged 27 commits intomainfrom
617-progress-bar
Mar 23, 2026
Merged

Add ProgressBar/ProgressCircle component#634
mkernohanbc merged 27 commits intomainfrom
617-progress-bar

Conversation

@mkernohanbc
Copy link
Copy Markdown
Contributor

This PR adds a new ProgressBar component, implemented based on RA ProgressBar.

The format prop enables developers to choose between the default (horizontal bar) format and an alternative ProgressCircle format. The size prop toggles between small, medium (default) and large formats:

Screenshot 2026-02-17 at 4 00 33 PM

The value can be set/incremented programmatically, eg. via useState:

Screen.Recording.2026-02-17.at.3.39.25.PM.mov

Both formats use the same API, including support for an indeterminate/animated state via the isIndeterminate prop:

Screen.Recording.2026-02-17.at.3.57.53.PM.mov

Props are also provided to set:

  • Label text: valueLabel
  • Format value (Intl.NumberFormat): formatOptions
  • Value range: minValue and maxValue

@mkernohanbc mkernohanbc added this to the Components v0.7.0 milestone Feb 18, 2026
@mkernohanbc mkernohanbc self-assigned this Feb 18, 2026
@mkernohanbc mkernohanbc added the Components Changes or issues affect the design-system-react-components package label Feb 18, 2026
@mkernohanbc mkernohanbc linked an issue Feb 18, 2026 that may be closed by this pull request
Copy link
Copy Markdown
Contributor

@ty2k ty2k left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wicked component! 🚀 I think it should be two separate ones for the bar and circle, and there are some minor fixes and requests below.

Comment thread packages/react-components/src/components/ProgressBar/ProgressBar.tsx Outdated
Comment thread packages/react-components/src/components/ProgressBar/ProgressBar.tsx Outdated
Comment thread packages/react-components/src/components/ProgressBar/ProgressBar.tsx Outdated
Comment thread packages/react-components/src/components/ProgressBar/ProgressBar.tsx Outdated
Comment thread packages/react-components/src/components/ProgressBar/ProgressBar.css Outdated
Comment thread packages/react-components/src/components/ProgressBar/ProgressBar.css Outdated
Comment thread packages/react-components/src/components/ProgressBar/ProgressBar.css Outdated
@mkernohanbc mkernohanbc requested a review from ty2k March 11, 2026 21:09
Copy link
Copy Markdown
Contributor

@ty2k ty2k left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! I think this is ready to go. 🚀

Comment thread packages/react-components/src/stories/ProgressBar.mdx Outdated
@mkernohanbc mkernohanbc merged commit 53cd727 into main Mar 23, 2026
5 checks passed
@mkernohanbc mkernohanbc deleted the 617-progress-bar branch March 26, 2026 20:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Components Changes or issues affect the design-system-react-components package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Progress bar

4 participants