feat(progressbar): s2 migration #2659

mdt2 · 2024-04-12T17:17:24Z

Description

Migrates Progress Bar to Spectrum 2 (design spec). Includes:

Updated font sizes
Updated colors
WHCM improvement for Static White variant
Increased Chromatic coverage
Consolidation of Storybook stories (only Default now and users can use controls to see other variants/states)
No mods were changed

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

@jawinn

Variants are accessible by controls in Storybook (especially check Static White)
Check Chromatic testing preview in Storybook
design review @mdt2 (Slack approval)

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.

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 documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

mdt2 · 2024-04-12T17:18:38Z

.storybook/decorators/contextsWrapper.js

@@ -53,7 +53,7 @@ export const withContextWrapper = makeDecorator({
 			// Change background color when demonstrating static color options.
 			if (args.staticColor === "black") {
 				container.style.background = "var(--spectrum-examples-gradient-static-black)";
-			} else if (args.staticColor === "white") {
+			} else if (args.staticColor === "white" || args.isStaticWhite === "true") {


In the case of Progress Bar, only Static White is supported. I didn't want to make folks use a dropdown in the Storybook controls when there's only one option, so I expanded this to accommodate for isStaticWhite as a boolean option.

github-actions · 2024-04-12T17:19:51Z

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

github-actions · 2024-04-12T17:20:00Z

File metrics

Summary

Total size: 4.32 MB^*
Total change (Δ): ⬇ 0.07 KB (-0.00%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Δ
progressbar	11.19 KB	⬇ 0.05 KB

Details

progressbar

File	Head	Base	Δ
index-base.css	11.19 KB	11.24 KB	⬇ 0.05 KB (-0.45%)
index-vars.css	11.19 KB	11.24 KB	⬇ 0.05 KB (-0.45%)
index.css	11.19 KB	11.24 KB	⬇ 0.05 KB (-0.45%)
metadata.json	5.95 KB	5.86 KB	⬆ 0.08 KB (1.40%)

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

jawinn

I tried out all the various options, static white, and high contrast mode, and this is looking great. I see you brought up the side label question with design already.

components/progressbar/stories/progressbar.stories.js

components/progressbar/index.css

rise-erpelding

This is looking good! The testing preview shows all the variants (including Static White), which match the design spec, which I can also access through the Storybook controls, and WHCM looks good as well!

changeset-bot · 2024-04-30T14:32:08Z

🦋 Changeset detected

Latest commit: 5f582df

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

This PR includes changesets to release 1 package

Name	Type
@spectrum-css/progressbar	Major

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

mdt2 commented Apr 12, 2024

View reviewed changes

mdt2 requested review from pfulton, jawinn, castastrophe and rise-erpelding April 12, 2024 17:23

jawinn requested changes Apr 15, 2024

View reviewed changes

components/progressbar/stories/progressbar.stories.js Outdated Show resolved Hide resolved

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

pfulton force-pushed the spectrum-two branch from e03868f to b3b3aa5 Compare April 15, 2024 19:32

rise-erpelding approved these changes Apr 15, 2024

View reviewed changes

jawinn approved these changes Apr 16, 2024

View reviewed changes

mdt2 force-pushed the mdt2/css-711-s2-progress-bar branch from 6b74834 to 55fb881 Compare April 16, 2024 14:31

pfulton force-pushed the spectrum-two branch 2 times, most recently from f3dd9ff to 9931a8e Compare April 19, 2024 18:22

castastrophe force-pushed the spectrum-two branch 5 times, most recently from 6dbc850 to ae7aedd Compare April 26, 2024 20:37

mdt2 force-pushed the mdt2/css-711-s2-progress-bar branch from b037ee9 to 92b9f11 Compare April 30, 2024 14:32

pfulton force-pushed the spectrum-two branch from ea02183 to 3559678 Compare May 1, 2024 18:39

mdt2 force-pushed the mdt2/css-711-s2-progress-bar branch 2 times, most recently from 7d5bcfb to 53917df Compare May 2, 2024 20:10

pfulton force-pushed the spectrum-two branch from e0e0fd2 to 698e904 Compare May 3, 2024 18:39

feat(progressbar): s2 migration

5f582df

mdt2 force-pushed the mdt2/css-711-s2-progress-bar branch from 53917df to 5f582df Compare May 7, 2024 15:28

pfulton added the run_vrt For use on PRs looking to kick off VRT label May 8, 2024

pfulton merged commit bd38eaa into spectrum-two May 8, 2024
22 checks passed

pfulton deleted the mdt2/css-711-s2-progress-bar branch May 8, 2024 20:43

github-actions bot mentioned this pull request May 8, 2024

chore: release (next) #2739

Merged

pfulton pushed a commit that referenced this pull request May 10, 2024

feat(progressbar): s2 migration (#2659)

64f8c1b

rise-erpelding added the S2 Spectrum 2 label Sep 3, 2024

marissahuysentruyt mentioned this pull request Oct 1, 2024

docs(progressbar,meter): migrate docs from static site to storybook #3186

Merged

15 tasks

castastrophe pushed a commit that referenced this pull request Dec 27, 2024

feat(progressbar): s2 migration (#2659)

ef6a277

castastrophe pushed a commit that referenced this pull request Dec 29, 2024

feat(progressbar): s2 migration (#2659)

2a3eebf

castastrophe pushed a commit that referenced this pull request Dec 29, 2024

feat(progressbar): s2 migration (#2659)

4b69e3c

aramos-adobe pushed a commit that referenced this pull request Jan 9, 2025

feat(progressbar): s2 migration (#2659)

1ebd421

castastrophe pushed a commit that referenced this pull request Jan 17, 2025

feat(progressbar): s2 migration (#2659)

fdf393d

castastrophe pushed a commit that referenced this pull request Jan 17, 2025

feat(progressbar): s2 migration (#2659)

cb6de74

castastrophe pushed a commit that referenced this pull request Jan 21, 2025

feat(progressbar): s2 migration (#2659)

538ac89

aramos-adobe pushed a commit that referenced this pull request Jan 22, 2025

feat(progressbar): s2 migration (#2659)

1fb6855

castastrophe pushed a commit that referenced this pull request Jan 22, 2025

feat(progressbar): s2 migration (#2659)

b1b7112

castastrophe pushed a commit that referenced this pull request Feb 5, 2025

feat(progressbar): s2 migration (#2659)

c2cd78c

castastrophe pushed a commit that referenced this pull request Feb 7, 2025

feat(progressbar): s2 migration (#2659)

0ccca38

castastrophe pushed a commit that referenced this pull request Feb 7, 2025

feat(progressbar): s2 migration (#2659)

9ec8588

castastrophe pushed a commit that referenced this pull request Feb 7, 2025

feat(progressbar): s2 migration (#2659)

20cd336

castastrophe pushed a commit that referenced this pull request Feb 11, 2025

feat(progressbar): s2 migration (#2659)

abb1fda

castastrophe pushed a commit that referenced this pull request Feb 24, 2025

feat(progressbar): s2 migration (#2659)

9ec561e

castastrophe pushed a commit that referenced this pull request Feb 24, 2025

feat(progressbar): s2 migration (#2659)

6e5cd5e

castastrophe pushed a commit that referenced this pull request Feb 25, 2025

feat(progressbar): s2 migration (#2659)

d125b43

castastrophe mentioned this pull request Apr 15, 2025

feat(tokens,card): update to @adobe/spectrum-tokens@13.3.0 #3669

Merged

12 tasks

This was referenced May 5, 2025

docs: adds tag for migrated components #3688

Merged

docs: add storybook migrated badge #3690

Merged

chore: add missing tags #3692

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(progressbar): s2 migration #2659

feat(progressbar): s2 migration #2659

mdt2 commented Apr 12, 2024 •

edited

Loading

mdt2 Apr 12, 2024 •

edited

Loading

github-actions bot commented Apr 12, 2024 •

edited

Loading

github-actions bot commented Apr 12, 2024 •

edited

Loading

progressbar

jawinn left a comment

rise-erpelding left a comment

changeset-bot bot commented Apr 30, 2024 •

edited

Loading

feat(progressbar): s2 migration #2659

feat(progressbar): s2 migration #2659

Conversation

mdt2 commented Apr 12, 2024 • edited Loading

Description

How and where has this been tested?

Validation steps

Regression testing

To-do list

mdt2 Apr 12, 2024 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Apr 12, 2024 • edited Loading

github-actions bot commented Apr 12, 2024 • edited Loading

File metrics

Summary

progressbar

jawinn left a comment

Choose a reason for hiding this comment

rise-erpelding left a comment

Choose a reason for hiding this comment

changeset-bot bot commented Apr 30, 2024 • edited Loading

🦋 Changeset detected

mdt2 commented Apr 12, 2024 •

edited

Loading

mdt2 Apr 12, 2024 •

edited

Loading

github-actions bot commented Apr 12, 2024 •

edited

Loading

github-actions bot commented Apr 12, 2024 •

edited

Loading

changeset-bot bot commented Apr 30, 2024 •

edited

Loading