ProgressBar: Add more progress bar examples #6269
Conversation
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds two new Storybook examples for the ProgressBar component: one that shows a visible text label next to the bar, and another demonstrating a segmented progress bar with a legend.
- Introduces a
WithVisibleTextValuestory that pairs the bar with a text percentage. - Introduces a
MultipleSegmentsstory showing three colored segments and a labeled legend.
| return ( | ||
| <> | ||
| <ProgressBar progress={50} aria-label="Loading example" /> | ||
| <p style={{color: 'var(--fgColor-muted)', font: 'var(--text-body-shorthand-medium)'}}>50% completed</p> |
There was a problem hiding this comment.
[nitpick] Consider using the Primer React Text component instead of a raw
with inline styles to maintain consistent typography and theming.
Copilot uses AI. Check for mistakes.
| <ProgressBar aria-valuenow={50}> | ||
| <ProgressBar.Item | ||
| progress={30} | ||
| style={{backgroundColor: 'var(--bgColor-success-emphasis)'}} |
There was a problem hiding this comment.
[nitpick] Use the sx prop or the ProgressBar.Item bg prop with theme tokens instead of applying inline style with CSS variables, ensuring consistency with the design system theming.
Copilot uses AI. Check for mistakes.
| export const MultipleSegments = () => { | ||
| return ( | ||
| <> | ||
| <ProgressBar aria-valuenow={50}> |
There was a problem hiding this comment.
The parent ProgressBar should include aria-valuemin and aria-valuemax (e.g., 0 and 100) to provide a complete accessible progress bar specification.
Copilot uses AI. Check for mistakes.
size-limit report 📦
|
Closes https://github.com/github/primer/issues/5314
Adds more progress bar examples for the
ProgressBarcomponent.Changelog
New
Rollout strategy
Testing & Reviewing
Merge checklist