Skip to content

Commit 64c72e2

Browse files
fullofcaffeinefullofcaffeine
committed
Keep an unconstrained width by default, while allowing consumers to override it with CSS
1 parent fe9129d commit 64c72e2

File tree

10 files changed

+138
-13
lines changed

10 files changed

+138
-13
lines changed

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

Lines changed: 42 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,51 @@
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+
```jsx
10+
import { ProgressBar } from '@wordpress/components';
11+
12+
const MyLoadingComponent = () => {
13+
return <ProgressBar />
14+
}
15+
```
16+
17+
The ProgressBar will expand to take all the available horizontal space of its immediate parent container element. To control its width, you can:
18+
19+
Pass a custom CSS `className` that takes care of setting the `width`:
20+
21+
```css
22+
.my-css-class {
23+
width: 160px;
24+
}
25+
```
26+
27+
```jsx
28+
import { ProgressBar } from '@wordpress/components';
29+
30+
const MyLoadingComponent = () => {
31+
return <ProgressBar className="my-css-class" />;
32+
};
33+
```
34+
35+
Wrap it in a container element (e.g `<div>`) that has a `width` specified:
36+
37+
```jsx
38+
import { ProgressBar } from '@wordpress/components';
39+
40+
const MyLoadingComponent = ( props ) => {
41+
return (
42+
<div style={ { width: '160px' } }>
43+
<ProgressBar />
44+
</div>
45+
);
46+
};
47+
```
48+
1149
### Props
1250

1351
The component accepts the following props:

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,53 @@ function UnforwardedProgressBar(
4646
);
4747
}
4848

49+
/**
50+
* A simple horizontal progress bar component.
51+
*
52+
* 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.
53+
*
54+
* ## Usage
55+
*
56+
* ```jsx
57+
* import { ProgressBar } from '@wordpress/components';
58+
*
59+
* const MyLoadingComponent = () => {
60+
* return <ProgressBar />
61+
* }
62+
* ```
63+
*
64+
* The ProgressBar will expand to take all the available horizontal space of its immediate parent container element. To control its width, you can:
65+
*
66+
* Pass a custom CSS `className` that takes care of setting the `width`:
67+
*
68+
* ```css
69+
* .my-css-class {
70+
* width: 160px;
71+
* }
72+
* ```
73+
*
74+
* ```jsx
75+
* import { ProgressBar } from '@wordpress/components';
76+
*
77+
* const MyLoadingComponent = () => {
78+
* return <ProgressBar className="my-css-class" />;
79+
* };
80+
* ```
81+
*
82+
* Wrap it in a container element (e.g `<div>`) that has a `width` specified:
83+
*
84+
* ```jsx
85+
* import { ProgressBar } from '@wordpress/components';
86+
*
87+
* const MyLoadingComponent = ( props ) => {
88+
* return (
89+
* <div style={ { width: '160px' } }>
90+
* <ProgressBar />
91+
* </div>
92+
* );
93+
* };
94+
* ```
95+
*/
4996
export const ProgressBar = forwardRef( UnforwardedProgressBar );
5097

5198
export default ProgressBar;

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

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,35 @@ const meta: Meta< typeof ProgressBar > = {
2424
};
2525
export default meta;
2626

27-
const Template: StoryFn< typeof ProgressBar > = ( { ...args } ) => {
28-
return <ProgressBar { ...args } />;
29-
};
27+
const Template: StoryFn< typeof ProgressBar > = ( { ...args } ) => (
28+
<ProgressBar { ...args } />
29+
);
3030

3131
export const Default: StoryFn< typeof ProgressBar > = Template.bind( {} );
3232
Default.args = {};
33+
34+
export const WithDefaultSuggestedWidth: StoryFn = ( {
35+
className,
36+
...args
37+
} ) => (
38+
<>
39+
<style>
40+
{ `
41+
.progressbar-story-custom-width {
42+
width: 160px;
43+
}
44+
` }
45+
</style>
46+
<ProgressBar { ...args } className={ className } />
47+
</>
48+
);
49+
WithDefaultSuggestedWidth.args = {
50+
className: 'progressbar-story-custom-width',
51+
};
52+
WithDefaultSuggestedWidth.parameters = {
53+
docs: {
54+
description: {
55+
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.',
56+
},
57+
},
58+
};

‎packages/components/src/progress-bar/styles.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ export const Track = styled.div`
2525
position: relative;
2626
overflow: hidden;
2727
width: 100%;
28-
max-width: 160px;
2928
height: ${ CONFIG.borderWidthFocus };
3029
/* Text color at 10% opacity */
3130
background-color: color-mix(

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,12 @@ export default function CanvasLoader( { id } ) {
3434
return (
3535
<div className="edit-site-canvas-loader">
3636
<Theme accent={ indicatorColor } background={ backgroundColor }>
37-
<ProgressBar id={ id } max={ total } value={ elapsed } />
37+
<ProgressBar
38+
id={ id }
39+
max={ total }
40+
value={ elapsed }
41+
className="edit-site-canvas-loader__progressbar"
42+
/>
3843
</Theme>
3944
</div>
4045
);

‎packages/edit-site/src/components/canvas-loader/style.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@
1616
& > div {
1717
width: 160px;
1818
}
19+
20+
& > .edit-site-canvas-loader__progressbar {
21+
width: 160px;
22+
}
1923
}
2024

2125
@keyframes edit-site-canvas-loader__fade-in-animation {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@ function FontCollection( { slug } ) {
266266
<div className="font-library-modal__tabpanel-layout">
267267
{ isLoading && (
268268
<div className="font-library-modal__loading">
269-
<ProgressBar />
269+
<ProgressBar className="font-library-modal__progressbar" />
270270
</div>
271271
) }
272272

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ function InstalledFonts() {
114114
<div className="font-library-modal__tabpanel-layout">
115115
{ isResolvingLibrary && (
116116
<div className="font-library-modal__loading">
117-
<ProgressBar />
117+
<ProgressBar className="font-library-modal__progressbar" />
118118
</div>
119119
) }
120120

@@ -283,7 +283,9 @@ function InstalledFonts() {
283283
justify="flex-end"
284284
className="font-library-modal__tabpanel-layout__footer"
285285
>
286-
{ isInstalling && <ProgressBar /> }
286+
{ isInstalling && (
287+
<ProgressBar className="font-library-modal__progressbar" />
288+
) }
287289
{ shouldDisplayDeleteButton && (
288290
<Button
289291
isDestructive

‎packages/edit-site/src/components/global-styles/font-library-modal/style.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,10 @@ $footer-height: 70px;
4848
// Push down so that the progress bar is centered vertically.
4949
// It should be 120px (72px modal header height + 48px tab height)
5050
padding-top: $header-height + $grid-unit-15 + $grid-unit-60;
51+
52+
& > .font-library-modal__progressbar {
53+
width: 160px;
54+
}
5155
}
5256

5357
.font-library-modal__tabpanel-layout__footer {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,7 @@ function UploadFonts() {
220220
{ isUploading && (
221221
<FlexItem>
222222
<div className="font-library-modal__upload-area">
223-
<ProgressBar />
223+
<ProgressBar className="font-library-modal__progressbar" />
224224
</div>
225225
</FlexItem>
226226
) }

0 commit comments

Comments
 (0)