Components: Make the ProgressBar public

docs/manifest.json

@@ -1121,6 +1121,12 @@
 		"markdown_source": "../packages/components/src/popover/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "ProgressBar",
+		"slug": "progress-bar",
+		"markdown_source": "../packages/components/src/progress-bar/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "QueryControls",
 		"slug": "query-controls",

docs/tool/manifest.js

@@ -16,7 +16,6 @@ const componentPaths = glob( 'packages/components/src/*/**/README.md', {
 		'packages/components/src/theme/README.md',
 		'packages/components/src/view/README.md',
 		'packages/components/src/dropdown-menu-v2/README.md',
-		'packages/components/src/progress-bar/README.md',
 		'packages/components/src/tabs/README.md',
 		'packages/components/src/custom-select-control-v2/README.md',
 	],

packages/components/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+### Enhancements
+
+- Components: Make the `ProgressBar` public ([#61062](https://github.com/WordPress/gutenberg/pull/61062)).
 ### Breaking Changes
 
 -   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).

packages/components/src/index.ts

@@ -217,6 +217,7 @@ export {
 } from './higher-order/with-focus-return';
 export { default as withNotices } from './higher-order/with-notices';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
+export { ProgressBar } from './progress-bar';
 
 // Private APIs.
 export { privateApis } from './private-apis';

packages/components/src/private-apis.ts

@@ -15,7 +15,6 @@ import {
 } from './composite/v2';
 import { default as CustomSelectControl } from './custom-select-control';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
-import { default as ProgressBar } from './progress-bar';
 import { createPrivateSlotFill } from './slot-fill';
 import {
 	DropdownMenu as DropdownMenuV2,
@@ -44,7 +43,6 @@ lock( privateApis, {
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,
 	ComponentsContext,
-	ProgressBar,
 	Tabs,
 	Theme,
 	DropdownMenuV2,

packages/components/src/progress-bar/README.md

@@ -1,13 +1,42 @@
 # ProgressBar
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 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
+
+Basic usage:
+
+```jsx
+import { ProgressBar } from '@wordpress/components';
+
+const MyLoadingComponent = () => {
+  return <ProgressBar />
+}
+```
+
+You can also make it controlled by passing a `value` (from 0 to 100) representing the progress:
+
+```jsx
+import { ProgressBar } from '@wordpress/components';
+
+const MyLoadingComponent = ( { progress } ) => {
+  return <ProgressBar value={ progress } />
+}
+```
+
+You can customize its appearance by passing a custom CSS class name to `className`:
+
+
+```jsx
+import { ProgressBar } from '@wordpress/components';
+
+const MyLoadingComponent = () => {
+  return <ProgressBar className='my-custom-css-class' />
+}
+```
+
 ### Props
 
 The component accepts the following props:

packages/components/src/progress-bar/index.tsx

@@ -44,6 +44,18 @@ 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.
+ *
+ * ```jsx
+ * import { ProgressBar } from '@wordpress/components';
+ *
+ * const MyLoadingComponent = () => {
+ *  return <ProgressBar />
+ * }
+ * ```
+ */
 export const ProgressBar = forwardRef( UnforwardedProgressBar );
 
 export default ProgressBar;

packages/components/src/progress-bar/stories/index.story.tsx

@@ -10,11 +10,10 @@ 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 } },
 	},
-	tags: [ 'status-private' ],
 	parameters: {
 		controls: {
 			expanded: true,

packages/edit-site/src/components/canvas-loader/index.js

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import {
+	privateApis as componentsPrivateApis,
+	ProgressBar,
+} from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
@@ -12,7 +15,7 @@ import { useSelect } from '@wordpress/data';
 import { unlock } from '../../lock-unlock';
 import { useStylesPreviewColors } from '../global-styles/hooks';
 
-const { ProgressBar, Theme } = unlock( componentsPrivateApis );
+const { Theme } = unlock( componentsPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 export default function CanvasLoader( { id } ) {

packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js

@@ -24,7 +24,7 @@ import {
 	Button,
 	DropdownMenu,
 	SearchControl,
-	privateApis as componentsPrivateApis,
+	ProgressBar,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x } from '@wordpress/i18n';
@@ -45,8 +45,6 @@ import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
 import { downloadFontFaceAssets } from './utils';
 import { sortFontFaces } from './utils/sort-font-faces';
 import CollectionFontVariant from './collection-font-variant';
-import { unlock } from '../../../lock-unlock';
-const { ProgressBar } = unlock( componentsPrivateApis );
 
 const DEFAULT_CATEGORY = {
 	slug: 'all',

packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -15,7 +15,7 @@ import {
 	__experimentalVStack as VStack,
 	Flex,
 	Notice,
-	privateApis as componentsPrivateApis,
+	ProgressBar,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
@@ -26,12 +26,10 @@ import { chevronLeft } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../../lock-unlock';
 import { FontLibraryContext } from './context';
 import FontCard from './font-card';
 import LibraryFontVariant from './library-font-variant';
 import { sortFontFaces } from './utils/sort-font-faces';
-const { ProgressBar } = unlock( componentsPrivateApis );
 
 function InstalledFonts() {
 	const {

packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js

@@ -11,7 +11,7 @@ import {
 	Notice,
 	FormFileUpload,
 	FlexItem,
-	privateApis as componentsPrivateApis,
+	ProgressBar,
 } from '@wordpress/components';
 import { useContext, useState } from '@wordpress/element';
 
@@ -23,9 +23,6 @@ import { FontLibraryContext } from './context';
 import { Font } from '../../../../lib/lib-font.browser';
 import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
-import { unlock } from '../../../lock-unlock';
-
-const { ProgressBar } = unlock( componentsPrivateApis );
 
 function UploadFonts() {
 	const { installFonts, notice, setNotice } =

storybook/manager-head.html

@@ -4,6 +4,7 @@
 			'navigation',
 			'customselectcontrol-v2',
 			'theme',
+			'progressbar',
 		];
 		const REDIRECTS = [
 			{