From 6d66847392a01b9141a2de21b4dd725d5cf77a4d Mon Sep 17 00:00:00 2001
From: Marcelo Serpa <boss@fullofcaffeine.com>
Date: Wed, 22 May 2024 17:05:10 -0600
Subject: [PATCH] Rely on parent element for width

---
 .../components/src/progress-bar/README.md     | 22 ++++++++++---
 .../src/progress-bar/stories/index.story.tsx  | 33 +++++++++++++++++--
 .../components/src/progress-bar/styles.ts     |  1 -
 3 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/progress-bar/README.md b/packages/components/src/progress-bar/README.md
index ad69ab54b098a..8be4509f828c9 100644
--- a/packages/components/src/progress-bar/README.md
+++ b/packages/components/src/progress-bar/README.md
@@ -1,13 +1,27 @@
 # ProgressBar
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 A simple horizontal progress bar component.
 
 Supports two modes: determinate and indeterminate. A progress bar is determinate when a specific progress value has been specified (from 0 to 100), and indeterminate when a value hasn't been specified.
 
+## Usage
+
+Render a ProgressBar.
+
+The ProgressBar will expand to take all the available horizontal space of its immediate parent container element. To control its width, just wrap it in a container element (e.g `<div>`) that has a `width` specified:
+
+```jsx
+import { ProgressBar } from '@wordpress/components';
+
+const MyProgressBar = ( props ) => {
+  return (
+		<div style={ { width: '160px' } }>
+			<ProgressBar { ...props } />
+		</div>
+	);
+};
+```
+
 ### Props
 
 The component accepts the following props:
diff --git a/packages/components/src/progress-bar/stories/index.story.tsx b/packages/components/src/progress-bar/stories/index.story.tsx
index 944da75339f07..a40f09e091839 100644
--- a/packages/components/src/progress-bar/stories/index.story.tsx
+++ b/packages/components/src/progress-bar/stories/index.story.tsx
@@ -24,9 +24,36 @@ const meta: Meta< typeof ProgressBar > = {
 };
 export default meta;
 
-const Template: StoryFn< typeof ProgressBar > = ( { ...args } ) => {
-	return <ProgressBar { ...args } />;
-};
+const Template: StoryFn< typeof ProgressBar > = ( { ...args } ) => (
+	<ProgressBar { ...args } />
+);
 
 export const Default: StoryFn< typeof ProgressBar > = Template.bind( {} );
 Default.args = {};
+
+export const ParentWidth: StoryFn< { parentWidth: string } > = ( {
+	parentWidth,
+	...args
+} ) => (
+	<div style={ { width: parentWidth } }>
+		<ProgressBar { ...args } />
+	</div>
+);
+
+ParentWidth.args = {
+	parentWidth: '300px', // Default width
+};
+
+ParentWidth.argTypes = {
+	parentWidth: { control: { type: 'text' }, name: 'parent width' },
+};
+
+ParentWidth.storyName = 'With Specific Width';
+ParentWidth.parameters = {
+	controls: { sort: 'none' },
+	docs: {
+		description: {
+			story: 'This story demonstrates how the ProgressBar takes the width of its parent container. You can edit the parent\'s width using the "Parent element width" control.',
+		},
+	},
+};
diff --git a/packages/components/src/progress-bar/styles.ts b/packages/components/src/progress-bar/styles.ts
index f04002f458c0a..29c251c97fb6d 100644
--- a/packages/components/src/progress-bar/styles.ts
+++ b/packages/components/src/progress-bar/styles.ts
@@ -25,7 +25,6 @@ export const Track = styled.div`
 	position: relative;
 	overflow: hidden;
 	width: 100%;
-	max-width: 160px;
 	height: ${ CONFIG.borderWidthFocus };
 	/* Text color at 10% opacity */
 	background-color: color-mix(