spectrum-web-components
spectrum-web-components copied to clipboard
Published
20 hours ago •
adobe
adobe
refactor(link): 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 | 248 kB | 31.82ms - 31.94ms | - | unsure 🔍 -2% - +1% -0.70ms - +0.22ms |
| branch | 247 kB | 31.67ms - 32.57ms | unsure 🔍 -1% - +2% -0.22ms - +0.70ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 616 kB | 192.63ms - 194.78ms | - | unsure 🔍 -1% - +1% -0.98ms - +2.13ms |
| branch | 615 kB | 192.00ms - 194.26ms | unsure 🔍 -1% - +1% -2.13ms - +0.98ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 396 kB | 78.58ms - 79.58ms | - | unsure 🔍 -1% - +1% -0.73ms - +0.99ms |
| branch | 395 kB | 78.24ms - 79.66ms | unsure 🔍 -1% - +1% -0.99ms - +0.73ms |
- |
illustrated-message permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 297 kB | 38.54ms - 38.70ms | - | unsure 🔍 -0% - +0% -0.11ms - +0.16ms |
| branch | 296 kB | 38.49ms - 38.70ms | unsure 🔍 -0% - +0% -0.16ms - +0.11ms |
- |
link permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 262 kB | 25.60ms - 25.80ms | - | slower ❌ 1% - 2% 0.26ms - 0.52ms |
| branch | 262 kB | 25.22ms - 25.39ms | faster ✔ 1% - 2% 0.26ms - 0.52ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 315 kB | 221.50ms - 224.18ms | - | unsure 🔍 -1% - +1% -2.76ms - +1.59ms |
| branch | 314 kB | 221.71ms - 225.13ms | unsure 🔍 -1% - +1% -1.59ms - +2.76ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 351 kB | 67.89ms - 68.20ms | - | unsure 🔍 -0% - +0% -0.30ms - +0.15ms |
| branch | 350 kB | 67.95ms - 68.29ms | unsure 🔍 -0% - +0% -0.15ms - +0.30ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 460 kB | 712.94ms - 742.64ms | - | unsure 🔍 -3% - +2% -24.16ms - +15.09ms |
| branch | 459 kB | 719.49ms - 745.16ms | unsure 🔍 -2% - +3% -15.09ms - +24.16ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 245 kB | 28.96ms - 29.07ms | - | unsure 🔍 -1% - +0% -0.32ms - +0.04ms |
| branch | 243 kB | 28.99ms - 29.33ms | unsure 🔍 -0% - +1% -0.04ms - +0.32ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 345 kB | 130.78ms - 131.96ms | - | unsure 🔍 -1% - +0% -1.95ms - +0.17ms |
| branch | 344 kB | 131.38ms - 133.14ms | unsure 🔍 -0% - +1% -0.17ms - +1.95ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 552 kB | 2027.69ms - 2030.78ms | - | unsure 🔍 -0% - +0% -0.84ms - +3.38ms |
| branch | 551 kB | 2026.53ms - 2029.40ms | unsure 🔍 -0% - +0% -3.38ms - +0.84ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 251 kB | 28.50ms - 28.64ms | - | unsure 🔍 -0% - +1% -0.02ms - +0.19ms |
| branch | 250 kB | 28.41ms - 28.56ms | unsure 🔍 -1% - +0% -0.19ms - +0.02ms |
- |
Firefox
action-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 248 kB | 137.90ms - 153.62ms | - | unsure 🔍 -8% - +7% -12.06ms - +10.10ms |
| branch | 247 kB | 138.93ms - 154.55ms | unsure 🔍 -7% - +8% -10.10ms - +12.06ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 616 kB | 637.69ms - 655.59ms | - | unsure 🔍 -1% - +4% -3.39ms - +23.03ms |
| branch | 615 kB | 627.11ms - 646.53ms | unsure 🔍 -4% - +1% -23.03ms - +3.39ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 396 kB | 243.87ms - 255.17ms | - | unsure 🔍 -3% - +2% -8.44ms - +6.28ms |
| branch | 395 kB | 245.89ms - 255.31ms | unsure 🔍 -3% - +3% -6.28ms - +8.44ms |
- |
illustrated-message permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 297 kB | 125.32ms - 137.16ms | - | unsure 🔍 -8% - +4% -11.40ms - +5.36ms |
| branch | 296 kB | 128.33ms - 140.19ms | unsure 🔍 -4% - +9% -5.36ms - +11.40ms |
- |
link permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 262 kB | 77.59ms - 87.89ms | - | faster ✔ 15% - 30% 14.70ms - 33.06ms |
| branch | 262 kB | 99.03ms - 114.21ms | slower ❌ 17% - 41% 14.70ms - 33.06ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 315 kB | 763.68ms - 782.80ms | - | unsure 🔍 -3% - +1% -23.03ms - +5.31ms |
| branch | 314 kB | 771.64ms - 792.56ms | unsure 🔍 -1% - +3% -5.31ms - +23.03ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 351 kB | 261.54ms - 271.78ms | - | unsure 🔍 -5% - +1% -14.53ms - +1.97ms |
| branch | 350 kB | 266.47ms - 279.41ms | unsure 🔍 -1% - +5% -1.97ms - +14.53ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 460 kB | 1950.67ms - 2018.77ms | - | unsure 🔍 -4% - +0% -85.17ms - +3.37ms |
| branch | 459 kB | 1997.33ms - 2053.91ms | unsure 🔍 -0% - +4% -3.37ms - +85.17ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 245 kB | 118.22ms - 138.14ms | - | unsure 🔍 -11% - +11% -14.73ms - +13.65ms |
| branch | 243 kB | 118.61ms - 138.83ms | unsure 🔍 -11% - +12% -13.65ms - +14.73ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 345 kB | 448.82ms - 462.10ms | - | unsure 🔍 -0% - +3% -1.49ms - +15.41ms |
| branch | 344 kB | 443.27ms - 453.73ms | unsure 🔍 -3% - +0% -15.41ms - +1.49ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 552 kB | 2194.38ms - 2220.58ms | - | unsure 🔍 -1% - +0% -21.22ms - +10.38ms |
| branch | 551 kB | 2204.06ms - 2221.74ms | unsure 🔍 -0% - +1% -10.38ms - +21.22ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 251 kB | 121.49ms - 131.43ms | - | unsure 🔍 -9% - +3% -11.71ms - +4.15ms |
| branch | 250 kB | 124.06ms - 136.42ms | unsure 🔍 -3% - +9% -4.15ms - +11.71ms |
- |
Hi @pfulton and @Westbrook, it looks like the changes that need to be made are to the variants on the documentation site. Should I work on updating these?
- Remove T-Shirt Sizes
- Remove Over Background
- Remove Over Background - Quiet
- Add Static White
- Add Static White - Quiet
- Add Static Black
- Add Static Black - Quiet
I'd like to add static="white/black" as we'll be changing the implementation of this across elements as part of the Core Tokens breaks, which means the available implementations are not worth repeating.
Are t-shirt sizes for this patterns really being removed?
@Westbrook yes, that's correct. After double-checking with design, they said "links should be whichever size the text is defined as"
@pfulton I'm not immediately seeing a full release of this CSS package. Has it gone out?