spectrum-web-components
spectrum-web-components copied to clipboard
adobe
refactor(progress-circle): use core tokens
This updates the ProgressCircle component to use core tokens
Uses beta release. Hold for full release.
Description
Related issue(s)
Motivation and context
How has this been tested?
- [ ] Test case 1
- Go here
- Do this
- [ ] Test case 2
- Go here
- Do this
Screenshots (if appropriate)
Types of changes
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to change)
- [ ] Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)
Checklist
- [ ] I have signed the Adobe Open Source CLA.
- [ ] My code follows the code style of this project.
- [ ] If my change required a change to the documentation, I have updated the documentation in this pull request.
- [ ] I have read the CONTRIBUTING document.
- [ ] I have added tests to cover my changes.
- [ ] All new and existing tests passed.
- [ ] I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
Best practices
This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.
Branch Preview
Visual regression test results
When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
- High Contrast Mode | Medium | LTR
- Classic | Lightest | Medium | LTR
- Classic | Lightest | Medium | RTL
- Classic | Lightest | Large | LTR
- Classic | Lightest | Large | RTL
- Classic | Light | Medium | LTR
- Classic | Light | Medium | RTL
- Classic | Light | Large | LTR
- Classic | Light | Large | RTL
- Classic | Dark | Medium | LTR
- Classic | Dark | Medium | RTL
- Classic | Dark | Large | LTR
- Classic | Dark | Large | RTL
- Classic | Darkest | Medium | LTR
- Classic | Darkest | Medium | RTL
- Classic | Darkest | Large | LTR
- Classic | Darkest | Large | RTL
- Express | Lightest | Medium | LTR
- Express | Lightest | Medium | RTL
- Express | Lightest | Large | LTR
- Express | Lightest | Large | RTL
- Express | Light | Medium | LTR
- Express | Light | Medium | RTL
- Express | Light | Large | LTR
- Express | Light | Large | RTL
- Express | Dark | Medium | LTR
- Express | Dark | Medium | RTL
- Express | Dark | Large | LTR
- Express | Dark | Large | RTL
- Express | Darkest | Medium | LTR
- Express | Darkest | Medium | RTL
- Express | Darkest | Large | LTR
- Express | Darkest | Large | RTL
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Tachometer results
Chrome
action-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 244 kB | 51.49ms - 52.61ms | - | unsure 🔍 -1% - +2% -0.71ms - +1.27ms |
| branch | 244 kB | 50.95ms - 52.59ms | unsure 🔍 -2% - +1% -1.27ms - +0.71ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 608 kB | 335.77ms - 341.74ms | - | unsure 🔍 -2% - +1% -6.61ms - +2.52ms |
| branch | 610 kB | 337.34ms - 344.26ms | unsure 🔍 -1% - +2% -2.52ms - +6.61ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 391 kB | 127.04ms - 131.38ms | - | unsure 🔍 -2% - +3% -2.12ms - +3.90ms |
| branch | 392 kB | 126.24ms - 130.41ms | unsure 🔍 -3% - +2% -3.90ms - +2.12ms |
- |
illustrated-message permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 293 kB | 61.37ms - 62.93ms | - | unsure 🔍 -0% - +3% -0.11ms - +1.88ms |
| branch | 293 kB | 60.66ms - 61.89ms | unsure 🔍 -3% - +0% -1.88ms - +0.11ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 309 kB | 385.22ms - 392.99ms | - | unsure 🔍 -2% - +1% -6.48ms - +3.63ms |
| branch | 311 kB | 387.29ms - 393.76ms | unsure 🔍 -1% - +2% -3.63ms - +6.48ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 347 kB | 110.19ms - 113.81ms | - | unsure 🔍 -3% - +2% -3.36ms - +1.94ms |
| branch | 348 kB | 110.78ms - 114.64ms | unsure 🔍 -2% - +3% -1.94ms - +3.36ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 454 kB | 1200.55ms - 1216.07ms | - | faster ✔ 0% - 2% 0.64ms - 28.18ms |
| branch | 454 kB | 1211.35ms - 1234.10ms | slower ❌ 0% - 2% 0.64ms - 28.18ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 241 kB | 43.75ms - 44.80ms | - | unsure 🔍 -2% - +2% -1.10ms - +0.70ms |
| branch | 241 kB | 43.75ms - 45.21ms | unsure 🔍 -2% - +2% -0.70ms - +1.10ms |
- |
progress-circle permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 258 kB | 89.57ms - 92.21ms | - | unsure 🔍 -3% - +1% -2.87ms - +1.08ms |
| branch | 258 kB | 90.32ms - 93.25ms | unsure 🔍 -1% - +3% -1.08ms - +2.87ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 341 kB | 211.97ms - 216.27ms | - | faster ✔ 0% - 3% 0.86ms - 7.46ms |
| branch | 340 kB | 215.78ms - 220.78ms | slower ❌ 0% - 3% 0.86ms - 7.46ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 546 kB | 2044.15ms - 2048.35ms | - | unsure 🔍 -0% - +0% -1.31ms - +4.21ms |
| branch | 547 kB | 2043.01ms - 2046.60ms | unsure 🔍 -0% - +0% -4.21ms - +1.31ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 247 kB | 46.13ms - 47.48ms | - | unsure 🔍 -3% - +2% -1.60ms - +0.72ms |
| branch | 247 kB | 46.31ms - 48.19ms | unsure 🔍 -2% - +3% -0.72ms - +1.60ms |
- |
Firefox
action-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 244 kB | 128.26ms - 146.46ms | - | unsure 🔍 -10% - +7% -13.97ms - +9.85ms |
| branch | 244 kB | 131.74ms - 147.10ms | unsure 🔍 -7% - +10% -9.85ms - +13.97ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 608 kB | 491.75ms - 505.01ms | - | unsure 🔍 -3% - +1% -12.65ms - +6.93ms |
| branch | 610 kB | 494.03ms - 508.45ms | unsure 🔍 -1% - +3% -6.93ms - +12.65ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 391 kB | 218.86ms - 229.66ms | - | unsure 🔍 -2% - +5% -5.09ms - +10.25ms |
| branch | 392 kB | 216.24ms - 227.12ms | unsure 🔍 -5% - +2% -10.25ms - +5.09ms |
- |
illustrated-message permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 293 kB | 116.80ms - 132.56ms | - | unsure 🔍 -6% - +11% -7.83ms - +12.91ms |
| branch | 293 kB | 115.40ms - 128.88ms | unsure 🔍 -10% - +6% -12.91ms - +7.83ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 309 kB | 635.52ms - 649.04ms | - | unsure 🔍 -1% - +2% -5.20ms - +13.80ms |
| branch | 311 kB | 631.31ms - 644.65ms | unsure 🔍 -2% - +1% -13.80ms - +5.20ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 347 kB | 221.69ms - 234.79ms | - | unsure 🔍 -6% - +2% -15.09ms - +4.41ms |
| branch | 348 kB | 226.36ms - 240.80ms | unsure 🔍 -2% - +7% -4.41ms - +15.09ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 454 kB | 1368.69ms - 1392.87ms | - | unsure 🔍 -1% - +1% -15.68ms - +13.96ms |
| branch | 454 kB | 1373.06ms - 1390.22ms | unsure 🔍 -1% - +1% -13.96ms - +15.68ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 241 kB | 121.83ms - 144.01ms | - | unsure 🔍 -10% - +14% -12.64ms - +18.24ms |
| branch | 241 kB | 119.38ms - 140.86ms | unsure 🔍 -14% - +9% -18.24ms - +12.64ms |
- |
progress-circle permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 258 kB | 261.80ms - 276.64ms | - | faster ✔ 1% - 8% 2.20ms - 22.80ms |
| branch | 258 kB | 274.57ms - 288.87ms | slower ❌ 1% - 9% 2.20ms - 22.80ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 341 kB | 403.29ms - 416.27ms | - | unsure 🔍 -1% - +3% -4.18ms - +13.34ms |
| branch | 340 kB | 399.31ms - 411.09ms | unsure 🔍 -3% - +1% -13.34ms - +4.18ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 546 kB | 2201.95ms - 2225.65ms | - | unsure 🔍 -1% - +1% -23.51ms - +11.59ms |
| branch | 547 kB | 2206.81ms - 2232.71ms | unsure 🔍 -1% - +1% -11.59ms - +23.51ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 247 kB | 110.58ms - 128.02ms | - | unsure 🔍 -3% - +17% -3.31ms - +18.75ms |
| branch | 247 kB | 104.84ms - 118.32ms | unsure 🔍 -15% - +2% -18.75ms - +3.31ms |
- |
Summary of Changes Impacting Failures
The blue of the progress circle changed in dark and darkest themes. Here is a visual swatch reference (from left to right, swatches are spectrum dark, spectrum darkest, and spectrum light/lightest):
Track thickness has changed on large progress circles, medium theme, from 5px to 4px. This does not appear to be impacting the failures.
The gray track color is unchanged.
The following are my assessments of the failures.
Failure pattern 1: Expected
classic-dark-large-ltr — classic-dark-large-rtl — express-dark-large-ltr — express-dark-large-rtl — classic-dark-medium-ltr — classic-dark-medium-rtl — express-dark-medium-ltr — express-dark-medium-rtl —
Assessment: Failures expected due to blue color shift from rgb(84, 163, 246) to rgb(114, 183, 249) Visual diff confirms (similar visual for all 8 failures).
Failure pattern 2: Expected
classic-darkest-large-ltr — classic-darkest-large-rtl — express-darkest-large-ltr — express-darkest-large-rtl — classic-darkest-medium-ltr — classic-darkest-medium-rtl — express-darkest-medium-ltr — express-darkest-medium-rtl —
Assessment: Failures expected due to blue color shift from rgb(64, 150, 243) to rgb(94, 170, 247) Visual diff confirms (similar visual for all 8 failures).
Failure pattern 3: Unexpected
classic-light-medium-ltr — classic-light-medium-rtl — express-light-medium-ltr — express-light-medium-rtl — classic-light-large-ltr — classic-light-large-rtl — express-light-large-ltr — express-light-large-rtl — express-lightest-medium-ltr — express-lightest-medium-rtl — express-lightest-large-ltr — express-lightest-large-rtl —
Assessment: Unexpected results.
- This appears to be comparing the "Over Background" variant at https://opensource.adobe.com/spectrum-css/progresscircle.html with the default/standard appearance of progress circle. Should this be compared instead with the new "Static White" variant? If so, I'm not sure why this failure is only showing up on the light/lightest themes.
- If this test is meant to compare "Over Background" and "Static White", then the test will still fail due to a change in transparency from 20% opacity to 25% opacity.
These visuals appear consistent for all 12 of these failures.
Failure pattern 4: Unexpected
classic-lightest-large-ltr — classic-lightest-large-rtl — classic-lightest-medium-ltr — classic-lightest-medium-rtl —
Assessment: Failures NOT expected. Diff cannot be seen in the visuals - colors appear the same to me. The diff shows a stark difference, however. Not sure how to address this - please advise? Visual for reference:
Failure pattern 5: Expected, needs approval (Approved)
hcm-visual —
Failure expected, but please review this diff to make sure. Previously, the progress bar could not be read because the track and the fill were the same color. Visual:
I changed the fill to a contrasting keyword so it can be seen:
Update: James Nurthen recommended a change to WHCM which has been made and approved. The new VRT reflects this change:
@pfulton To complete this PR, may I please follow up on these issues described in my previous comment above?
Failure pattern 3: Unexpected Question: Is it safe to assume this failure is expected because it is comparing apples to oranges?
Failure pattern 4: Unexpected Question: Is it safe to assume this is a false failure?
Failure pattern 5: Expected, needs approval Question: Is my change to WHCM acceptable?
Thank you!
@pfulton To complete this PR, may I please follow up on these issues described in my previous comment above?
Failure pattern 3: Unexpected Question: Is it safe to assume this failure is expected because it is comparing apples to oranges?
Failure pattern 4: Unexpected Question: Is it safe to assume this is a false failure?
Failure pattern 5: Expected, needs approval Question: Is my change to WHCM acceptable?
Thank you!
- Failure pattern 3: Yeah, I think it's safe to assume that.
- Failure pattern 4: It looks like it might be a false failure - I wonder what happened on this one. Maybe @Westbrook can advise.
- Failure pattern 5: I think this looks OK to me. As to whether this is an acceptable a11y change: I'm definitely not the best judge there. We could ask accessibility in your original CSS PR to weigh in, though. I'll follow-up with you in Slack about this.
I think this is really close. I'll rebase this branch against the latest stuff in main and push up the changes.
Failure Pattern 5 (WHCM) was reviewed with James Nurthen and a revision was made to match his recommendation.
I've updated this to use the graduated version of the dependency. This is now ready for a full review.
