Rely on parent element for width

packages/components/src/progress-bar/README.md

@@ -1,13 +1,28 @@
 # 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 progress bar with a certain width.
+
+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>`) with a specified width:
+
+```jsx
+import { useState } from 'react';
+import { Button, Popover } from '@wordpress/components';
+
+const MyProgressBar = ( props ) => {
+  return (
+		<div style={ { width: '160px' } }>
+			<ProgressBar { ...props } />
+		</div>
+	);
+};
+```
+
 ### Props
 
 The component accepts the following props:

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 = {
+	...meta.argTypes,
+	parentWidth: { control: { type: 'text' }, name: 'parent container width' },
+};
+
+ParentWidth.storyName = 'With Specific Width';
+ParentWidth.parameters = {
+	docs: {
+		description: {
+			story: 'This story demonstrates how the ProgressBar takes the width of its parent container. You can edit the parent container\'s width using the "Parent element width" control.',
+		},
+	},
+};

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(