Skip to content

Commit d11d459

Browse files
fullofcaffeinetyxla
authored and
patil-vipul
committed
Components: Make the ProgressBar public (WordPress#61062)
* Remove "experimental" designation for `ProgressBar` * Add optional width prop to override/set the progress bar track container * Revert "Add optional width prop to override/set the progress bar track container" This reverts commit b1fe7cd. * Keep an unconstrained width by default, while allowing consumers to override it with CSS * Revert "Keep an unconstrained width by default, while allowing consumers to override it with CSS" This reverts commit 64c72e2. * Make the component public * Update consumers to import the public component * Expose docs for the now public ProgressBar component * Update CHANGELOG * Run docs:build after docs/manifest.js change * Remove remaining private usage of ProgressBar * Small formatting fix in the changelog * Add basic docs to the README * Add jsdoc * Formatting fix in README jsx block Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> * Another formatting fix in README jsx block Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> * YAFF (yet another formatting fix) in the README jsx Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> * Improve wording in descripton of the `value` prop in the README Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> * YAFF: Missing semicolon in README jsx Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> * YAFF: missing semicolon in jsx block in README Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> * YAFF: missing semicolon in jsx block in README Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> * YAFF: use tab instead of spaces in jsx code block in README Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> * Move export out of the HOC export section * Fix CHANGELOG: Move entry to the existing enhacements section * Spacing fix Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> * Sort import alphabetically * Simplify CHANGELOG entry Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> * Re-export as default for visual consistency * Improve jsdoc comment: make it fit within ~80chars of char lenght and fix comment opening --------- Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
1 parent 1e4ebc4 commit d11d459

File tree

13 files changed

+66
-21
lines changed

13 files changed

+66
-21
lines changed

‎docs/manifest.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1121,6 +1121,12 @@
11211121
"markdown_source": "../packages/components/src/popover/README.md",
11221122
"parent": "components"
11231123
},
1124+
{
1125+
"title": "ProgressBar",
1126+
"slug": "progress-bar",
1127+
"markdown_source": "../packages/components/src/progress-bar/README.md",
1128+
"parent": "components"
1129+
},
11241130
{
11251131
"title": "QueryControls",
11261132
"slug": "query-controls",

‎docs/tool/manifest.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ const componentPaths = glob( 'packages/components/src/*/**/README.md', {
1616
'packages/components/src/theme/README.md',
1717
'packages/components/src/view/README.md',
1818
'packages/components/src/dropdown-menu-v2/README.md',
19-
'packages/components/src/progress-bar/README.md',
2019
'packages/components/src/tabs/README.md',
2120
'packages/components/src/custom-select-control-v2/README.md',
2221
],

‎packages/components/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111

1212
- `Tabs`: Animate indicator ([#60560](https://github.com/WordPress/gutenberg/pull/60560)).
1313
- `ComboboxControl`: Introduce Combobox expandOnFocus prop ([#61705](https://github.com/WordPress/gutenberg/pull/61705)).
14+
- `ProgressBar`: Expose as public API ([#61062](https://github.com/WordPress/gutenberg/pull/61062)).
1415
- Replaced `ButtonGroup` with `ToggleGroupControl` component for "AM/PM" selector in DateTime component ([#61562](https://github.com/WordPress/gutenberg/pull/61562)).
1516

1617
### Bug Fixes

‎packages/components/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ export { default as PanelHeader } from './panel/header';
132132
export { default as PanelRow } from './panel/row';
133133
export { default as Placeholder } from './placeholder';
134134
export { default as Popover } from './popover';
135+
export { default as ProgressBar } from './progress-bar';
135136
export { default as QueryControls } from './query-controls';
136137
export { default as __experimentalRadio } from './radio-group/radio';
137138
export { default as __experimentalRadioGroup } from './radio-group';

‎packages/components/src/private-apis.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515
} from './composite/v2';
1616
import { default as CustomSelectControl } from './custom-select-control';
1717
import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
18-
import { default as ProgressBar } from './progress-bar';
1918
import { createPrivateSlotFill } from './slot-fill';
2019
import {
2120
DropdownMenu as DropdownMenuV2,
@@ -44,7 +43,6 @@ lock( privateApis, {
4443
__experimentalPopoverLegacyPositionToPlacement,
4544
createPrivateSlotFill,
4645
ComponentsContext,
47-
ProgressBar,
4846
Tabs,
4947
Theme,
5048
DropdownMenuV2,

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

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,42 @@
11
# ProgressBar
22

3-
<div class="callout callout-alert">
4-
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
5-
</div>
6-
73
A simple horizontal progress bar component.
84

95
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.
106

7+
## Usage
8+
9+
Basic usage:
10+
11+
```jsx
12+
import { ProgressBar } from '@wordpress/components';
13+
14+
const MyLoadingComponent = () => {
15+
return <ProgressBar />;
16+
};
17+
```
18+
19+
You can also make it determinate by passing a `value` (from 0 to 100) representing the progress:
20+
21+
```jsx
22+
import { ProgressBar } from '@wordpress/components';
23+
24+
const MyLoadingComponent = ( { progress } ) => {
25+
return <ProgressBar value={ progress } />;
26+
};
27+
```
28+
29+
You can customize its appearance by passing a custom CSS class name to `className`:
30+
31+
32+
```jsx
33+
import { ProgressBar } from '@wordpress/components';
34+
35+
const MyLoadingComponent = () => {
36+
return <ProgressBar className="my-custom-css-class" />;
37+
};
38+
```
39+
1140
### Props
1241

1342
The component accepts the following props:

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,21 @@ function UnforwardedProgressBar(
4444
);
4545
}
4646

47+
/**
48+
* A simple horizontal progress bar component.
49+
*
50+
* Supports two modes: determinate and indeterminate. A progress bar is determinate
51+
* when a specific progress value has been specified (from 0 to 100), and indeterminate
52+
* when a value hasn't been specified.
53+
*
54+
* ```jsx
55+
* import { ProgressBar } from '@wordpress/components';
56+
*
57+
* const MyLoadingComponent = () => {
58+
* return <ProgressBar />;
59+
* };
60+
* ```
61+
*/
4762
export const ProgressBar = forwardRef( UnforwardedProgressBar );
4863

4964
export default ProgressBar;

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,10 @@ import { ProgressBar } from '..';
1010

1111
const meta: Meta< typeof ProgressBar > = {
1212
component: ProgressBar,
13-
title: 'Components (Experimental)/ProgressBar',
13+
title: 'Components/ProgressBar',
1414
argTypes: {
1515
value: { control: { type: 'number', min: 0, max: 100, step: 1 } },
1616
},
17-
tags: [ 'status-private' ],
1817
parameters: {
1918
controls: {
2019
expanded: true,

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
* WordPress dependencies
33
*/
44
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
5-
import { privateApis as componentsPrivateApis } from '@wordpress/components';
5+
import {
6+
privateApis as componentsPrivateApis,
7+
ProgressBar,
8+
} from '@wordpress/components';
69
import { store as coreStore } from '@wordpress/core-data';
710
import { useSelect } from '@wordpress/data';
811

@@ -12,7 +15,7 @@ import { useSelect } from '@wordpress/data';
1215
import { unlock } from '../../lock-unlock';
1316
import { useStylesPreviewColors } from '../global-styles/hooks';
1417

15-
const { ProgressBar, Theme } = unlock( componentsPrivateApis );
18+
const { Theme } = unlock( componentsPrivateApis );
1619
const { useGlobalStyle } = unlock( blockEditorPrivateApis );
1720

1821
export default function CanvasLoader( { id } ) {

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {
2424
Button,
2525
DropdownMenu,
2626
SearchControl,
27-
privateApis as componentsPrivateApis,
27+
ProgressBar,
2828
} from '@wordpress/components';
2929
import { debounce } from '@wordpress/compose';
3030
import { sprintf, __, _x } from '@wordpress/i18n';
@@ -45,8 +45,6 @@ import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
4545
import { downloadFontFaceAssets } from './utils';
4646
import { sortFontFaces } from './utils/sort-font-faces';
4747
import CollectionFontVariant from './collection-font-variant';
48-
import { unlock } from '../../../lock-unlock';
49-
const { ProgressBar } = unlock( componentsPrivateApis );
5048

5149
const DEFAULT_CATEGORY = {
5250
slug: 'all',

0 commit comments

Comments
 (0)