spectrum-web-components
spectrum-web-components copied to clipboard
adobe
refactor(progress-bar): use core tokens
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 | 37.02ms - 37.57ms | - | faster ✔ 1% - 4% 0.36ms - 1.46ms |
| branch | 279 kB | 37.72ms - 38.69ms | slower ❌ 1% - 4% 0.36ms - 1.46ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 631 kB | 247.22ms - 252.33ms | - | unsure 🔍 -2% - +1% -3.82ms - +2.81ms |
| branch | 644 kB | 248.16ms - 252.40ms | unsure 🔍 -1% - +2% -2.81ms - +3.82ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 396 kB | 97.35ms - 99.41ms | - | unsure 🔍 -3% - +0% -3.11ms - +0.15ms |
| branch | 430 kB | 98.59ms - 101.12ms | unsure 🔍 -0% - +3% -0.15ms - +3.11ms |
- |
illustrated-message permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 293 kB | 44.57ms - 45.84ms | - | faster ✔ 2% - 7% 0.78ms - 3.35ms |
| branch | 328 kB | 46.15ms - 48.39ms | slower ❌ 2% - 7% 0.78ms - 3.35ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 312 kB | 270.38ms - 276.20ms | - | unsure 🔍 -0% - +3% -0.72ms - +8.27ms |
| branch | 346 kB | 266.08ms - 272.94ms | unsure 🔍 -3% - +0% -8.27ms - +0.72ms |
- |
meter permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 278 kB | 72.92ms - 74.46ms | - | faster ✔ 1% - 4% 0.81ms - 2.96ms |
| branch | 314 kB | 74.82ms - 76.33ms | slower ❌ 1% - 4% 0.81ms - 2.96ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 355 kB | 86.49ms - 88.31ms | - | unsure 🔍 -0% - +5% +0.02ms - +4.28ms |
| branch | 368 kB | 83.33ms - 87.18ms | faster ✔ 0% - 5% 0.02ms - 4.28ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 463 kB | 806.33ms - 828.55ms | - | unsure 🔍 -2% - +2% -19.06ms - +13.22ms |
| branch | 498 kB | 808.66ms - 832.06ms | unsure 🔍 -2% - +2% -13.22ms - +19.06ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 241 kB | 34.25ms - 34.96ms | - | faster ✔ 1% - 4% 0.46ms - 1.37ms |
| branch | 275 kB | 35.23ms - 35.80ms | slower ❌ 1% - 4% 0.46ms - 1.37ms |
- |
progress-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 276 kB | 57.34ms - 59.08ms | - | faster ✔ 2% - 5% 1.13ms - 3.21ms |
| branch | 312 kB | 59.81ms - 60.96ms | slower ❌ 2% - 6% 1.13ms - 3.21ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 345 kB | 170.60ms - 175.34ms | - | unsure 🔍 -1% - +2% -2.47ms - +3.89ms |
| branch | 380 kB | 170.14ms - 174.38ms | unsure 🔍 -2% - +1% -3.89ms - +2.47ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 563 kB | 2035.60ms - 2039.69ms | - | unsure 🔍 -0% - +0% -1.10ms - +4.52ms |
| branch | 576 kB | 2034.01ms - 2037.86ms | unsure 🔍 -0% - +0% -4.52ms - +1.10ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 256 kB | 33.79ms - 34.71ms | - | unsure 🔍 -4% - +0% -1.27ms - +0.07ms |
| branch | 291 kB | 34.36ms - 35.34ms | unsure 🔍 -0% - +4% -0.07ms - +1.27ms |
- |
Firefox
action-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 244 kB | 87.85ms - 92.99ms | - | faster ✔ 3% - 12% 3.10ms - 12.34ms |
| branch | 279 kB | 94.30ms - 101.98ms | slower ❌ 3% - 14% 3.10ms - 12.34ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 631 kB | 376.60ms - 384.48ms | - | unsure 🔍 -4% - +0% -14.73ms - +0.85ms |
| branch | 644 kB | 380.76ms - 394.20ms | unsure 🔍 -0% - +4% -0.85ms - +14.73ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 396 kB | 154.48ms - 161.84ms | - | unsure 🔍 -7% - +0% -10.94ms - +0.14ms |
| branch | 430 kB | 159.41ms - 167.71ms | unsure 🔍 -0% - +7% -0.14ms - +10.94ms |
- |
illustrated-message permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 293 kB | 74.15ms - 77.33ms | - | faster ✔ 13% - 23% 10.63ms - 21.93ms |
| branch | 328 kB | 86.60ms - 97.44ms | slower ❌ 14% - 29% 10.63ms - 21.93ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 312 kB | 489.01ms - 497.19ms | - | faster ✔ 2% - 4% 8.46ms - 22.10ms |
| branch | 346 kB | 502.92ms - 513.84ms | slower ❌ 2% - 4% 8.46ms - 22.10ms |
- |
meter permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 278 kB | 147.40ms - 153.08ms | - | faster ✔ 4% - 10% 6.64ms - 15.60ms |
| branch | 314 kB | 157.90ms - 164.82ms | slower ❌ 4% - 10% 6.64ms - 15.60ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 355 kB | 152.89ms - 160.23ms | - | unsure 🔍 -1% - +5% -1.34ms - +8.06ms |
| branch | 368 kB | 150.26ms - 156.14ms | unsure 🔍 -5% - +1% -8.06ms - +1.34ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 463 kB | 1016.00ms - 1026.28ms | - | unsure 🔍 -1% - +1% -6.93ms - +6.65ms |
| branch | 498 kB | 1016.84ms - 1025.72ms | unsure 🔍 -1% - +1% -6.65ms - +6.93ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 241 kB | 69.84ms - 82.64ms | - | faster ✔ 2% - 22% 1.25ms - 20.11ms |
| branch | 275 kB | 79.99ms - 93.85ms | slower ❌ 1% - 27% 1.25ms - 20.11ms |
- |
progress-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 276 kB | 120.46ms - 124.70ms | - | faster ✔ 3% - 7% 3.71ms - 9.73ms |
| branch | 312 kB | 127.16ms - 131.44ms | slower ❌ 3% - 8% 3.71ms - 9.73ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 345 kB | 315.44ms - 324.04ms | - | unsure 🔍 -3% - +0% -10.56ms - +1.04ms |
| branch | 380 kB | 320.61ms - 328.39ms | unsure 🔍 -0% - +3% -1.04ms - +10.56ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 563 kB | 2141.92ms - 2149.64ms | - | unsure 🔍 -0% - +0% -3.45ms - +8.05ms |
| branch | 576 kB | 2139.22ms - 2147.74ms | unsure 🔍 -0% - +0% -8.05ms - +3.45ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 256 kB | 76.23ms - 85.77ms | - | unsure 🔍 -12% - +5% -9.88ms - +4.52ms |
| branch | 291 kB | 78.29ms - 89.07ms | unsure 🔍 -6% - +12% -4.52ms - +9.88ms |
- |
@pfulton @Westbrook I went through the VRTs for Progress Bar and noted the differences in the PR description. The Over background variant needs to be updated and replaced with the Static White variant.
I think this is where it has to be updated, but I wanted to check that this is the correct place to update before I make any changes: https://github.com/adobe/spectrum-web-components/blob/main/packages/progress-bar/README.md#over-background.
@Westbrook this is now a breaking change for Meter, as we only support from now on sizes S and L for Meter.
@yosevu also updated Web Components for the t-shirt sizing: https://localhost:8000/?path=/story/meter-sizes--s https://localhost:8000/?path=/story/meter-sizes--l https://github.com/adobe/spectrum-web-components/pull/2585 refactor(progress-bar): use core tokens #2585
@Westbrook could you please review this update? We keep getting out-dated with other updates and it might make sense to complete this one when you think it's ready.
I'll get into this first thing tomorrow. Looks pretty good, but will want to apply to newer static="black/white" approach here to match it to post-Core Token implementations.
@pfulton was this intended for a full release as well? I'm not seeing it either.
