Add segments to progressbar (#3114)

* Allow ProgressBar to either be given child segments or just a progress value.

* Update ProgressBar docs.

* Fix progress bar tests.

* Create dry-weeks-compete.md

* Fix errors from CI.

* Rename ProgressBar.Segment to ProgressBar.Item.

* Pass backgroundColor instead of bg to get away from system props, simplify children check in ProgressBar.

* Updated snapshots.

* Updated snapshots using --no-cache flag.

.changeset/dry-weeks-compete.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Adds the option to declare multiple segments in a ProgressBar.

docs/content/ProgressBar.mdx

@@ -28,6 +28,19 @@ If you'd like to use ProgressBar inline, pass the `inline` boolean prop & **be s
 </>
 ```
 
+### Multiple Segments
+
+If you want to show multiple segments in a ProgressBar, pass separate `Item`s as children **instead** of a `progress` value.
+
+```jsx live
+<>
+  <ProgressBar>
+    <ProgressBar.Item progress={33} />
+    <ProgressBar.Item progress={33} sx={{backgroundColor: 'danger.emphasis'}} />
+  </ProgressBar>
+</>
+```
+
 ## Props
 
 <ComponentProps data={data} />

src/ProgressBar/ProgressBar.features.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {ComponentMeta} from '@storybook/react'
-import ProgressBar from './ProgressBar'
+import {ProgressBar} from '..'
 
 export default {
   title: 'Components/ProgressBar/Features',
@@ -17,3 +17,11 @@ export const SizeLarge = () => <ProgressBar progress="66" barSize="large" />
 export const Inline = () => <ProgressBar inline progress="66" sx={{width: '100px'}} />
 
 export const Color = () => <ProgressBar progress="66" bg="done.emphasis" />
+
+export const MultipleItems = () => (
+  <ProgressBar>
+    <ProgressBar.Item progress={33} />
+    <ProgressBar.Item progress={23} sx={{backgroundColor: 'danger.emphasis'}} />
+    <ProgressBar.Item progress={14} sx={{backgroundColor: 'severe.emphasis'}} />
+  </ProgressBar>
+)

src/ProgressBar/ProgressBar.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {Meta, ComponentStory} from '@storybook/react'
-import ProgressBar from './ProgressBar'
+import {ProgressBar} from '..'
 
 export default {
   title: 'Components/ProgressBar',

src/ProgressBar/ProgressBar.tsx

@@ -6,12 +6,14 @@ import sx, {SxProp} from '../sx'
 
 type ProgressProp = {progress?: string | number}
 
-const Bar = styled.span<ProgressProp & SxProp>`
+export const Item = styled.span<ProgressProp & SxProp>`
   width: ${props => (props.progress ? `${props.progress}%` : 0)};
-
+  background-color: ${get('colors.success.emphasis')};
   ${sx};
 `
 
+Item.displayName = 'ProgressBar.Item'
+
 const sizeMap = {
   small: '5px',
   large: '10px',
@@ -35,14 +37,22 @@ const ProgressContainer = styled.span<StyledProgressContainerProps>`
   ${sx};
 `
 
-export type ProgressBarProps = {bg?: string} & StyledProgressContainerProps & ProgressProp
+export type ProgressBarProps = React.PropsWithChildren & {bg?: string} & StyledProgressContainerProps & ProgressProp
+
+export const ProgressBar = ({
+  progress,
+  bg = 'success.emphasis',
+  barSize = 'default',
+  children,
+  ...rest
+}: ProgressBarProps) => {
+  if (children && progress) {
+    throw new Error('You should pass `progress` or children, not both.')
+  }
 
-function ProgressBar({progress, bg = 'success.emphasis', barSize = 'default', ...rest}: ProgressBarProps) {
   return (
     <ProgressContainer barSize={barSize} {...rest}>
-      <Bar progress={progress} sx={{bg}} />
+      {children ?? <Item progress={progress} sx={{backgroundColor: bg}} />}
     </ProgressContainer>
   )
 }
-
-export default ProgressBar

src/ProgressBar/index.ts

@@ -1 +1,8 @@
-export {default, ProgressBarProps} from './ProgressBar'
+import {ProgressBar as Bar, Item} from './ProgressBar'
+
+export type {ProgressBarProps} from './ProgressBar'
+
+/**
+ * Collection of ProgressBar related components.
+ */
+export const ProgressBar = Object.assign(Bar, {Item})

src/__tests__/ProgressBar.test.tsx

@@ -10,7 +10,8 @@ describe('ProgressBar', () => {
   behavesAsComponent({Component: ProgressBar})
 
   checkExports('ProgressBar', {
-    default: ProgressBar,
+    default: undefined,
+    ProgressBar,
   })
 
   it('should have no axe violations', async () => {

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

@@ -4,6 +4,7 @@ exports[`ProgressBar renders consistently 1`] = `
 .c1 {
   width: 0;
   background-color: #1f883d;
+  background-color: #1f883d;
 }
 
 .c0 {
@@ -30,6 +31,7 @@ exports[`ProgressBar respects the "progress" prop 1`] = `
 .c1 {
   width: 80%;
   background-color: #1f883d;
+  background-color: #1f883d;
 }
 
 .c0 {

src/index.ts

@@ -129,7 +129,7 @@ export {default as Popover} from './Popover'
 export type {PopoverProps, PopoverContentProps} from './Popover'
 export {default as Portal, registerPortalRoot} from './Portal'
 export type {PortalProps} from './Portal'
-export {default as ProgressBar} from './ProgressBar'
+export {ProgressBar} from './ProgressBar'
 export type {ProgressBarProps} from './ProgressBar'
 export {default as RadioGroup} from './RadioGroup'
 export type {RelativeTimeProps} from './RelativeTime'