From 023e5c4d92fe27820e4d2002432d440d4b5fa223 Mon Sep 17 00:00:00 2001 From: Marcelo Serpa Date: Thu, 18 Apr 2024 18:39:13 -0600 Subject: [PATCH 01/29] Remove "experimental" designation for `ProgressBar` --- packages/components/src/progress-bar/stories/index.story.tsx | 2 +- storybook/manager-head.html | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/progress-bar/stories/index.story.tsx b/packages/components/src/progress-bar/stories/index.story.tsx index d09111cf32f044..944da75339f071 100644 --- a/packages/components/src/progress-bar/stories/index.story.tsx +++ b/packages/components/src/progress-bar/stories/index.story.tsx @@ -10,7 +10,7 @@ import { ProgressBar } from '..'; const meta: Meta< typeof ProgressBar > = { component: ProgressBar, - title: 'Components (Experimental)/ProgressBar', + title: 'Components/ProgressBar', argTypes: { value: { control: { type: 'number', min: 0, max: 100, step: 1 } }, }, diff --git a/storybook/manager-head.html b/storybook/manager-head.html index 08df7dfdb72575..ab9c1a71010718 100644 --- a/storybook/manager-head.html +++ b/storybook/manager-head.html @@ -4,6 +4,7 @@ 'navigation', 'customselectcontrol-v2', 'theme', + 'progressbar', ]; const REDIRECTS = [ { From b1fe7cdf9e1739c8a17cb65dc571841eaa4bbf2c Mon Sep 17 00:00:00 2001 From: Marcelo Serpa Date: Wed, 24 Apr 2024 18:40:04 -0600 Subject: [PATCH 02/29] Add optional width prop to override/set the progress bar track container --- 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, 45 insertions(+), 4 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 7ada9626797d45..9ba6ee0f94247b 100644 --- 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 index ed13c036e99162..cbe66e65dc6b85 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, ...progressProps } = props; + const { className, value, width, ...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: { @@ -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 index f04002f458c0aa..7335284a530e2f 100644 --- 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 index c3984318cc618a..a9d2417acbc767 100644 --- 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( ); + + // 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 9beb28317e58aa..59d2f8f1b61781 100644 --- 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 index 2e102b8b0b77cc..69548a87aafadb 100644 --- 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)', From fe9129df2ccddcc9831046f3d1a76865a078de5d Mon Sep 17 00:00:00 2001 From: Marcelo Serpa Date: Wed, 22 May 2024 16:26:40 -0600 Subject: [PATCH 03/29] 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 9ba6ee0f94247b..7ada9626797d45 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 cbe66e65dc6b85..ed13c036e99162 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 7335284a530e2f..f04002f458c0aa 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 a9d2417acbc767..c3984318cc618a 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 59d2f8f1b61781..9beb28317e58aa 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 69548a87aafadb..2e102b8b0b77cc 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)', From 64c72e2fe0ad5fb008b0c5706b6ac09314eccdab Mon Sep 17 00:00:00 2001 From: Marcelo Serpa Date: Wed, 22 May 2024 17:05:10 -0600 Subject: [PATCH 04/29] Keep an unconstrained width by default, while allowing consumers to override it with CSS --- .../components/src/progress-bar/README.md | 46 ++++++++++++++++-- .../components/src/progress-bar/index.tsx | 47 +++++++++++++++++++ .../src/progress-bar/stories/index.story.tsx | 32 +++++++++++-- .../components/src/progress-bar/styles.ts | 1 - .../src/components/canvas-loader/index.js | 7 ++- .../src/components/canvas-loader/style.scss | 4 ++ .../font-library-modal/font-collection.js | 2 +- .../font-library-modal/installed-fonts.js | 6 ++- .../font-library-modal/style.scss | 4 ++ .../font-library-modal/upload-fonts.js | 2 +- 10 files changed, 138 insertions(+), 13 deletions(-) diff --git a/packages/components/src/progress-bar/README.md b/packages/components/src/progress-bar/README.md index ad69ab54b098af..017d5bffe0ae9e 100644 --- a/packages/components/src/progress-bar/README.md +++ b/packages/components/src/progress-bar/README.md @@ -1,13 +1,51 @@ # ProgressBar -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- 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 + +```jsx +import { ProgressBar } from '@wordpress/components'; + +const MyLoadingComponent = () => { + return +} +``` + +The ProgressBar will expand to take all the available horizontal space of its immediate parent container element. To control its width, you can: + +Pass a custom CSS `className` that takes care of setting the `width`: + +```css +.my-css-class { + width: 160px; +} +``` + +```jsx +import { ProgressBar } from '@wordpress/components'; + +const MyLoadingComponent = () => { + return ; +}; +``` + +Wrap it in a container element (e.g `
`) that has a `width` specified: + +```jsx +import { ProgressBar } from '@wordpress/components'; + +const MyLoadingComponent = ( props ) => { + return ( +
+ +
+ ); +}; +``` + ### Props The component accepts the following props: diff --git a/packages/components/src/progress-bar/index.tsx b/packages/components/src/progress-bar/index.tsx index ed13c036e99162..523d521315a5df 100644 --- a/packages/components/src/progress-bar/index.tsx +++ b/packages/components/src/progress-bar/index.tsx @@ -46,6 +46,53 @@ function UnforwardedProgressBar( ); } +/** + * 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 + * + * ```jsx + * import { ProgressBar } from '@wordpress/components'; + * + * const MyLoadingComponent = () => { + * return + * } + * ``` + * + * The ProgressBar will expand to take all the available horizontal space of its immediate parent container element. To control its width, you can: + * + * Pass a custom CSS `className` that takes care of setting the `width`: + * + * ```css + * .my-css-class { + * width: 160px; + * } + * ``` + * + * ```jsx + * import { ProgressBar } from '@wordpress/components'; + * + * const MyLoadingComponent = () => { + * return ; + * }; + * ``` + * + * Wrap it in a container element (e.g `
`) that has a `width` specified: + * + * ```jsx + * import { ProgressBar } from '@wordpress/components'; + * + * const MyLoadingComponent = ( props ) => { + * return ( + *
+ * + *
+ * ); + * }; + * ``` + */ export const ProgressBar = forwardRef( UnforwardedProgressBar ); export default ProgressBar; diff --git a/packages/components/src/progress-bar/stories/index.story.tsx b/packages/components/src/progress-bar/stories/index.story.tsx index 944da75339f071..7e4e66ce522771 100644 --- a/packages/components/src/progress-bar/stories/index.story.tsx +++ b/packages/components/src/progress-bar/stories/index.story.tsx @@ -24,9 +24,35 @@ const meta: Meta< typeof ProgressBar > = { }; export default meta; -const Template: StoryFn< typeof ProgressBar > = ( { ...args } ) => { - return ; -}; +const Template: StoryFn< typeof ProgressBar > = ( { ...args } ) => ( + +); export const Default: StoryFn< typeof ProgressBar > = Template.bind( {} ); Default.args = {}; + +export const WithDefaultSuggestedWidth: StoryFn = ( { + className, + ...args +} ) => ( + <> + + + +); +WithDefaultSuggestedWidth.args = { + className: 'progressbar-story-custom-width', +}; +WithDefaultSuggestedWidth.parameters = { + docs: { + description: { + story: 'For most screens with a wide-enough viewport, we recommend a maximum width of 160px. You can set a custom width by passing a CSS class via the `className` prop (depicted below) or by setting the width of the parent container.', + }, + }, +}; diff --git a/packages/components/src/progress-bar/styles.ts b/packages/components/src/progress-bar/styles.ts index f04002f458c0aa..29c251c97fb6d9 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( diff --git a/packages/edit-site/src/components/canvas-loader/index.js b/packages/edit-site/src/components/canvas-loader/index.js index 99d83c3ad69b3b..f34801a3bee2bb 100644 --- a/packages/edit-site/src/components/canvas-loader/index.js +++ b/packages/edit-site/src/components/canvas-loader/index.js @@ -34,7 +34,12 @@ export default function CanvasLoader( { id } ) { return (
- +
); diff --git a/packages/edit-site/src/components/canvas-loader/style.scss b/packages/edit-site/src/components/canvas-loader/style.scss index 3d74d408aeceda..3b9f091b1ca512 100644 --- a/packages/edit-site/src/components/canvas-loader/style.scss +++ b/packages/edit-site/src/components/canvas-loader/style.scss @@ -16,6 +16,10 @@ & > div { width: 160px; } + + & > .edit-site-canvas-loader__progressbar { + width: 160px; + } } @keyframes edit-site-canvas-loader__fade-in-animation { diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js index 7d89a92cb44bac..98b07a324c1b12 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js @@ -266,7 +266,7 @@ function FontCollection( { slug } ) {
{ isLoading && (
- +
) } diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js index cdc81aa09b7373..b13072c1e57734 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js @@ -114,7 +114,7 @@ function InstalledFonts() {
{ isResolvingLibrary && (
- +
) } @@ -283,7 +283,9 @@ function InstalledFonts() { justify="flex-end" className="font-library-modal__tabpanel-layout__footer" > - { isInstalling && } + { isInstalling && ( + + ) } { shouldDisplayDeleteButton && (