From 0c3d76ad66eeeb8948f99f5c9886b3ecbedee4f0 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Thu, 5 Jun 2025 16:17:39 -0700 Subject: [PATCH 1/5] fix(progress-bar + meter): adjust progressbar styles, story and template to support proper width token and sizes for medium and large variants --- .changeset/mighty-pigs-accept.md | 6 ++++ components/meter/dist/metadata.json | 11 ++------ components/meter/index.css | 2 -- components/progressbar/dist/metadata.json | 10 ++----- components/progressbar/index.css | 28 ++----------------- .../stories/progressbar.stories.js | 14 +--------- components/progressbar/stories/template.js | 6 ++-- 7 files changed, 17 insertions(+), 60 deletions(-) create mode 100644 .changeset/mighty-pigs-accept.md diff --git a/.changeset/mighty-pigs-accept.md b/.changeset/mighty-pigs-accept.md new file mode 100644 index 00000000000..67cff16b94c --- /dev/null +++ b/.changeset/mighty-pigs-accept.md @@ -0,0 +1,6 @@ +--- +"@spectrum-css/progressbar": major +"@spectrum-css/meter": minor +--- + +Adjust progressbar styles, story and template to support proper width token and sizes for medium and large variants diff --git a/components/meter/dist/metadata.json b/components/meter/dist/metadata.json index 12d5893d69d..0a67dc91088 100644 --- a/components/meter/dist/metadata.json +++ b/components/meter/dist/metadata.json @@ -7,13 +7,8 @@ ".spectrum-Meter.is-positive", ".spectrum-Meter.spectrum-Meter--sizeL" ], - "modifiers": [ - "--mod-meter-inline-size", - "--mod-meter-max-width", - "--mod-meter-min-width" - ], + "modifiers": ["--mod-meter-max-width", "--mod-meter-min-width"], "component": [ - "--spectrum-meter-default-width", "--spectrum-meter-maximum-width", "--spectrum-meter-minimum-width", "--spectrum-meter-thickness-large", @@ -26,15 +21,13 @@ "--spectrum-font-size-75", "--spectrum-negative-visual-color", "--spectrum-notice-visual-color", - "--spectrum-positive-visual-color", - "--spectrum-progressbar-size-2500" + "--spectrum-positive-visual-color" ], "passthroughs": [ "--mod-progressbar-fill-color", "--mod-progressbar-font-size", "--mod-progressbar-max-size", "--mod-progressbar-min-size", - "--mod-progressbar-size-default", "--mod-progressbar-spacing-top-to-text", "--mod-progressbar-thickness" ], diff --git a/components/meter/index.css b/components/meter/index.css index 2db081b1e9d..e11210b675e 100644 --- a/components/meter/index.css +++ b/components/meter/index.css @@ -13,7 +13,6 @@ /* @passthrough start */ .spectrum-Meter { - --mod-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-meter-default-width)); --mod-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-maximum-width)); --mod-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-minimum-width)); @@ -22,7 +21,6 @@ --mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); &.spectrum-Meter--sizeL { - --mod-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-progressbar-size-2500)); --mod-progressbar-thickness: var(--spectrum-meter-thickness-large); --mod-progressbar-font-size: var(--spectrum-font-size-100); --mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json index 25c7fd682a6..493b2c511f7 100644 --- a/components/progressbar/dist/metadata.json +++ b/components/progressbar/dist/metadata.json @@ -20,7 +20,6 @@ ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track", ".spectrum-ProgressBar--sizeL", ".spectrum-ProgressBar--sizeS", - ".spectrum-ProgressBar--sizeXL", ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill", ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-label", ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-percentage", @@ -35,6 +34,7 @@ "--mod-progressbar-fill-color-white", "--mod-progressbar-fill-size-indeterminate", "--mod-progressbar-font-size", + "--mod-progressbar-inline-size", "--mod-progressbar-label-and-value-white", "--mod-progressbar-line-height", "--mod-progressbar-line-height-cjk", @@ -52,7 +52,6 @@ "component": [ "--spectrum-progress-bar-maximum-width", "--spectrum-progress-bar-minimum-width", - "--spectrum-progress-bar-thickness-extra-large", "--spectrum-progress-bar-thickness-large", "--spectrum-progress-bar-thickness-medium", "--spectrum-progress-bar-thickness-small", @@ -63,14 +62,12 @@ "--spectrum-progressbar-fill-color-white", "--spectrum-progressbar-fill-size-indeterminate", "--spectrum-progressbar-font-size", + "--spectrum-progressbar-inline-size", "--spectrum-progressbar-label-and-value-white", "--spectrum-progressbar-line-height", "--spectrum-progressbar-line-height-cjk", "--spectrum-progressbar-max-size", "--spectrum-progressbar-min-size", - "--spectrum-progressbar-size-2400", - "--spectrum-progressbar-size-2500", - "--spectrum-progressbar-size-2800", "--spectrum-progressbar-size-default", "--spectrum-progressbar-spacing-label-to-progressbar", "--spectrum-progressbar-spacing-label-to-text", @@ -87,15 +84,14 @@ "--spectrum-cjk-line-height-100", "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", - "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", "--spectrum-corner-radius-full", "--spectrum-font-size-100", "--spectrum-font-size-200", - "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-300", "--spectrum-line-height-100", + "--spectrum-meter-default-width", "--spectrum-neutral-subdued-content-color-default", "--spectrum-spacing-200", "--spectrum-spacing-75", diff --git a/components/progressbar/index.css b/components/progressbar/index.css index a45e9285b09..49d27a0535e 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -19,17 +19,8 @@ --spectrum-progressbar-fill-size-indeterminate: 70%; - /* --spectrum-global-dimension-static-size-2400 */ - --spectrum-progressbar-size-2400: 192px; - - /* --spectrum-global-dimension-static-size-2500 */ - --spectrum-progressbar-size-2500: 200px; - - /* --spectrum-global-dimension-static-size-2800 */ - --spectrum-progressbar-size-2800: 224px; - /* Size */ - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); + --spectrum-progressbar-inline-size: var(--spectrum-meter-default-width); --spectrum-progressbar-font-size: var(--spectrum-font-size-100); --spectrum-progressbar-line-height: var(--spectrum-line-height-100); @@ -55,8 +46,6 @@ } .spectrum-ProgressBar--sizeS { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); - --spectrum-progressbar-font-size: var(--spectrum-font-size-75); --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-small); @@ -64,23 +53,12 @@ } .spectrum-ProgressBar--sizeL { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500); - --spectrum-progressbar-font-size: var(--spectrum-font-size-200); --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large); --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); } -.spectrum-ProgressBar--sizeXL { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800); - - --spectrum-progressbar-font-size: var(--spectrum-font-size-300); - --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-extra-large); - - --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-300); -} - .spectrum-ProgressBar { position: relative; display: inline-flex; @@ -89,9 +67,9 @@ align-items: center; font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-font-size)); vertical-align: top; - word-break: break-word; + overflow-wrap: break-word; - inline-size: var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)); + inline-size: var(--mod-progressbar-inline-size, var(--spectrum-progressbar-inline-size)); max-inline-size: var(--mod-progressbar-max-size, var(--spectrum-progressbar-max-size)); min-inline-size: var(--mod-progressbar-min-size, var(--spectrum-progressbar-min-size)); diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js index f55387d875a..ed70db42223 100644 --- a/components/progressbar/stories/progressbar.stories.js +++ b/components/progressbar/stories/progressbar.stories.js @@ -18,18 +18,7 @@ export default { title: "Progress bar", component: "ProgressBar", argTypes: { - customWidth: { - name: "Custom width", - defaultValue: 192, - description: "A number to adjust the width of the component. Spectrum 2 specifications limit the component width to be between 48px and 768px.", - type: { name: "number" }, - table: { - type: { summary: "number" }, - category: "Component", - defaultValue: { summary: 200 }, - }, - control: { type: "range", min: 48, max: 768,}, - }, + customWidth: { table: { disable: true } }, size: size(["s", "m", "l", "xl"]), isIndeterminate, labelPosition: { @@ -87,7 +76,6 @@ export default { label: "Loading", labelPosition: "top", value: 0, - customWidth: 200, isIndeterminate: false, showValueLabel: true, }, diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js index 30c9cfeb827..b1ae6067515 100644 --- a/components/progressbar/stories/template.js +++ b/components/progressbar/stories/template.js @@ -13,7 +13,6 @@ export const Template = ({ customClasses = [], labelPosition, staticColor, - customWidth, isIndeterminate = false, label, value, @@ -33,12 +32,11 @@ export const Template = ({ [`${rootClass}--indeterminate`]: isIndeterminate, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} - style=${styleMap({ - "width": `${customWidth}px`, + style=${ifDefined(styleMap({ ...customStyles, "--mod-progressbar-track-color": trackFill, "--mod-progressbar-fill-color": progressBarFill, - })} + }))} value=${ifDefined(value ? `${value}%` : undefined)} aria-valuenow=${ifDefined(value ? `${value}%` : undefined)} role="progressbar" From 541b86b59f4f0c582fabf958973a4b06661693e1 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 9 Jun 2025 08:39:10 -0700 Subject: [PATCH 2/5] fix(progress-bar + meter): restores spectrum-ProgressBar--sizeXL --- .changeset/mighty-pigs-accept.md | 2 +- components/progressbar/dist/metadata.json | 5 +++++ components/progressbar/index.css | 9 +++++++++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/.changeset/mighty-pigs-accept.md b/.changeset/mighty-pigs-accept.md index 67cff16b94c..485cb1dbc36 100644 --- a/.changeset/mighty-pigs-accept.md +++ b/.changeset/mighty-pigs-accept.md @@ -1,5 +1,5 @@ --- -"@spectrum-css/progressbar": major +"@spectrum-css/progressbar": minor "@spectrum-css/meter": minor --- diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json index 493b2c511f7..1650430add7 100644 --- a/components/progressbar/dist/metadata.json +++ b/components/progressbar/dist/metadata.json @@ -20,6 +20,7 @@ ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track", ".spectrum-ProgressBar--sizeL", ".spectrum-ProgressBar--sizeS", + ".spectrum-ProgressBar--sizeXL", ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill", ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-label", ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-percentage", @@ -52,6 +53,7 @@ "component": [ "--spectrum-progress-bar-maximum-width", "--spectrum-progress-bar-minimum-width", + "--spectrum-progress-bar-thickness-extra-large", "--spectrum-progress-bar-thickness-large", "--spectrum-progress-bar-thickness-medium", "--spectrum-progress-bar-thickness-small", @@ -68,6 +70,7 @@ "--spectrum-progressbar-line-height-cjk", "--spectrum-progressbar-max-size", "--spectrum-progressbar-min-size", + "--spectrum-progressbar-size-2800", "--spectrum-progressbar-size-default", "--spectrum-progressbar-spacing-label-to-progressbar", "--spectrum-progressbar-spacing-label-to-text", @@ -84,10 +87,12 @@ "--spectrum-cjk-line-height-100", "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", + "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", "--spectrum-corner-radius-full", "--spectrum-font-size-100", "--spectrum-font-size-200", + "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-300", "--spectrum-line-height-100", diff --git a/components/progressbar/index.css b/components/progressbar/index.css index 49d27a0535e..08208d5b243 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -59,6 +59,15 @@ --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); } +.spectrum-ProgressBar--sizeXL { + --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800); + + --spectrum-progressbar-font-size: var(--spectrum-font-size-300); + --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-extra-large); + + --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-300); +} + .spectrum-ProgressBar { position: relative; display: inline-flex; From 7a2725630ddaae07f8491373e08463649b774f1e Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 9 Jun 2025 09:09:12 -0700 Subject: [PATCH 3/5] fix(progress-bar + meter): update custom width story to use mod in the absence of customWidth arg --- .changeset/mighty-pigs-accept.md | 8 +++++++- components/progressbar/dist/metadata.json | 3 +-- components/progressbar/index.css | 4 +--- components/progressbar/stories/progressbar.stories.js | 7 ++++--- 4 files changed, 13 insertions(+), 9 deletions(-) diff --git a/.changeset/mighty-pigs-accept.md b/.changeset/mighty-pigs-accept.md index 485cb1dbc36..6f308ccc512 100644 --- a/.changeset/mighty-pigs-accept.md +++ b/.changeset/mighty-pigs-accept.md @@ -3,4 +3,10 @@ "@spectrum-css/meter": minor --- -Adjust progressbar styles, story and template to support proper width token and sizes for medium and large variants +Adjust progressbar styles, story and template to support proper width token and sizes for medium (desktop) and large (mobile) platforms. + +Removed mods +`--mod-meter-inline-size` + +New mods +`--mod-progressbar-inline-size` diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json index 1650430add7..a7497766379 100644 --- a/components/progressbar/dist/metadata.json +++ b/components/progressbar/dist/metadata.json @@ -70,7 +70,6 @@ "--spectrum-progressbar-line-height-cjk", "--spectrum-progressbar-max-size", "--spectrum-progressbar-min-size", - "--spectrum-progressbar-size-2800", "--spectrum-progressbar-size-default", "--spectrum-progressbar-spacing-label-to-progressbar", "--spectrum-progressbar-spacing-label-to-text", @@ -96,7 +95,7 @@ "--spectrum-font-size-75", "--spectrum-gray-300", "--spectrum-line-height-100", - "--spectrum-meter-default-width", + "--spectrum-meter-width", "--spectrum-neutral-subdued-content-color-default", "--spectrum-spacing-200", "--spectrum-spacing-75", diff --git a/components/progressbar/index.css b/components/progressbar/index.css index 08208d5b243..85f32845c13 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -20,7 +20,7 @@ --spectrum-progressbar-fill-size-indeterminate: 70%; /* Size */ - --spectrum-progressbar-inline-size: var(--spectrum-meter-default-width); + --spectrum-progressbar-inline-size: var(--spectrum-meter-width); --spectrum-progressbar-font-size: var(--spectrum-font-size-100); --spectrum-progressbar-line-height: var(--spectrum-line-height-100); @@ -60,8 +60,6 @@ } .spectrum-ProgressBar--sizeXL { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800); - --spectrum-progressbar-font-size: var(--spectrum-font-size-300); --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-extra-large); diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js index ed70db42223..15ff9ff525a 100644 --- a/components/progressbar/stories/progressbar.stories.js +++ b/components/progressbar/stories/progressbar.stories.js @@ -18,7 +18,6 @@ export default { title: "Progress bar", component: "ProgressBar", argTypes: { - customWidth: { table: { disable: true } }, size: size(["s", "m", "l", "xl"]), isIndeterminate, labelPosition: { @@ -131,13 +130,15 @@ Indeterminate.parameters = { }; /** - * The minimum width of a progress bar is 48px and the maximum width of a progress bar is 768px, for both desktop and mobile platform scale. Smaller progress bars should only be used in places where it’s not necessary to have a label. + * By default, the progress bar has a minimum, maximum, and fixed size. The progress bar may be displayed at a custom width by setting `--mod-progressbar-inline-size` to the desired width. The progress bar below is displayed at `400px` using that modifiable custom property. */ export const CustomWidth = Template.bind({}); CustomWidth.storyName = "Custom width"; CustomWidth.args = { value: 83, - customWidth: 400, + customStyles: { + "--mod-progressbar-inline-size": "400px", + }, }; CustomWidth.tags = ["!dev"]; CustomWidth.parameters = { From cab251fed0c93d185e088e633b02ce90a5b36ce6 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Tue, 10 Jun 2025 13:39:22 -0700 Subject: [PATCH 4/5] fix(progress-bar + meter): replace instances of --spectrum-progressbar-size-default with newly defined inline-size token --- components/progressbar/dist/metadata.json | 2 -- components/progressbar/index.css | 8 ++++---- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json index a7497766379..0ac94c7f15c 100644 --- a/components/progressbar/dist/metadata.json +++ b/components/progressbar/dist/metadata.json @@ -41,7 +41,6 @@ "--mod-progressbar-line-height-cjk", "--mod-progressbar-max-size", "--mod-progressbar-min-size", - "--mod-progressbar-size-default", "--mod-progressbar-spacing-label-to-progressbar", "--mod-progressbar-spacing-label-to-text", "--mod-progressbar-spacing-top-to-text", @@ -70,7 +69,6 @@ "--spectrum-progressbar-line-height-cjk", "--spectrum-progressbar-max-size", "--spectrum-progressbar-min-size", - "--spectrum-progressbar-size-default", "--spectrum-progressbar-spacing-label-to-progressbar", "--spectrum-progressbar-spacing-label-to-text", "--spectrum-progressbar-spacing-top-to-text", diff --git a/components/progressbar/index.css b/components/progressbar/index.css index 85f32845c13..198e9fd2c5e 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -145,7 +145,7 @@ word-break: normal; .spectrum-ProgressBar-track { - flex: 1 1 var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)); + flex: 1 1 var(--mod-progressbar-inline-size, var(--spectrum-progressbar-inline-size)); } .spectrum-ProgressBar-label { @@ -196,17 +196,17 @@ } to { - transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default))); + transform: translate(var(--mod-progressbar-inline-size, var(--spectrum-progressbar-inline-size))); } } @keyframes indeterminate-loop-rtl { from { - transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-fill-size-indeterminate))); + transform: translate(var(--mod-progressbar-inline-size, var(--spectrum-progressbar-fill-size-indeterminate))); } to { - transform: translate(calc(-1 * var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)))); + transform: translate(calc(-1 * var(--mod-progressbar-inline-size, var(--spectrum-progressbar-inline-size)))); } } From 4ba08ae3a25d1ab36b4d3eee5b226dabcd9ff4d4 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Tue, 10 Jun 2025 13:40:26 -0700 Subject: [PATCH 5/5] chore(progress-bar + meter): update changset with additional details on changes --- .changeset/mighty-pigs-accept.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.changeset/mighty-pigs-accept.md b/.changeset/mighty-pigs-accept.md index 6f308ccc512..83be0beb618 100644 --- a/.changeset/mighty-pigs-accept.md +++ b/.changeset/mighty-pigs-accept.md @@ -5,6 +5,9 @@ Adjust progressbar styles, story and template to support proper width token and sizes for medium (desktop) and large (mobile) platforms. +- Progress bar and meter now use the same tokens to control their width. +- Progress bar and meter now have a set width regardless of t-shirt size. + Removed mods `--mod-meter-inline-size`