Add bg prop to ProgressBar.Item (#5007)

* add bg prop to ProgressBar.Item

* Update .changeset/slow-walls-drum.md

Co-authored-by: Siddharth Kshetrapal <[email protected]>

* fixes

---------

Co-authored-by: Siddharth Kshetrapal <[email protected]>

Author: lukasoppermann

.changeset/slow-walls-drum.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+ProgressBar: Add `bg` prop to `ProgressBar.Item`

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

@@ -20,9 +20,9 @@ export const Color = () => <ProgressBar progress="66" bg="done.emphasis" aria-la
 
 export const MultipleItems = () => (
   <ProgressBar aria-valuenow={70} aria-label="Upload test.png">
-    <ProgressBar.Item progress={33} />
-    <ProgressBar.Item progress={23} sx={{backgroundColor: 'danger.emphasis'}} />
-    <ProgressBar.Item progress={14} sx={{backgroundColor: 'severe.emphasis'}} />
+    <ProgressBar.Item progress={33} sx={{bg: 'accent.emphasis'}} />
+    <ProgressBar.Item progress={23} bg={'danger.emphasis'} />
+    <ProgressBar.Item progress={14} bg={'severe.emphasis'} />
   </ProgressBar>
 )
 

packages/react/src/ProgressBar/ProgressBar.figma.tsx

@@ -28,18 +28,16 @@ figma.connect(
   {
     props: {
       color: figma.enum('color', {
-        green: 'var(--data-green-color)',
-        teal: 'var(--data-teal-color)',
-        blue: 'var(--data-blue-color)',
-        purple: 'var(--data-purple-color)',
-        orange: 'var(--data-orange-color)',
-        red: 'var(--data-red-color)',
-        pink: 'var(--data-pink-color)',
-        yellow: 'var(--data-yellow-color)',
-        auburn: 'var(--data-auburn-color)',
-        gray: 'var(--data-gray-color)',
+        green: 'success.empahsis',
+        blue: 'accent.emphasis',
+        purple: 'done.emphasis',
+        orange: 'severe.empahsis',
+        red: 'danger.emphasis',
+        pink: 'sponsors.emphasis',
+        yellow: 'attention.emphasis',
+        gray: 'neutral.epmhasis',
       }),
     },
-    example: ({color}) => <ProgressBarItem sx={{background: color}} />,
+    example: ({color}) => <ProgressBarItem bg={color} />,
   },
 )

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

@@ -1,8 +1,15 @@
-import React from 'react'
+import React, {useEffect} from 'react'
 import type {Meta} from '@storybook/react'
 import {ProgressBar, type ProgressBarProps} from '..'
 
-const sectionColors = ['success.emphasis', 'done.emphasis', 'severe.emphasis', 'danger.emphasis', 'attention.emphasis']
+const sectionColorsDefault = [
+  'success.emphasis',
+  'accent.emphasis',
+  'done.emphasis',
+  'severe.emphasis',
+  'danger.emphasis',
+  'attention.emphasis',
+]
 
 export default {
   title: 'Components/ProgressBar',
@@ -12,13 +19,21 @@ export default {
 export const Default = () => <ProgressBar aria-label="Upload test.png" />
 
 export const Playground = ({sections, ...args}: ProgressBarProps & {sections: number}) => {
+  const [sectionColors, setSectionColors] = React.useState(sectionColorsDefault)
+
+  useEffect(() => {
+    if (args.bg && args.bg !== '') {
+      setSectionColors([args.bg, ...sectionColorsDefault])
+    }
+  }, [args.bg])
+
   if (sections === 1) {
     return <ProgressBar {...args} sx={args.inline ? {width: '100px'} : {}} aria-label="Upload test.png" />
   } else {
     return (
       <ProgressBar aria-label="Upload test.png">
         {[...Array(sections).keys()].map(i => (
-          <ProgressBar.Item key={i} progress={100 / sections} sx={{bg: sectionColors[i]}} />
+          <ProgressBar.Item key={i} progress={100 / sections} bg={sectionColors[i]} />
         ))}
       </ProgressBar>
     )

packages/react/src/ProgressBar/ProgressBar.tsx

@@ -7,7 +7,10 @@ import type {SxProp} from '../sx'
 import sx from '../sx'
 import {warning} from '../utils/warning'
 
-type ProgressProp = {progress?: string | number}
+type ProgressProp = {
+  progress?: string | number
+  bg?: string
+}
 
 const shimmer = keyframes`
   from { mask-position: 200%; }
@@ -16,7 +19,7 @@ const shimmer = keyframes`
 
 export const Item = styled.span<ProgressProp & SxProp>`
   width: ${props => (props.progress ? `${props.progress}%` : 0)};
-  background-color: ${get('colors.success.emphasis')};
+  background-color: ${props => get(`colors.${props.bg || 'success.emphasis'}`)};
 
   @media (prefers-reduced-motion: no-preference) {
     &[data-animated='true'] {
@@ -86,7 +89,7 @@ export const ProgressBar = forwardRef<HTMLSpanElement, ProgressBarProps>(
 
     return (
       <ProgressContainer ref={forwardRef} role="progressbar" barSize={barSize} {...ariaAttributes} {...rest}>
-        {children ?? <Item data-animated={animated} progress={progress} sx={{backgroundColor: bg}} />}
+        {children ?? <Item data-animated={animated} progress={progress} bg={bg} />}
       </ProgressContainer>
     )
   },

packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap

@@ -4,7 +4,6 @@ exports[`ProgressBar respects the "progress" prop 1`] = `
 .c1 {
   width: 80%;
   background-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
-  background-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0 {