diff --git a/components/progressbar/index.css b/components/progressbar/index.css index ef4ab3edad6..073b76116cf 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -28,6 +28,8 @@ /* --spectrum-global-dimension-static-size-2800 */ --spectrum-progressbar-size-2800: 224px; + --spectrum-progressbar-inline-size: var(--spectrum-meter-default-width); + /* Size */ --spectrum-progressbar-font-size: var(--spectrum-font-size-75); --spectrum-progressbar-line-height-cjk: var(--spectrum-cjk-line-height-100); @@ -64,7 +66,7 @@ .spectrum-ProgressBar--sizeS, .spectrum-Meter--sizeS { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); + --spectrum-progressbar-size-default: var(--spectrum-progressbar-inline-size); --spectrum-progressbar-font-size: var(--spectrum-font-size-75); --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-small); @@ -73,7 +75,7 @@ } .spectrum-ProgressBar--sizeM { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); + --spectrum-progressbar-size-default: var(--spectrum-progressbar-inline-size); --spectrum-progressbar-font-size: var(--spectrum-font-size-75); --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large); @@ -83,7 +85,7 @@ .spectrum-ProgressBar--sizeL, .spectrum-Meter--sizeL { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500); + --spectrum-progressbar-size-default: var(--spectrum-progressbar-inline-size); --spectrum-progressbar-font-size: var(--spectrum-font-size-100); --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large); @@ -92,7 +94,7 @@ } .spectrum-ProgressBar--sizeXL { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800); + --spectrum-progressbar-size-default: var(--spectrum-progressbar-inline-size); --spectrum-progressbar-font-size: var(--spectrum-font-size-200); --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-extra-large); diff --git a/components/progressbar/metadata/metadata.json b/components/progressbar/metadata/metadata.json index f49c8b03854..8885de6e2ab 100644 --- a/components/progressbar/metadata/metadata.json +++ b/components/progressbar/metadata/metadata.json @@ -31,6 +31,7 @@ ".spectrum-ProgressBar--sizeS", ".spectrum-ProgressBar--sizeXL", ".spectrum-ProgressBar-track", + ".spectrum-ProgressBar.spectrum--large", ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill", ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-label", ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-percentage", diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js index f6bf0ff90ad..399e4d4c8be 100644 --- a/components/progressbar/stories/progressbar.stories.js +++ b/components/progressbar/stories/progressbar.stories.js @@ -87,7 +87,6 @@ export default { label: "Loading", labelPosition: "top", value: 0, - customWidth: 192, isIndeterminate: false, showValueLabel: true, }, diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js index 72c9a2a6c3a..abb86b4c02d 100644 --- a/components/progressbar/stories/template.js +++ b/components/progressbar/stories/template.js @@ -32,12 +32,12 @@ export const Template = ({ [`${rootClass}--indeterminate`]: isIndeterminate, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} - style=${styleMap({ + style=${ifDefined(styleMap({ "width": `${customWidth}px`, ...customStyles, "--mod-progressbar-track-color": trackFill, "--mod-progressbar-fill-color": progressBarFill, - })} + }))} value=${ifDefined(value ? `${value}%` : undefined)} aria-valuenow=${ifDefined(value ? `${value}%` : undefined)} role="progressbar"