feat(meter): s2 migration, full corner radius, help text #3968

aramos-adobe · 2025-06-18T16:08:54Z

Description

S2 Meter Migration

This migration updates the meter component and the progress bar component. Both needed the track to have a full corner radius to make the rounded look. The progress bar's HTML template now includes the help text component but it is only used in the meter.

New updates

Includes --sizeM and --sizeXL
Includes help text component for more context
Shares progress bar's field label typography
Added help text visual test

Since the progress bar and meter are now using the same tokens for track thickness, font size, and spacing, the following mods have been redacted:

--mod-progressbar-thickness
--mod-progressbar-font-size
--mod-progressbar-spacing-top-to-text

New mods

--mod-meter-help-text-to-progress-bar

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

Regression testing

Validate:

The documentation pages for at least two other components are still loading, including:

The pages render correctly, are accessible, and are responsive.

If components have been modified, VRTs have been run on this branch:

VRTs have been run and looked at.
Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
I have tested these changes in Windows High Contrast mode.
If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

github-actions · 2025-06-18T16:14:21Z

File metrics

Summary

Total size: 1.43 MB^*
✅ No change in file sizes

Package	Size	Minified	Gzipped
meter	1.74 KB	1.68 KB	0.64 KB
progressbar	9.42 KB	8.94 KB	1.69 KB

File change details

meter

Filename	Head	Minified	Gzipped	Compared to base
index.css	1.74 KB	1.68 KB	0.64 KB	🔴 ⬆ 0.18 KB
metadata.json	1.13 KB	-	-	🔴 ⬆ 0.14 KB

progressbar

Filename	Head	Minified	Gzipped	Compared to base
index.css	9.42 KB	8.94 KB	1.69 KB	🔴 ⬆ 0.81 KB
metadata.json	5.36 KB	-	-	🔴 ⬆ 0.73 KB

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

github-actions · 2025-06-18T16:14:50Z

🚀 Deployed on https://pr-3968--spectrum-css.netlify.app

changeset-bot · 2025-06-18T16:31:55Z

🦋 Changeset detected

Latest commit: 914a4f6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@spectrum-css/meter	Major
@spectrum-css/progressbar	Major
@spectrum-css/bundle	Patch
@spectrum-css/preview	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

rise-erpelding

I don't think this needs much more than small fixes! I made some callouts about documentation and a custom prop that I thought could use renaming. I also noticed that the meter spec has static white and static black examples/tokens included, but so far we're only supporting static white (somehow it seems like progress bar only needs static white, I guess that's why)? Should static black be added too?

components/meter/index.css

components/progressbar/index.css

components/meter/stories/meter.stories.js

.changeset/sour-donuts-go.md

components/meter/stories/meter.test.js

github-actions · 2025-06-24T15:07:33Z

📚 Branch preview

PR #3968 has been deployed to Azure Blob Storage: https://spectrumcss.z13.web.core.windows.net/pr-3968/index.html.

rise-erpelding

This is really close! I just had a few small callouts in the comments.

Also, since we talked about adding side label for progress bar and discovered that it is in there but isn't well documented, how would you feel about updating the docs page and controls to include the side label variant?

.changeset/sour-donuts-go.md

components/meter/stories/meter.test.js

components/progressbar/index.css

rise-erpelding

This looks good! I had some suggestions for the changeset and would recommend enabling the side label control for progress bar and deleting the todo comment, but don't consider that blocking!

.changeset/sour-donuts-go.md

components/progressbar/index.css

.changeset/sour-donuts-go.md

marissahuysentruyt

Overall, this is looking pretty good! I think I found some missing tokens, specifically the meter thickness ones for each t-shirt size. And then I'd love your perspective on the border radius- is it supposed to be on both ends of the fill?

I did have a question about the animation for meter's (and progress bar's) animation. It looks like the CSS animation has that jitter that we solved over in SWC (adobe/spectrum-web-components#5535). Do you think this migration is the right place to fix that, too? Or do you think that's a separate bug fix PR? If we don't pull the fix into our repo for S2, would that mean when SWC takes in any new S2 CSS, we'd break the animation again?

Looks like there's some missing tokens: the meter-thickness-* t-shirt sizing tokens. Looking through the tokens/dist, the values for them are all slightly different than the current progress-bar-thicknes-* t-shirt sizing. Maybe we need some mods to pass to meter again to use those? There also may be some context I don't have!

components/progressbar/stories/progressbar.stories.js

components/progressbar/index.css

marissahuysentruyt · 2025-06-25T20:26:12Z

components/progressbar/index.css

@@ -161,6 +166,7 @@
 		margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
 		margin-block-end: 0;
 		margin-block-start: 0;
+		align-self: center;


What should I be expecting with the align-self: center? I'm not sure I'm seeing any changes if I toggle this on and off in the browser in the side label story. Is it a backup to the align-self: flex-start that's on the top label/default progress bar class? I have to be missing something...

Screen.Recording.2025-06-25.at.4.27.12.PM.mov

If the side label on the left wraps to another line the percentage label is fixated at the top. That's why I added the align-self: center

Screen.Recording.2025-06-25.at.6.10.54.PM.mov

ah beautiful- thank you! I didn't have the main label wrapped!

components/progressbar/index.css

components/meter/stories/meter.stories.js

components/meter/stories/meter.test.js

marissahuysentruyt · 2025-06-25T21:10:02Z

components/progressbar/index.css

Do you think we should explicitly set any of the passthroughs for field label? I know the font sizes are already correct, but I think we got some requests to be more explicit about the cascade, so would that mean creating custom properties (something like --spectrum-progressbar-percentage-font-size: var(--spectrum-font-size-100);, and then using mods for field label (--mod-field-label-font-size: var(--spectrum-progresbar-percentage-font-size);`)?

It feels like we did that in other components, just to be really sure that we're declaring the nested component styles properly. And we're already "redeclaring" the line-height property, even though it's also the same as field label's line-height. Just want to make sure we're doing all the components the same when it comes to embedded components!

I moved the --spectrum-progressbar-font-size token to the label and percentage selector. It was in the rootClass selector and it wasn't causing any effect there.

Awesome. 👍

Do you think we should be passing that font size value to a mod/passthrough for the field label as well? I don't think there would ever be a use case where the field label and the percentage would be different fonts, but do we want to make sure all the fonts are the same size, weight, etc?

--mod-field-label-font-size: var(--spectrum-progressbar-font-size)?

Stylelint doesn't like the --mod approach with the label passthrough. I'm going to keep the original way for now.

components/meter/stories/meter.stories.js

components/progressbar/index.css

aramos-adobe · 2025-06-25T22:36:52Z

@marissahuysentruyt The reason why I didn't use the token mod-progressbar-thickness is because in the design the thickness between progressbar and meter is identical. Unless you see something different in the token/dist. But it appears to be the same. Since the tokens for meter-thickness does exist in the token library I'll use the mods accordingly. Maybe something might in the future

aramos-adobe · 2025-06-25T22:42:37Z

@marissahuysentruyt Added the magical animation you created in the SWC PR 🤩

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

marissahuysentruyt

Lovely! I had a few super small suggestions for some docs, but tokens are in great shape! I'm going to approve anyways.

marissahuysentruyt · 2025-06-26T13:34:44Z

components/progressbar/index.css

@@ -161,6 +166,7 @@
 		margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
 		margin-block-end: 0;
 		margin-block-start: 0;
+		align-self: center;


ah beautiful- thank you! I didn't have the main label wrapped!

marissahuysentruyt · 2025-06-26T13:42:39Z

components/progressbar/index.css

Awesome. 👍

Do you think we should be passing that font size value to a mod/passthrough for the field label as well? I don't think there would ever be a use case where the field label and the percentage would be different fonts, but do we want to make sure all the fonts are the same size, weight, etc?

--mod-field-label-font-size: var(--spectrum-progressbar-font-size)?

components/meter/stories/meter.stories.js

marissahuysentruyt · 2025-06-26T14:05:38Z

components/meter/index.css

@@ -15,15 +15,19 @@
 .spectrum-Meter {
 	--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));
+	--spectrum-meter-help-text-to-progress-bar: var(--spectrum-spacing-75);
+	--mod-progressbar-thickness: var(--spectrum-meter-thickness-medium);


@aramos-adobe thanks for adding the meter tokens in! You're right that they're the same as progress bar. When I made that comment yesterday, I was looking through the large/mobile values 🤦‍♀️ , which are, in fact, different. But either way, I think it's a good practice for us to be explicit with the tokens like this (even if they're the same for the time being). Thanks!

feat(meter): new s2 migration

e780fa1

aramos-adobe self-assigned this Jun 18, 2025

aramos-adobe added size-3 M ~18-30hrs; moderate effort or complexity, several work days needed. ready-for-review S2 Spectrum 2 labels Jun 18, 2025

Merge branch 'spectrum-two' into aramos-adobe/css1030-meter-s2-migration

7afc35f

Merge branch 'spectrum-two' into aramos-adobe/css1030-meter-s2-migration

f68aa9f

rise-erpelding requested changes Jun 23, 2025

View reviewed changes

Merge branch 'spectrum-two' into aramos-adobe/css1030-meter-s2-migration

e2f48e8

feat(meter): added static black and static color tokens updated stories

d288947

aramos-adobe requested a review from rise-erpelding June 24, 2025 17:37

rise-erpelding requested changes Jun 24, 2025

View reviewed changes

.changeset/sour-donuts-go.md Outdated Show resolved Hide resolved

components/meter/stories/meter.test.js Show resolved Hide resolved

components/progressbar/index.css Outdated Show resolved Hide resolved

feat(meter): updating changeset, story and label position

2194777

aramos-adobe requested a review from rise-erpelding June 25, 2025 13:35

rise-erpelding approved these changes Jun 25, 2025

View reviewed changes

aramos-adobe added 2 commits June 25, 2025 10:34

feat(meter): adding sidelabel story and control

a84e443

feat(meter): updating changeset

55cfbdc

marissahuysentruyt requested changes Jun 25, 2025

View reviewed changes

Merge branch 'spectrum-two' into aramos-adobe/css1030-meter-s2-migration

13c9b6c

aramos-adobe and others added 2 commits June 26, 2025 08:35

feat(meter): updating meter sizes and story

9874e0e

Update components/meter/stories/meter.test.js

d8f00fb

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

aramos-adobe requested a review from marissahuysentruyt June 26, 2025 12:56

marissahuysentruyt approved these changes Jun 26, 2025

View reviewed changes

Merge branch 'spectrum-two' into aramos-adobe/css1030-meter-s2-migration

42be284

feat(meter): making final touches

914a4f6

aramos-adobe merged commit 75e847f into spectrum-two Jun 27, 2025
13 checks passed

aramos-adobe deleted the aramos-adobe/css1030-meter-s2-migration branch June 27, 2025 05:27

castastrophe mentioned this pull request Jul 25, 2025

ci: chromatic runs for S2 [CSS-1233] #4070

Merged

3 tasks

github-actions bot mentioned this pull request Jul 26, 2025

chore: release (next) #4073

Merged

feat(meter): s2 migration, full corner radius, help text #3968

feat(meter): s2 migration, full corner radius, help text #3968

Uh oh!

Conversation

aramos-adobe commented Jun 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

S2 Meter Migration

New updates

New mods

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

Uh oh!

github-actions bot commented Jun 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

meter

progressbar

Uh oh!

github-actions bot commented Jun 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Jun 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

rise-erpelding left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jun 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Branch preview

Uh oh!

rise-erpelding left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rise-erpelding left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aramos-adobe commented Jun 18, 2025 •

edited

Loading

github-actions bot commented Jun 18, 2025 •

edited

Loading

github-actions bot commented Jun 18, 2025 •

edited

Loading

changeset-bot bot commented Jun 18, 2025 •

edited

Loading

github-actions bot commented Jun 24, 2025 •

edited

Loading