ProgressBar: Simplify default width implementation and make it more 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 <[email protected]>

* Another formatting fix in README jsx block

Co-authored-by: Marin Atanasov <[email protected]>

* YAFF (yet another formatting fix) in the README jsx

Co-authored-by: Marin Atanasov <[email protected]>

* Improve wording in descripton of the `value` prop in the README

Co-authored-by: Marin Atanasov <[email protected]>

* YAFF: Missing semicolon in README jsx

Co-authored-by: Marin Atanasov <[email protected]>

* YAFF: missing semicolon in jsx block in README

Co-authored-by: Marin Atanasov <[email protected]>

* YAFF: missing semicolon in jsx block in README

Co-authored-by: Marin Atanasov <[email protected]>

* YAFF: use tab instead of spaces in jsx code block in README

Co-authored-by: Marin Atanasov <[email protected]>

* Move export out of the HOC export section

* Fix CHANGELOG: Move entry to the existing enhacements section

* Spacing fix

Co-authored-by: Marin Atanasov <[email protected]>

* 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 <[email protected]>

* Improve jsdoc in story, do not encourage more customization than needed

* Inherit the second story from the main template

---------

Co-authored-by: fullofcaffeine <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: DaniGuardiola <[email protected]>
Co-authored-by: jasmussen <[email protected]>

Author: 5 people

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)).
 
 ### Bug Fixes
 

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
 

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 />
+		</>
+	),
+];

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< {