Add support for high contrast themes to ProgressBar

.changeset/lovely-vans-burn.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add `border` and `background-color` tokens to `ProgressBar` CSS, which increases contrast for high contrast themes

e2e/components/ProgressBar.test.ts

@@ -32,12 +32,8 @@ const stories = [
     id: 'components-progressbar-features--inline',
   },
   {
-    title: 'Color',
-    id: 'components-progressbar-features--color',
-  },
-  {
-    title: 'Dev SX Props',
-    id: 'components-progressbar-dev--default',
+    title: 'All Colors',
+    id: 'components-progressbar-features--all-colors',
   },
 ] as const
 

packages/react/src/ProgressBar/ProgressBar.docs.json

@@ -26,7 +26,7 @@
       "id": "components-progressbar-features--inline"
     },
     {
-      "id": "components-progressbar-features--color"
+      "id": "components-progressbar-features--all-colors"
     },
     {
       "id": "components-progressbar-features--multiple-items"

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

@@ -13,13 +13,23 @@ export const ProgressDone = () => <ProgressBar progress="100" aria-label="Upload
 export const SizeSmall = () => <ProgressBar progress="66" barSize="small" aria-label="Upload test.png" />
 export const SizeLarge = () => <ProgressBar progress="66" barSize="large" aria-label="Upload test.png" />
 
-export const Inline = () => <ProgressBar inline progress="66" sx={{width: '100px'}} aria-label="Upload test.png" />
+export const Inline = () => <ProgressBar inline progress="66" style={{width: '100px'}} aria-label="Upload test.png" />
 
-export const Color = () => <ProgressBar progress="66" bg="done.emphasis" aria-label="Upload test.png" />
+export const AllColors = () => (
+  <ProgressBar aria-label="Upload test.png">
+    <ProgressBar.Item progress={20} aria-label="Photo Usage" bg="accent.emphasis" />
+    <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" />
+    <ProgressBar.Item progress={7} aria-label="Music Usage" bg="neutral.emphasis" />
+    <ProgressBar.Item progress={7} aria-label="Music Usage" bg="attention.emphasis" />
+  </ProgressBar>
+)
 
 export const MultipleItems = () => (
   <ProgressBar>
-    <ProgressBar.Item progress={33} aria-label="Photo Usage" sx={{bg: 'accent.emphasis'}} />
+    <ProgressBar.Item progress={33} aria-label="Photo Usage" bg="accent.emphasis" />
     <ProgressBar.Item progress={23} aria-label="Application Usage" bg={'danger.emphasis'} />
     <ProgressBar.Item progress={14} aria-label="Music Usage" bg={'severe.emphasis'} />
   </ProgressBar>

packages/react/src/ProgressBar/ProgressBar.module.css

@@ -28,9 +28,11 @@
   display: flex;
   overflow: hidden;
   /* stylelint-disable-next-line primer/colors */
-  background-color: var(--borderColor-default);
+  background-color: var(--progressBar-track-bgColor);
   border-radius: var(--borderRadius-small);
   gap: 2px;
+  outline: solid 1px var(--progressBar-track-borderColor);
+  outline-offset: -1px;
 
   &:where([data-progress-display='inline']) {
     display: inline-flex;

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

@@ -28,7 +28,7 @@ export const Playground = ({sections, ...args}: ProgressBarProps & {sections: nu
   }, [args.bg])
 
   if (sections === 1) {
-    return <ProgressBar {...args} sx={args.inline ? {width: '100px'} : {}} aria-label="Upload test.png" />
+    return <ProgressBar {...args} style={{...(args.inline ? {width: '100px'} : {})}} aria-label="Upload test.png" />
   } else {
     return (
       <ProgressBar aria-label="Upload test.png">

packages/react/src/ProgressBar/ProgressBar.test.tsx

@@ -27,10 +27,6 @@ describe('ProgressBar', () => {
     expect(container.firstChild).toHaveAttribute('data-progress-display', 'inline')
   })
 
-  it('respects the "progress" prop', () => {
-    expect(render(<ProgressBar progress={80} aria-label="Upload test.png" />)).toMatchSnapshot()
-  })
-
   it('passed the `aria-label` down to the progress bar', () => {
     const {getByRole, getByLabelText} = render(<ProgressBar progress={80} aria-label="Upload test.png" />)
     expect(getByRole('progressbar')).toHaveAttribute('aria-label', 'Upload test.png')
@@ -76,4 +72,76 @@ describe('ProgressBar', () => {
 
     expect(getByRole('progressbar')).toHaveAttribute('aria-valuenow', '0')
   })
+
+  describe('bg prop', () => {
+    it('applies default success bg color when no bg prop is provided', () => {
+      const {getByRole} = render(<ProgressBar progress={50} aria-label="Upload test.png" />)
+      const progressBar = getByRole('progressbar') as HTMLElement
+
+      expect(progressBar.style.getPropertyValue('--progress-bg')).toBe('var(--bgColor-success-emphasis)')
+    })
+
+    it('applies custom bg color when bg prop is provided', () => {
+      const {getByRole} = render(<ProgressBar progress={50} bg="danger.emphasis" aria-label="Upload test.png" />)
+      const progressBar = getByRole('progressbar') as HTMLElement
+
+      expect(progressBar.style.getPropertyValue('--progress-bg')).toBe('var(--bgColor-danger-emphasis)')
+    })
+
+    it('handles different color variants correctly', () => {
+      const colorVariants = [
+        {input: 'danger.emphasis', expected: 'var(--bgColor-danger-emphasis)'},
+        {input: 'severe.emphasis', expected: 'var(--bgColor-severe-emphasis)'},
+        {input: 'sponsor.emphasis', expected: 'var(--bgColor-sponsor-emphasis)'},
+        {input: 'done.emphasis', expected: 'var(--bgColor-done-emphasis)'},
+        {input: 'accent.emphasis', expected: 'var(--bgColor-accent-emphasis)'},
+        {input: 'success.emphasis', expected: 'var(--bgColor-success-emphasis)'},
+        {input: 'neutral.emphasis', expected: 'var(--bgColor-neutral-emphasis)'},
+        {input: 'attention.emphasis', expected: 'var(--bgColor-attention-emphasis)'},
+      ]
+
+      for (const {input, expected} of colorVariants) {
+        const {getByRole, unmount} = render(<ProgressBar progress={50} bg={input} aria-label="Upload test.png" />)
+        const progressBar = getByRole('progressbar') as HTMLElement
+
+        expect(progressBar.style.getPropertyValue('--progress-bg')).toBe(expected)
+
+        // Clean up after each test to avoid multiple elements
+        unmount()
+      }
+    })
+
+    it('applies bg color to ProgressBar.Item when used in multi-item setup', () => {
+      const {container} = render(
+        <ProgressBar aria-label="Upload test.png">
+          <ProgressBar.Item progress={30} bg="danger.emphasis" aria-label="Danger item" />
+          <ProgressBar.Item progress={20} bg="success.emphasis" aria-label="Success item" />
+        </ProgressBar>,
+      )
+
+      const progressBars = container.querySelectorAll('[role="progressbar"]')
+
+      expect((progressBars[0] as HTMLElement).style.getPropertyValue('--progress-bg')).toBe(
+        'var(--bgColor-danger-emphasis)',
+      )
+      expect((progressBars[1] as HTMLElement).style.getPropertyValue('--progress-bg')).toBe(
+        'var(--bgColor-success-emphasis)',
+      )
+    })
+
+    it('handles bg values without emphasis gracefully', () => {
+      const {getByRole} = render(<ProgressBar progress={50} bg="danger" aria-label="Upload test.png" />)
+      const progressBar = getByRole('progressbar') as HTMLElement
+
+      expect(progressBar.style.getPropertyValue('--progress-bg')).toBe('var(--bgColor-danger-emphasis)')
+    })
+
+    it('preserves progress width regardless of bg color', () => {
+      const {getByRole} = render(<ProgressBar progress={75} bg="danger.emphasis" aria-label="Upload test.png" />)
+      const progressBar = getByRole('progressbar') as HTMLElement
+
+      expect(progressBar.style.getPropertyValue('--progress-width')).toBe('75%')
+      expect(progressBar.style.getPropertyValue('--progress-bg')).toBe('var(--bgColor-danger-emphasis)')
+    })
+  })
 })

packages/react/src/ProgressBar/ProgressBar.tsx

@@ -33,6 +33,7 @@ export const Item = forwardRef<HTMLSpanElement, ProgressBarItems>(
       'aria-valuetext': ariaValueText,
       className,
       style,
+      bg,
       ...rest
     },
     forwardRef,
@@ -51,9 +52,10 @@ export const Item = forwardRef<HTMLSpanElement, ProgressBarItems>(
     const progressBarBg = '--progress-bg'
     const styles: {[key: string]: string} = {}
 
-    const bgType = rest.bg && rest.bg.split('.')
+    const bgType = bg && bg.split('.')
     styles[progressBarWidth] = progress ? `${progress}%` : '0%'
-    styles[progressBarBg] = (bgType && `var(--bgColor-${bgType[0]}-${bgType[1]})`) || 'var(--bgColor-success-emphasis)'
+    styles[progressBarBg] =
+      (bgType && `var(--bgColor-${bgType[0]}-${bgType[1] || 'emphasis'})`) || 'var(--bgColor-success-emphasis)'
 
     return (
       <BoxWithFallback