diff --git a/.changeset/stale-pets-tan.md b/.changeset/stale-pets-tan.md
new file mode 100644
index 00000000000..fcbdf4f75c8
--- /dev/null
+++ b/.changeset/stale-pets-tan.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+ProgressBar: Adding default gap between sections for progressbars with more than one section
diff --git a/packages/react/src/ProgressBar/ProgressBar.stories.tsx b/packages/react/src/ProgressBar/ProgressBar.stories.tsx
index e566a3003c3..97cb0d2c450 100644
--- a/packages/react/src/ProgressBar/ProgressBar.stories.tsx
+++ b/packages/react/src/ProgressBar/ProgressBar.stories.tsx
@@ -1,6 +1,8 @@
import React from 'react'
-import type {Meta, StoryFn} from '@storybook/react'
-import {ProgressBar} from '..'
+import type {Meta} from '@storybook/react'
+import {ProgressBar, type ProgressBarProps} from '..'
+
+const sectionColors = ['success.emphasis', 'done.emphasis', 'severe.emphasis', 'danger.emphasis', 'attention.emphasis']
export default {
title: 'Components/ProgressBar',
@@ -9,15 +11,26 @@ export default {
export const Default = () =>
-export const Playground: StoryFn = args => (
-
-)
+export const Playground = ({sections, ...args}: ProgressBarProps & {sections: number}) => {
+ if (sections === 1) {
+ return
+ } else {
+ return (
+
+ {[...Array(sections).keys()].map(i => (
+
+ ))}
+
+ )
+ }
+}
Playground.args = {
progress: 66,
barSize: 'default',
inline: false,
bg: 'success.emphasis',
+ sections: 1,
}
Playground.argTypes = {
@@ -37,4 +50,12 @@ Playground.argTypes = {
type: 'boolean',
},
},
+ sections: {
+ control: {
+ type: 'number',
+ min: 1,
+ max: 5,
+ step: 1,
+ },
+ },
}
diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx
index 409f8ff58dc..ac476810532 100644
--- a/packages/react/src/ProgressBar/ProgressBar.tsx
+++ b/packages/react/src/ProgressBar/ProgressBar.tsx
@@ -52,7 +52,7 @@ const ProgressContainer = styled.span`
background-color: ${get('colors.border.default')};
border-radius: ${get('radii.1')};
height: ${props => sizeMap[props.barSize || 'default']};
-
+ gap: 2px;
${width}
${sx};
`
diff --git a/packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap
index df65e057b10..b5110c8cbc4 100644
--- a/packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap
@@ -16,6 +16,7 @@ exports[`ProgressBar respects the "progress" prop 1`] = `
background-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
border-radius: 3px;
height: 8px;
+ gap: 2px;
}
@media (prefers-reduced-motion:no-preference) {