ProgressBar: Simplify default width implementation and make it mo…

…re easily overridable (WordPress#61976) * 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 * Allow `ProgressBar` to have unconstrained width, which is disabled by default It has a default `max-width` of 160px, but allows consumers to explicitely disable it so that it expands to fit the parent's width by default. Consumers can then optionally set another width the way they see fit via a custom `className`. * Revert "Allow `ProgressBar` to have unconstrained width, which is disabled by default" This reverts commit 7a00da3. * Update docs and add story to illustrate a custom width * Update CHANGELOG * Simplify description in the story Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> * Improve jsdoc in story, do not encourage more customization than needed * Inherit the second story from the main template --------- Co-authored-by: fullofcaffeine <fullofcaffeine@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>
patil-vipul · Jun 17, 2024 · 92305bc · 92305bc
1 parent d11d459
commit 92305bc
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 5 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -12,6 +12,7 @@
 -   `Tabs`: Animate indicator ([#60560](https://github.com/WordPress/gutenberg/pull/60560)).
 -   `ComboboxControl`: Introduce Combobox expandOnFocus prop ([#61705](https://github.com/WordPress/gutenberg/pull/61705)).
 -   `ProgressBar`: Expose as public API ([#61062](https://github.com/WordPress/gutenberg/pull/61062)).
+-   `ProgressBar`: Simplify default width implementation and make it more easily overridable ([#61976](https://github.com/WordPress/gutenberg/pull/61976)).
 -    Replaced `ButtonGroup` with `ToggleGroupControl` component for "AM/PM" selector in DateTime component ([#61562](https://github.com/WordPress/gutenberg/pull/61562)).
 
 ### Bug Fixes

diff --git a/packages/components/src/progress-bar/README.md b/packages/components/src/progress-bar/README.md
@@ -26,14 +26,19 @@ const MyLoadingComponent = ( { progress } ) => {
 };
 ```
 
-You can customize its appearance by passing a custom CSS class name to `className`:
+You can customize its appearance by passing a custom CSS class name to `className`.
 
+```css
+.my-custom-progress-bar {
+	width: 100%;
+}
+```
 
 ```jsx
 import { ProgressBar } from '@wordpress/components';
 
 const MyLoadingComponent = () => {
-	return <ProgressBar className="my-custom-css-class" />;
+	return <ProgressBar className="my-custom-progress-bar" />;
 };
 ```
 
@@ -52,7 +57,7 @@ If a `value` is not specified, the progress bar will be considered indeterminate
 
 A CSS class to apply to the underlying `div` element, serving as a progress bar track.
 
-- Required: No
+-   Required: No
 
 #### Inherited props
 

diff --git a/packages/components/src/progress-bar/stories/index.story.tsx b/packages/components/src/progress-bar/stories/index.story.tsx
@@ -29,3 +29,38 @@ const Template: StoryFn< typeof ProgressBar > = ( { ...args } ) => {
 
 export const Default: StoryFn< typeof ProgressBar > = Template.bind( {} );
 Default.args = {};
+
+const withCustomWidthCustomCSS = `
+	.custom-progress-bar {
+		width: 100%;
+	}
+`;
+
+/**
+ * A progress bar with a custom width.
+ *
+ * You can override the default `width` by passing a custom CSS class via the
+ * `className` prop.
+ *
+ * This example shows a progress bar with an overriden `width` of `100%` which
+ * makes it fit all available horizontal space of the parent element. The CSS
+ * class looks like this:
+ *
+ * ```css
+ * .custom-progress-bar {
+ *   width: 100%;
+ * }
+ * ```
+ */
+export const WithCustomWidth = Template.bind( {} );
+WithCustomWidth.args = {
+	className: 'custom-progress-bar',
+};
+WithCustomWidth.decorators = [
+	( Story ) => (
+		<>
+			<style>{ withCustomWidthCustomCSS }</style>
+			<Story />
+		</>
+	),
+];
diff --git a/packages/components/src/progress-bar/styles.ts b/packages/components/src/progress-bar/styles.ts
@@ -24,8 +24,6 @@ export const INDETERMINATE_TRACK_WIDTH = 50;
 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(
@@ -38,6 +36,10 @@ export const Track = styled.div`
 	// Windows high contrast mode.
 	outline: 2px solid transparent;
 	outline-offset: 2px;
+
+	:where( & ) {
+		width: 160px;
+	}
 `;
 
 export const Indicator = styled.div< {