From 6399dcbece60dcd0fda558769964c175ee7c3c3a Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Wed, 2 Jul 2025 09:33:40 -0400
Subject: [PATCH 1/4] Add more progress bar examples

---
 .../ProgressBar.examples.stories.tsx          | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 packages/react/src/ProgressBar/ProgressBar.examples.stories.tsx

diff --git a/packages/react/src/ProgressBar/ProgressBar.examples.stories.tsx b/packages/react/src/ProgressBar/ProgressBar.examples.stories.tsx
new file mode 100644
index 00000000000..11c8936b155
--- /dev/null
+++ b/packages/react/src/ProgressBar/ProgressBar.examples.stories.tsx
@@ -0,0 +1,57 @@
+import type {Meta} from '@storybook/react-vite'
+import {ProgressBar, Stack} from '..'
+import React, {useEffect} from 'react'
+import {announce} from '@primer/live-region-element'
+import {DotFillIcon} from '@primer/octicons-react'
+
+export default {
+  title: 'Components/ProgressBar/Examples',
+  component: ProgressBar,
+} as Meta<typeof ProgressBar>
+
+export const WithVisibleTextValue = () => {
+  return (
+    <>
+      <ProgressBar progress={50} aria-label="Loading example" />
+      <p style={{color: 'var(--fgColor-muted)', font: 'var(--text-body-shorthand-medium)'}}>50% completed</p>
+    </>
+  )
+}
+
+export const MultipleSegments = () => {
+  return (
+    <>
+      <ProgressBar aria-valuenow={50}>
+        <ProgressBar.Item
+          progress={30}
+          style={{backgroundColor: 'var(--bgColor-success-emphasis)'}}
+          aria-labelledby="done"
+        />
+        <ProgressBar.Item
+          progress={15}
+          style={{backgroundColor: 'var(--bgColor-accent-emphasis)'}}
+          aria-labelledby="in-progress"
+        />
+        <ProgressBar.Item
+          progress={5}
+          style={{backgroundColor: 'var(--bgColor-danger-emphasis)'}}
+          aria-labelledby="closed"
+        />
+      </ProgressBar>
+      <Stack direction="horizontal" wrap="wrap" marginTop={2}>
+        <Stack direction="horizontal" gap="condensed" align="center" id="done">
+          <DotFillIcon fill="var(--bgColor-success-emphasis)" />
+          Done
+        </Stack>
+        <Stack direction="horizontal" gap="condensed" align="center" id="in-progress">
+          <DotFillIcon fill="var(--bgColor-accent-emphasis)" />
+          In progress
+        </Stack>
+        <Stack direction="horizontal" gap="condensed" align="center" id="closed">
+          <DotFillIcon fill="var(--bgColor-danger-emphasis)" />
+          Closed
+        </Stack>
+      </Stack>
+    </>
+  )
+}

From 327663997a0720be8701ec27f7cdfaa62fd62dd4 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Wed, 2 Jul 2025 09:36:01 -0400
Subject: [PATCH 2/4] Remove unused imports

---
 packages/react/src/ProgressBar/ProgressBar.examples.stories.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react/src/ProgressBar/ProgressBar.examples.stories.tsx b/packages/react/src/ProgressBar/ProgressBar.examples.stories.tsx
index 11c8936b155..7c157c6d27d 100644
--- a/packages/react/src/ProgressBar/ProgressBar.examples.stories.tsx
+++ b/packages/react/src/ProgressBar/ProgressBar.examples.stories.tsx
@@ -1,7 +1,5 @@
 import type {Meta} from '@storybook/react-vite'
 import {ProgressBar, Stack} from '..'
-import React, {useEffect} from 'react'
-import {announce} from '@primer/live-region-element'
 import {DotFillIcon} from '@primer/octicons-react'
 
 export default {

From a92a8848ea5584e33d7e9ab658a4e5c11720bcf2 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Wed, 2 Jul 2025 16:19:22 -0400
Subject: [PATCH 3/4] Rely on `progress` prop instead

---
 packages/react/src/ProgressBar/ProgressBar.examples.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/ProgressBar/ProgressBar.examples.stories.tsx b/packages/react/src/ProgressBar/ProgressBar.examples.stories.tsx
index 7c157c6d27d..83ea763e1fc 100644
--- a/packages/react/src/ProgressBar/ProgressBar.examples.stories.tsx
+++ b/packages/react/src/ProgressBar/ProgressBar.examples.stories.tsx
@@ -19,7 +19,7 @@ export const WithVisibleTextValue = () => {
 export const MultipleSegments = () => {
   return (
     <>
-      <ProgressBar aria-valuenow={50}>
+      <ProgressBar progress={50}>
         <ProgressBar.Item
           progress={30}
           style={{backgroundColor: 'var(--bgColor-success-emphasis)'}}

From 3801ac6cdd39537ddd46e020707b11713e3bfebc Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Wed, 30 Jul 2025 15:01:27 -0400
Subject: [PATCH 4/4] Fix story

---
 packages/react/src/ProgressBar/ProgressBar.examples.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/ProgressBar/ProgressBar.examples.stories.tsx b/packages/react/src/ProgressBar/ProgressBar.examples.stories.tsx
index 83ea763e1fc..48046b903a0 100644
--- a/packages/react/src/ProgressBar/ProgressBar.examples.stories.tsx
+++ b/packages/react/src/ProgressBar/ProgressBar.examples.stories.tsx
@@ -19,7 +19,7 @@ export const WithVisibleTextValue = () => {
 export const MultipleSegments = () => {
   return (
     <>
-      <ProgressBar progress={50}>
+      <ProgressBar>
         <ProgressBar.Item
           progress={30}
           style={{backgroundColor: 'var(--bgColor-success-emphasis)'}}