diff --git a/.changeset/dry-weeks-compete.md b/.changeset/dry-weeks-compete.md
new file mode 100644
index 00000000000..801b09cbf3e
--- /dev/null
+++ b/.changeset/dry-weeks-compete.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Adds the option to declare multiple segments in a ProgressBar.
diff --git a/docs/content/ProgressBar.mdx b/docs/content/ProgressBar.mdx
index d14377636c6..888cccf8d15 100644
--- a/docs/content/ProgressBar.mdx
+++ b/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
+<>
+
+
+
+
+>
+```
+
## Props
diff --git a/src/ProgressBar/ProgressBar.features.stories.tsx b/src/ProgressBar/ProgressBar.features.stories.tsx
index 789bc6e9140..de3b28d9735 100644
--- a/src/ProgressBar/ProgressBar.features.stories.tsx
+++ b/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 = () =>
export const Inline = () =>
export const Color = () =>
+
+export const MultipleItems = () => (
+
+
+
+
+
+)
diff --git a/src/ProgressBar/ProgressBar.stories.tsx b/src/ProgressBar/ProgressBar.stories.tsx
index 9deb464d641..36628e8a777 100644
--- a/src/ProgressBar/ProgressBar.stories.tsx
+++ b/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',
diff --git a/src/ProgressBar/ProgressBar.tsx b/src/ProgressBar/ProgressBar.tsx
index 1bc9b183b07..88c8dbbf500 100644
--- a/src/ProgressBar/ProgressBar.tsx
+++ b/src/ProgressBar/ProgressBar.tsx
@@ -6,12 +6,14 @@ import sx, {SxProp} from '../sx'
type ProgressProp = {progress?: string | number}
-const Bar = styled.span`
+export const Item = styled.span`
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`
${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 (
-
+ {children ?? }
)
}
-
-export default ProgressBar
diff --git a/src/ProgressBar/index.ts b/src/ProgressBar/index.ts
index 77528695eef..6c0452114df 100644
--- a/src/ProgressBar/index.ts
+++ b/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})
diff --git a/src/__tests__/ProgressBar.test.tsx b/src/__tests__/ProgressBar.test.tsx
index 7b8f7444dd9..19735c739e6 100644
--- a/src/__tests__/ProgressBar.test.tsx
+++ b/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 () => {
diff --git a/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap
index fed8bb153f6..7050d8d3b7d 100644
--- a/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap
+++ b/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 {
diff --git a/src/index.ts b/src/index.ts
index f8db192ecec..335f542f443 100644
--- a/src/index.ts
+++ b/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'