From 31e5c004d35947e21c16566f023a811f49692018 Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Fri, 20 Sep 2024 09:52:53 +0200
Subject: [PATCH 1/2] add gap to progressbar with multiple sections

---
 .changeset/stale-pets-tan.md                  |  5 +++
 .../src/ProgressBar/ProgressBar.stories.tsx   | 31 ++++++++++++++++---
 .../react/src/ProgressBar/ProgressBar.tsx     |  2 +-
 3 files changed, 32 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/stale-pets-tan.md

diff --git a/.changeset/stale-pets-tan.md b/.changeset/stale-pets-tan.md
new file mode 100644
index 000000000000..8510d35a6368
--- /dev/null
+++ b/.changeset/stale-pets-tan.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+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 e566a3003c32..97cb0d2c4504 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 = () => <ProgressBar aria-label="Upload test.png" />
 
-export const Playground: StoryFn<typeof ProgressBar> = args => (
-  <ProgressBar {...args} sx={args.inline ? {width: '100px'} : {}} aria-label="Upload test.png" />
-)
+export const Playground = ({sections, ...args}: ProgressBarProps & {sections: number}) => {
+  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>
+    )
+  }
+}
 
 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 409f8ff58dc4..e793f720def6 100644
--- a/packages/react/src/ProgressBar/ProgressBar.tsx
+++ b/packages/react/src/ProgressBar/ProgressBar.tsx
@@ -52,7 +52,7 @@ const ProgressContainer = styled.span<StyledProgressContainerProps>`
   background-color: ${get('colors.border.default')};
   border-radius: ${get('radii.1')};
   height: ${props => sizeMap[props.barSize || 'default']};
-
+  gap: '2px';
   ${width}
   ${sx};
 `

From 8d916c63f7e0a69a1c8e69e9715ae2b8f378b9f4 Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Fri, 20 Sep 2024 14:17:52 +0200
Subject: [PATCH 2/2] update etst

---
 .../react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap
index df65e057b108..a2f25efa2d96 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) {