spectrum-web-components
spectrum-web-components copied to clipboard
adobe
refactor(status-light): use core tokens
Adds a beta version of the new StatusLight component.
Uses beta release, hold for full release.
Description
All of the VRT failures for this PR are due to the same slight shift in position in the Color variant where they are listed. Since this is specific to the list context and the tokens are correct, I think this type of change can be expected.
The VRT analysis below is based on 9 failures found running the tests locally on https://github.com/adobe/spectrum-css/pull/1495 in spectrum-css.
Expected Changes
Most changes are due to changing the order of the variants (Info after Accent) and removing the Disabled variant.
The other changes are expected color or spacing changes due to the updated tokens.
Sizing Variant
- Diff: statuslight-light-medium-default_0_spectrum-CSSExample-example.png
- Changes: Spacing change due to new tokens
Wrapping Variant
- File: statuslight-light-medium-default_1_spectrum-CSSExample-example__n1.png
- Diff: Color change due to new tokens
Colors Variant
- File: statuslight-light-medium-default_2_spectrum-CSSExample-example__n2.png
- Diff: Color change due to new tokens
Neutral Variant
- File: statuslight-light-medium-default_3_spectrum-CSSExample-example__n3.png
- Diff: Spacing change due to new tokens
Accent Variant
- File: statuslight-light-medium-default_4_spectrum-CSSExample-example__n4.png
- Diff: Position change in list
Info Variant
- File: statuslight-light-medium-default_5_spectrum-CSSExample-example__n5.png
- Diff: Position change in list
Positive Variant
- File: statuslight-light-medium-default_6_spectrum-CSSExample-example__n6.png
- Diff: Position change in list
Notice Variant
- File: statuslight-light-medium-default_7_spectrum-CSSExample-example__n7.png
- Diff: Position change in list
Negative Variant
- File: statuslight-light-medium-default_8_spectrum-CSSExample-example__n8.png
- Diff: Position change in list
Unexpected Changes
None.
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 | 233 kB | 33.20ms - 34.35ms | - | unsure 🔍 -2% - +2% -0.53ms - +0.64ms |
| branch | 244 kB | 33.59ms - 33.85ms | unsure 🔍 -2% - +2% -0.64ms - +0.53ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 595 kB | 215.91ms - 218.01ms | - | faster ✔ 1% - 2% 1.25ms - 4.31ms |
| branch | 607 kB | 218.63ms - 220.86ms | slower ❌ 1% - 2% 1.25ms - 4.31ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 379 kB | 97.45ms - 98.36ms | - | unsure 🔍 -2% - +0% -2.25ms - +0.25ms |
| branch | 390 kB | 97.74ms - 100.07ms | unsure 🔍 -0% - +2% -0.25ms - +2.25ms |
- |
illustrated-message permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 282 kB | 48.12ms - 48.63ms | - | unsure 🔍 -1% - +0% -0.68ms - +0.07ms |
| branch | 293 kB | 48.41ms - 48.95ms | unsure 🔍 -0% - +1% -0.07ms - +0.68ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 297 kB | 248.04ms - 251.18ms | - | unsure 🔍 -1% - +0% -3.36ms - +0.54ms |
| branch | 309 kB | 249.87ms - 252.17ms | unsure 🔍 -0% - +1% -0.54ms - +3.36ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 336 kB | 80.32ms - 81.24ms | - | unsure 🔍 -1% - +0% -0.97ms - +0.22ms |
| branch | 347 kB | 80.78ms - 81.54ms | unsure 🔍 -0% - +1% -0.22ms - +0.97ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 442 kB | 769.35ms - 793.56ms | - | unsure 🔍 -2% - +2% -12.69ms - +17.60ms |
| branch | 453 kB | 769.90ms - 788.10ms | unsure 🔍 -2% - +2% -17.60ms - +12.69ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 230 kB | 34.76ms - 35.02ms | - | faster ✔ 1% - 2% 0.19ms - 0.61ms |
| branch | 241 kB | 35.13ms - 35.45ms | slower ❌ 1% - 2% 0.19ms - 0.61ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 330 kB | 150.50ms - 151.88ms | - | unsure 🔍 -1% - +0% -1.66ms - +0.38ms |
| branch | 341 kB | 151.08ms - 152.57ms | unsure 🔍 -0% - +1% -0.38ms - +1.66ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 534 kB | 1952.66ms - 1955.12ms | - | unsure 🔍 -0% - -0% -3.65ms - -0.00ms |
| branch | 546 kB | 1954.37ms - 1957.06ms | unsure 🔍 +0% - +0% +0.00ms - +3.65ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 236 kB | 37.16ms - 37.45ms | - | faster ✔ 0% - 2% 0.04ms - 0.62ms |
| branch | 247 kB | 37.38ms - 37.89ms | slower ❌ 0% - 2% 0.04ms - 0.62ms |
- |
Firefox
action-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 233 kB | 132.68ms - 146.40ms | - | unsure 🔍 -8% - +7% -11.36ms - +9.20ms |
| branch | 244 kB | 132.96ms - 148.28ms | unsure 🔍 -7% - +8% -9.20ms - +11.36ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 595 kB | 565.30ms - 582.50ms | - | unsure 🔍 -4% - +1% -23.40ms - +4.96ms |
| branch | 607 kB | 571.85ms - 594.39ms | unsure 🔍 -1% - +4% -4.96ms - +23.40ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 379 kB | 234.41ms - 245.31ms | - | unsure 🔍 -7% - +1% -16.39ms - +1.95ms |
| branch | 390 kB | 239.70ms - 254.46ms | unsure 🔍 -1% - +7% -1.95ms - +16.39ms |
- |
illustrated-message permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 282 kB | 123.64ms - 138.16ms | - | unsure 🔍 -8% - +6% -10.25ms - +8.57ms |
| branch | 293 kB | 125.75ms - 137.73ms | unsure 🔍 -7% - +8% -8.57ms - +10.25ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 297 kB | 737.43ms - 760.65ms | - | faster ✔ 0% - 5% 3.13ms - 37.91ms |
| branch | 309 kB | 756.61ms - 782.51ms | slower ❌ 0% - 5% 3.13ms - 37.91ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 336 kB | 245.25ms - 259.51ms | - | unsure 🔍 -6% - +2% -14.83ms - +4.91ms |
| branch | 347 kB | 250.52ms - 264.16ms | unsure 🔍 -2% - +6% -4.91ms - +14.83ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 442 kB | 1712.78ms - 1764.94ms | - | unsure 🔍 -3% - +1% -51.93ms - +18.01ms |
| branch | 453 kB | 1732.53ms - 1779.11ms | unsure 🔍 -1% - +3% -18.01ms - +51.93ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 230 kB | 114.15ms - 134.81ms | - | unsure 🔍 -4% - +18% -4.48ms - +20.36ms |
| branch | 241 kB | 109.64ms - 123.44ms | unsure 🔍 -16% - +3% -20.36ms - +4.48ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 330 kB | 430.05ms - 442.99ms | - | unsure 🔍 -4% - +0% -17.11ms - +1.83ms |
| branch | 341 kB | 437.24ms - 451.08ms | unsure 🔍 -0% - +4% -1.83ms - +17.11ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 534 kB | 2113.42ms - 2133.78ms | - | unsure 🔍 -1% - +0% -26.68ms - +5.12ms |
| branch | 546 kB | 2122.17ms - 2146.59ms | unsure 🔍 -0% - +1% -5.12ms - +26.68ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 236 kB | 123.30ms - 135.62ms | - | unsure 🔍 -6% - +8% -6.99ms - +10.27ms |
| branch | 247 kB | 121.78ms - 133.86ms | unsure 🔍 -8% - +5% -10.27ms - +6.99ms |
- |
@yosevu Mind taking a look at this one?
The difference looks to be expected @pfulton since margin-inline-end, is 2px smaller using the updated design/tokens: https://github.com/adobe/spectrum-tokens/blob/beta/src/layout.json#L391
Should I be looking at the documentation site link at all?
It doesn't look like it has the latest variants. For example, I removed disabled and the example color variants don't are listed, but don't have colors.
Given @yosevu's comments above, I've merged this into Spectrum CSS main and released it:
@spectrum-css/[email protected]
This also uses @spectrum-css/[email protected], so we're good with the recent updating of the dependencies here.
If this is good on the CSS side, feel free to bump the dependency version and the Golden Images hash here, and move this out of draft.
