Revert "Add optional width prop to override/set the progress bar trac…

…k container" This reverts commit b1fe7cd.
WordPress · May 22, 2024 · fe9129d · fe9129d
1 parent b1fe7cd
commit fe9129d
Show file tree

Hide file tree

Showing 7 changed files with 4 additions and 45 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,8 +2,6 @@
 
 ## 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, width, ...progressProps } = props;
+	const { className, value, ...progressProps } = props;
 	const isIndeterminate = ! Number.isFinite( value );
 
 	return (
-		<ProgressBarStyled.Track className={ className } width={ width }>
+		<ProgressBarStyled.Track className={ className }>
 			<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,7 +13,6 @@ 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: {
@@ -31,9 +30,3 @@ 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,12 +21,11 @@ const animateProgressBar = keyframes( {
 // Width of the indicator for the indeterminate progress bar
 export const INDETERMINATE_TRACK_WIDTH = 50;
 
-export const Track = styled.div< { width?: number } >`
+export const Track = styled.div`
 	position: relative;
 	overflow: hidden;
 	width: 100%;
-	max-width: ${ ( { width } ) =>
-		width ? width : CONFIG.progressBarWidth }px;
+	max-width: 160px;
 	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,7 +8,6 @@ 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', () => {
@@ -80,27 +79,4 @@ 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,12 +4,6 @@ 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,7 +47,6 @@ 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)',