Add support for high contrast themes to `ProgressBar` #6431

langermank · 2025-08-01T02:27:55Z

Closes https://github.com/github/primer/issues/5587

Note: this isn't a foolproof solution but I think covers most contrast issues. Unfortunately the existing API is very open-ended, meaning you can really pass in any color you want for the item. I tried to find a solution that only touches the track bg/border as to not manipulate item colors, but again, not foolproof.

Changelog

New

Adds a border and background color to the ProgressBar track to try and add contrast for high contrast themes (default themes are unchanged)
Removes old snapshot tests
Adds new color VRT tests + general tests to replace snapshots
Attempts to correct the insanely open-ended bg prop to always find an emphasis color

Changed

Removed

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2025-08-01T02:27:59Z

🦋 Changeset detected

Latest commit: ebd9480

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-08-01T02:28:23Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

github-actions · 2025-08-01T02:31:55Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	90.28 KB (+0.15% 🔺)
packages/react/dist/browser.umd.js	90.44 KB (+0.11% 🔺)

github-actions · 2025-08-12T19:08:36Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

github-actions · 2025-08-12T23:14:13Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

primer-integration · 2025-08-13T16:39:08Z

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/396331

primer-integration · 2025-08-13T18:14:38Z

🟢 golden-jobs completed with status success.

Copilot

Pull Request Overview

This PR adds support for high contrast themes to the ProgressBar component by implementing better color tokens and improving the existing color API. The main focus is on increasing visual contrast for accessibility without breaking existing functionality.

Key changes:

Introduces new CSS tokens for track background and border colors to support high contrast themes
Improves the bg prop handling to automatically default to 'emphasis' variants when not specified
Replaces snapshot tests with more comprehensive color-focused unit tests and visual regression tests

Reviewed Changes

Copilot reviewed 10 out of 44 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
`ProgressBar.module.css`	Updates CSS to use new color tokens with border outline for high contrast support
`ProgressBar.tsx`	Enhances bg prop logic to default to 'emphasis' variant and fixes prop passing
`ProgressBar.test.tsx`	Removes snapshot test and adds comprehensive bg prop testing
`ProgressBar.stories.tsx`	Updates styling approach from sx to style prop
`ProgressBar.features.stories.tsx`	Replaces single color story with comprehensive AllColors story and updates prop usage
`ProgressBar.dev.stories.tsx`	Removes dev stories file entirely
`e2e/components/ProgressBar.test.ts`	Updates test references to match new story names
`.changeset/lovely-vans-burn.md`	Documents the patch release changes

_{You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.}

Copilot · 2025-08-13T21:57:42Z

packages/react/src/ProgressBar/ProgressBar.tsx

@@ -33,6 +33,7 @@ export const Item = forwardRef<HTMLSpanElement, ProgressBarItems>(
      'aria-valuetext': ariaValueText,
      className,
      style,
+      bg,


The bg prop is being destructured and passed to the Box component, but it's also being used in the logic below via rest.bg. This creates a conflict where rest.bg will be undefined since bg was already extracted from rest. Either use bg consistently throughout or don't destructure it from the props.

Suggested change

bg,

bg, // Note: bg is used only for local style computation and is not passed down

Copilot · 2025-08-13T21:57:42Z

packages/react/src/ProgressBar/ProgressBar.features.stories.tsx

+    <ProgressBar.Item progress={15} aria-label="Application Usage" bg="danger.emphasis" />
+    <ProgressBar.Item progress={12} aria-label="Music Usage" bg="severe.emphasis" />
+    <ProgressBar.Item progress={11} aria-label="Music Usage" bg="done.emphasis" />
+    <ProgressBar.Item progress={8} aria-label="Music Usage" bg="sponsors.emphasis" />


The bg prop value should be 'sponsor.emphasis' not 'sponsors.emphasis' based on the pattern used in other color variants.

Suggested change

<ProgressBar.Item progress={8} aria-label="Music Usage" bg="sponsors.emphasis" />

<ProgressBar.Item progress={8} aria-label="Music Usage" bg="sponsor.emphasis" />

pksjce

Does the bg prop need to be documented?

langermank · 2025-08-14T21:14:20Z

@pksjce that prop is already documented in our docs if that's what you're referring to! I didn't add it here, I just fixed it slightly.

setup high contrast

db36080

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Aug 1, 2025

langermank deployed to github-pages August 1, 2025 02:36 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6431 August 1, 2025 02:37 Inactive

test colors

a55ba21

langermank deployed to github-pages August 1, 2025 15:04 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6431 August 1, 2025 15:05 Inactive

fix sx prop

557680d

langermank added the update snapshots label Aug 1, 2025

langermank deployed to github-pages August 1, 2025 15:24 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6431 August 1, 2025 15:25 Inactive

cleanup

229650d

langermank deployed to github-pages August 1, 2025 17:28 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6431 August 1, 2025 17:29 Inactive

langermank removed the update snapshots label Aug 1, 2025

langermank added 2 commits August 1, 2025 10:44

lint

cc15870

fix docs

cb5c240

github-actions bot requested a deployment to storybook-preview-6431 August 1, 2025 17:49 Abandoned

langermank deployed to github-pages August 1, 2025 18:03 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6431 August 1, 2025 18:03 Inactive

test(vrt): update snapshots

8a6dcac

github-actions bot removed the update snapshots label Aug 12, 2025

github-actions bot temporarily deployed to storybook-preview-6431 August 12, 2025 19:09 Inactive

primer bot deployed to github-pages August 12, 2025 19:19 View deployment

github-actions bot temporarily deployed to storybook-preview-6431 August 12, 2025 19:20 Inactive

sigh

ebd9480

github-actions bot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Aug 12, 2025

langermank deployed to github-pages August 12, 2025 23:23 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6431 August 12, 2025 23:23 View deployment

github-actions bot removed the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Aug 13, 2025

langermank marked this pull request as ready for review August 13, 2025 21:57

Copilot AI review requested due to automatic review settings August 13, 2025 21:57

langermank requested review from a team as code owners August 13, 2025 21:57

langermank requested a review from mperrotti August 13, 2025 21:57

Copilot AI reviewed Aug 13, 2025

View reviewed changes

langermank mentioned this pull request Aug 13, 2025

Support high contrast themes in ProgressBar primer/view_components#3636

Merged

pksjce approved these changes Aug 14, 2025

View reviewed changes

langermank added this pull request to the merge queue Aug 14, 2025

Merged via the queue into main with commit 0c21301 Aug 14, 2025
43 checks passed

langermank deleted the progressbar-high-contrast branch August 14, 2025 21:22

primer bot mentioned this pull request Aug 14, 2025

Release tracking (rc) #6589

Open

pksjce pushed a commit that referenced this pull request Aug 15, 2025

Add support for high contrast themes to ProgressBar (#6431)

7577876

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add support for high contrast themes to `ProgressBar` #6431

Add support for high contrast themes to `ProgressBar` #6431

Uh oh!

langermank commented Aug 1, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Aug 1, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 1, 2025

Uh oh!

github-actions bot commented Aug 1, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 12, 2025

Uh oh!

github-actions bot commented Aug 12, 2025

Uh oh!

primer-integration bot commented Aug 13, 2025

Uh oh!

primer-integration bot commented Aug 13, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Aug 13, 2025

Uh oh!

Copilot AI Aug 13, 2025

Uh oh!

pksjce left a comment

Uh oh!

langermank commented Aug 14, 2025

Uh oh!

Uh oh!

Uh oh!

	bg,
	bg, // Note: bg is used only for local style computation and is not passed down

	<ProgressBar.Item progress={8} aria-label="Music Usage" bg="sponsors.emphasis" />
	<ProgressBar.Item progress={8} aria-label="Music Usage" bg="sponsor.emphasis" />

Add support for high contrast themes to ProgressBar #6431

Add support for high contrast themes to ProgressBar #6431

Uh oh!

Conversation

langermank commented Aug 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Aug 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Aug 1, 2025

Uh oh!

github-actions bot commented Aug 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

github-actions bot commented Aug 12, 2025

Uh oh!

github-actions bot commented Aug 12, 2025

Uh oh!

primer-integration bot commented Aug 13, 2025

Uh oh!

primer-integration bot commented Aug 13, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 13, 2025

Choose a reason for hiding this comment

Uh oh!

pksjce left a comment

Choose a reason for hiding this comment

Uh oh!

langermank commented Aug 14, 2025

Uh oh!

Uh oh!

Uh oh!

Add support for high contrast themes to `ProgressBar` #6431

Add support for high contrast themes to `ProgressBar` #6431

langermank commented Aug 1, 2025 •

edited

Loading

changeset-bot bot commented Aug 1, 2025 •

edited

Loading

github-actions bot commented Aug 1, 2025 •

edited

Loading