From fe9129df2ccddcc9831046f3d1a76865a078de5d Mon Sep 17 00:00:00 2001 From: Marcelo Serpa Date: Wed, 22 May 2024 16:26:40 -0600 Subject: [PATCH] Revert "Add optional width prop to override/set the progress bar track container" This reverts commit b1fe7cdf9e1739c8a17cb65dc571841eaa4bbf2c. --- packages/components/CHANGELOG.md | 2 -- .../components/src/progress-bar/index.tsx | 4 ++-- .../src/progress-bar/stories/index.story.tsx | 7 ------ .../components/src/progress-bar/styles.ts | 5 ++-- .../src/progress-bar/test/index.tsx | 24 ------------------- packages/components/src/progress-bar/types.ts | 6 ----- .../components/src/utils/config-values.js | 1 - 7 files changed, 4 insertions(+), 45 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 9ba6ee0f94247..7ada9626797d4 100644 --- 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 index cbe66e65dc6b8..ed13c036e9916 100644 --- 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 ( - + = { 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 index 7335284a530e2..f04002f458c0a 100644 --- 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 index a9d2417acbc76..c3984318cc618 100644 --- 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( ); - - // 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( ); - - // 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 index 59d2f8f1b6178..9beb28317e58a 100644 --- 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 index 69548a87aafad..2e102b8b0b77c 100644 --- 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)',