Add optional width prop to override/set the progress bar track container

patil-vipul · May 22, 2024 · b1fe7cd · b1fe7cd
1 parent 023e5c4
commit b1fe7cd
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 4 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- `ProgressBar`: Remove "experimental" designation for `ProgressBar`, add optional custom `width` prop ([#61062](https://github.com/WordPress/gutenberg/pull/61062)).
+
 ### Enhancements
 
 -   `ComboboxControl`: Introduce Combobox expandOnFocus prop ([#61705](https://github.com/WordPress/gutenberg/pull/61705)).

diff --git a/packages/components/src/progress-bar/index.tsx b/packages/components/src/progress-bar/index.tsx
@@ -20,11 +20,11 @@ function UnforwardedProgressBar(
 	props: WordPressComponentProps< ProgressBarProps, 'progress', false >,
 	ref: ForwardedRef< HTMLProgressElement >
 ) {
-	const { className, value, ...progressProps } = props;
+	const { className, value, width, ...progressProps } = props;
 	const isIndeterminate = ! Number.isFinite( value );
 
 	return (
-		<ProgressBarStyled.Track className={ className }>
+		<ProgressBarStyled.Track className={ className } width={ width }>
 			<ProgressBarStyled.Indicator
 				style={
 					{

diff --git a/packages/components/src/progress-bar/stories/index.story.tsx b/packages/components/src/progress-bar/stories/index.story.tsx
@@ -13,6 +13,7 @@ const meta: Meta< typeof ProgressBar > = {
 	title: 'Components/ProgressBar',
 	argTypes: {
 		value: { control: { type: 'number', min: 0, max: 100, step: 1 } },
+		width: { control: { type: 'number', min: 0, step: 10 } },
 	},
 	tags: [ 'status-private' ],
 	parameters: {
@@ -30,3 +31,9 @@ const Template: StoryFn< typeof ProgressBar > = ( { ...args } ) => {
 
 export const Default: StoryFn< typeof ProgressBar > = Template.bind( {} );
 Default.args = {};
+
+// The ProgressBar width can be overriden (in pixels) and it will expand to that size if
+// the parent has enough horizontal space. It is interpolated into the `width` property
+// of the `Track` component using the `px` unit.
+export const CustomWidth: StoryFn< typeof ProgressBar > = Template.bind( {} );
+CustomWidth.args = { width: 400 };
diff --git a/packages/components/src/progress-bar/styles.ts b/packages/components/src/progress-bar/styles.ts
@@ -21,11 +21,12 @@ const animateProgressBar = keyframes( {
 // Width of the indicator for the indeterminate progress bar
 export const INDETERMINATE_TRACK_WIDTH = 50;
 
-export const Track = styled.div`
+export const Track = styled.div< { width?: number } >`
 	position: relative;
 	overflow: hidden;
 	width: 100%;
-	max-width: 160px;
+	max-width: ${ ( { width } ) =>
+		width ? width : CONFIG.progressBarWidth }px;
 	height: ${ CONFIG.borderWidthFocus };
 	/* Text color at 10% opacity */
 	background-color: color-mix(

diff --git a/packages/components/src/progress-bar/test/index.tsx b/packages/components/src/progress-bar/test/index.tsx
@@ -8,6 +8,7 @@ import { render, screen } from '@testing-library/react';
  */
 import { ProgressBar } from '..';
 import { INDETERMINATE_TRACK_WIDTH } from '../styles';
+import { CONFIG } from '../../utils';
 
 describe( 'ProgressBar', () => {
 	it( 'should render an indeterminate semantic progress bar element', () => {
@@ -79,4 +80,27 @@ describe( 'ProgressBar', () => {
 		);
 		expect( screen.getByRole( 'progressbar' ) ).toHaveStyle( style );
 	} );
+
+	it( 'should use default width if width for the track if the `width` prop is not passed', () => {
+		const { container } = render( <ProgressBar /> );
+
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+		const track = container.firstChild;
+
+		expect( track ).toHaveStyle( {
+			'max-width': `${ CONFIG.progressBarWidth }px`,
+		} );
+	} );
+
+	it( 'should apply custom width to tthe track if the `width` prop is passed', () => {
+		const customWidth = 400;
+		const { container } = render( <ProgressBar width={ customWidth } /> );
+
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+		const track = container.firstChild;
+
+		expect( track ).toHaveStyle( {
+			'max-width': `${ customWidth }px`,
+		} );
+	} );
 } );
diff --git a/packages/components/src/progress-bar/types.ts b/packages/components/src/progress-bar/types.ts
@@ -4,6 +4,12 @@ export type ProgressBarProps = {
 	 */
 	value?: number;
 
+	/**
+	 * An optional width of the progress bar (in pixels) for the progress bar
+	 * (track) element.
+	 */
+	width?: number;
+
 	/**
 	 * A CSS class to apply to the progress bar wrapper (track) element.
 	 */

diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
@@ -47,6 +47,7 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
 	borderWidthFocus: '1.5px',
 	borderWidthTab: '4px',
 	spinnerSize: 16,
+	progressBarWidth: 160,
 	fontSize: '13px',
 	fontSizeH1: 'calc(2.44 * 13px)',
 	fontSizeH2: 'calc(1.95 * 13px)',