-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 ed13c036e9916..523d521315a5d 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 944da75339f07..7e4e66ce52277 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 f04002f458c0a..29c251c97fb6d 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 99d83c3ad69b3..f34801a3bee2b 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 (