spectrum-web-components
spectrum-web-components copied to clipboard
Published
20 hours ago •
adobe
adobe
refactor(checkbox): use core tokens
trafficstars
This adds a beta version of the migrated-to-core-tokens Checkbox component.
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 | 32.48ms - 32.87ms | - | unsure 🔍 -1% - +1% -0.17ms - +0.37ms |
| branch | 244 kB | 32.39ms - 32.75ms | unsure 🔍 -1% - +1% -0.37ms - +0.17ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 608 kB | 207.91ms - 209.26ms | - | unsure 🔍 -1% - +0% -1.84ms - +0.36ms |
| branch | 609 kB | 208.45ms - 210.19ms | unsure 🔍 -0% - +1% -0.36ms - +1.84ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 391 kB | 84.14ms - 85.40ms | - | unsure 🔍 -1% - +1% -0.93ms - +0.69ms |
| branch | 392 kB | 84.38ms - 85.40ms | unsure 🔍 -1% - +1% -0.69ms - +0.93ms |
- |
checkbox permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 294 kB | 58.29ms - 58.79ms | - | faster ✔ 11% - 12% 7.08ms - 7.69ms |
| branch | 295 kB | 65.75ms - 66.10ms | slower ❌ 12% - 13% 7.08ms - 7.69ms |
- |
illustrated-message permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 293 kB | 39.64ms - 39.83ms | - | unsure 🔍 -1% - +1% -0.42ms - +0.34ms |
| branch | 293 kB | 39.41ms - 40.15ms | unsure 🔍 -1% - +1% -0.34ms - +0.42ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 309 kB | 237.54ms - 243.17ms | - | unsure 🔍 -1% - +2% -1.41ms - +4.85ms |
| branch | 309 kB | 237.27ms - 240.00ms | unsure 🔍 -2% - +1% -4.85ms - +1.41ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 347 kB | 71.79ms - 72.27ms | - | unsure 🔍 -1% - +0% -0.88ms - +0.08ms |
| branch | 348 kB | 72.01ms - 72.84ms | unsure 🔍 -0% - +1% -0.08ms - +0.88ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 454 kB | 750.59ms - 760.98ms | - | unsure 🔍 -2% - +0% -11.97ms - +3.61ms |
| branch | 454 kB | 754.17ms - 765.77ms | unsure 🔍 -0% - +2% -3.61ms - +11.97ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 241 kB | 29.96ms - 30.16ms | - | unsure 🔍 -1% - +0% -0.23ms - +0.11ms |
| branch | 241 kB | 29.99ms - 30.26ms | unsure 🔍 -0% - +1% -0.11ms - +0.23ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 341 kB | 142.00ms - 143.80ms | - | unsure 🔍 -1% - +1% -1.54ms - +1.13ms |
| branch | 342 kB | 142.12ms - 144.09ms | unsure 🔍 -1% - +1% -1.13ms - +1.54ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 546 kB | 2026.67ms - 2031.00ms | - | unsure 🔍 -0% - +0% -2.89ms - +2.03ms |
| branch | 547 kB | 2028.09ms - 2030.44ms | unsure 🔍 -0% - +0% -2.03ms - +2.89ms |
- |
switch permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 263 kB | 34.47ms - 34.68ms | - | faster ✔ 0% - 1% 0.01ms - 0.41ms |
| branch | 263 kB | 34.61ms - 34.95ms | slower ❌ 0% - 1% 0.01ms - 0.41ms |
- |
table permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 410 kB | 435.95ms - 439.97ms | - | faster ✔ 4% - 5% 19.36ms - 24.92ms |
| branch | 411 kB | 458.17ms - 462.01ms | slower ❌ 4% - 6% 19.36ms - 24.92ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 247 kB | 30.04ms - 30.22ms | - | unsure 🔍 -0% - +0% -0.13ms - +0.14ms |
| branch | 247 kB | 30.03ms - 30.22ms | unsure 🔍 -0% - +0% -0.14ms - +0.13ms |
- |
Firefox
action-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 244 kB | 138.90ms - 152.62ms | - | unsure 🔍 -5% - +10% -6.63ms - +14.03ms |
| branch | 244 kB | 134.34ms - 149.78ms | unsure 🔍 -10% - +4% -14.03ms - +6.63ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 608 kB | 595.46ms - 614.74ms | - | unsure 🔍 -2% - +3% -12.07ms - +17.03ms |
| branch | 609 kB | 591.72ms - 613.52ms | unsure 🔍 -3% - +2% -17.03ms - +12.07ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 391 kB | 231.84ms - 243.88ms | - | unsure 🔍 -6% - +1% -15.60ms - +2.52ms |
| branch | 392 kB | 237.62ms - 251.18ms | unsure 🔍 -1% - +7% -2.52ms - +15.60ms |
- |
checkbox permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 294 kB | 244.37ms - 259.35ms | - | faster ✔ 4% - 10% 9.58ms - 28.06ms |
| branch | 295 kB | 265.28ms - 276.08ms | slower ❌ 4% - 11% 9.58ms - 28.06ms |
- |
illustrated-message permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 293 kB | 121.44ms - 139.72ms | - | unsure 🔍 -10% - +8% -13.18ms - +10.74ms |
| branch | 293 kB | 124.08ms - 139.52ms | unsure 🔍 -8% - +10% -10.74ms - +13.18ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 309 kB | 733.37ms - 751.27ms | - | unsure 🔍 -1% - +2% -10.48ms - +15.16ms |
| branch | 309 kB | 730.81ms - 749.15ms | unsure 🔍 -2% - +1% -15.16ms - +10.48ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 347 kB | 249.77ms - 267.59ms | - | unsure 🔍 -6% - +3% -15.60ms - +7.96ms |
| branch | 348 kB | 254.80ms - 270.20ms | unsure 🔍 -3% - +6% -7.96ms - +15.60ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 454 kB | 1855.23ms - 1877.17ms | - | faster ✔ 0% - 2% 2.11ms - 30.85ms |
| branch | 454 kB | 1873.40ms - 1891.96ms | slower ❌ 0% - 2% 2.11ms - 30.85ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 241 kB | 109.51ms - 130.17ms | - | faster ✔ 6% - 27% 7.67ms - 39.65ms |
| branch | 241 kB | 131.30ms - 155.70ms | slower ❌ 5% - 34% 7.67ms - 39.65ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 341 kB | 433.61ms - 449.83ms | - | unsure 🔍 -2% - +3% -6.74ms - +14.18ms |
| branch | 342 kB | 431.39ms - 444.61ms | unsure 🔍 -3% - +2% -14.18ms - +6.74ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 546 kB | 2183.43ms - 2201.09ms | - | unsure 🔍 -1% - +1% -13.47ms - +15.43ms |
| branch | 547 kB | 2179.85ms - 2202.71ms | unsure 🔍 -1% - +1% -15.43ms - +13.47ms |
- |
switch permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 263 kB | 141.39ms - 158.53ms | - | unsure 🔍 -4% - +12% -4.95ms - +17.35ms |
| branch | 263 kB | 136.63ms - 150.89ms | unsure 🔍 -11% - +3% -17.35ms - +4.95ms |
- |
table permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 410 kB | 1430.22ms - 1451.70ms | - | faster ✔ 4% - 6% 66.77ms - 95.75ms |
| branch | 411 kB | 1512.49ms - 1531.95ms | slower ❌ 5% - 7% 66.77ms - 95.75ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 247 kB | 116.70ms - 129.90ms | - | unsure 🔍 -6% - +9% -7.65ms - +10.57ms |
| branch | 247 kB | 115.57ms - 128.11ms | unsure 🔍 -9% - +6% -10.57ms - +7.65ms |
- |
I found the issue and we'll need to make a fix on our side. Feel free to close this if you'd like and I can open a new PR when we're ready.
@Westbrook I think this should be fixed with the latest beta, but I'm not sure that the VRT results have refreshed. It looks like Circle re-ran them, but (maybe) the bot comment above is linking to older results?
This appears to still have the extra :focus rule in the CSS? Did we get to the root of removing that? Let me know if I can support getting this moving again!
You're correct. We haven't been able to circle back to this one just yet. I'll let you know when we get an updated beta out for it.
This is looking much, much better now that we've addressed the focus issue that we were seeing in the previous beta releases. I think I'm going to merge in the CSS PR and graduate the beta, @Westbrook
All right, I've updated the package.json to use the graduated release. This is ready for review.