spectrum-web-components
spectrum-web-components copied to clipboard
adobe
refactor(divider): use core tokens
This updates the Divider component to use core tokens
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-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 608 kB | 337.81ms - 343.75ms | - | unsure 🔍 -2% - +1% -6.63ms - +2.13ms |
| branch | 610 kB | 339.81ms - 346.24ms | unsure 🔍 -1% - +2% -2.13ms - +6.63ms |
- |
dialog permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 317 kB | 114.15ms - 117.88ms | - | unsure 🔍 -3% - +1% -3.58ms - +1.53ms |
| branch | 319 kB | 115.30ms - 118.78ms | unsure 🔍 -1% - +3% -1.53ms - +3.58ms |
- |
divider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 237 kB | 26.76ms - 27.75ms | - | unsure 🔍 -4% - +2% -1.25ms - +0.67ms |
| branch | 239 kB | 26.72ms - 28.36ms | unsure 🔍 -2% - +5% -0.67ms - +1.25ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 309 kB | 377.88ms - 385.18ms | - | unsure 🔍 -1% - +2% -2.57ms - +7.26ms |
| branch | 311 kB | 375.90ms - 382.48ms | unsure 🔍 -2% - +1% -7.26ms - +2.57ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 454 kB | 1206.38ms - 1222.00ms | - | unsure 🔍 -2% - +1% -21.58ms - +10.88ms |
| branch | 454 kB | 1205.31ms - 1233.77ms | unsure 🔍 -1% - +2% -10.88ms - +21.58ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 546 kB | 2050.07ms - 2053.75ms | - | unsure 🔍 -0% - +0% -2.65ms - +3.98ms |
| branch | 547 kB | 2048.49ms - 2054.01ms | unsure 🔍 -0% - +0% -3.98ms - +2.65ms |
- |
Firefox
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 608 kB | 590.45ms - 607.55ms | - | unsure 🔍 -2% - +3% -9.50ms - +16.30ms |
| branch | 610 kB | 585.93ms - 605.27ms | unsure 🔍 -3% - +2% -16.30ms - +9.50ms |
- |
dialog permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 317 kB | 206.53ms - 217.51ms | - | unsure 🔍 -4% - +3% -9.17ms - +5.69ms |
| branch | 319 kB | 208.75ms - 218.77ms | unsure 🔍 -3% - +4% -5.69ms - +9.17ms |
- |
divider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 237 kB | 93.49ms - 108.23ms | - | unsure 🔍 -10% - +10% -10.55ms - +10.19ms |
| branch | 239 kB | 93.74ms - 108.34ms | unsure 🔍 -10% - +10% -10.19ms - +10.55ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 309 kB | 724.90ms - 738.54ms | - | unsure 🔍 -2% - +1% -15.46ms - +5.42ms |
| branch | 311 kB | 728.84ms - 744.64ms | unsure 🔍 -1% - +2% -5.42ms - +15.46ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 454 kB | 1777.56ms - 1806.16ms | - | unsure 🔍 -1% - +1% -18.95ms - +18.91ms |
| branch | 454 kB | 1779.47ms - 1804.29ms | unsure 🔍 -1% - +1% -18.91ms - +18.95ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 546 kB | 2181.51ms - 2224.17ms | - | unsure 🔍 -1% - +1% -31.28ms - +24.64ms |
| branch | 547 kB | 2188.08ms - 2224.24ms | unsure 🔍 -1% - +1% -24.64ms - +31.28ms |
- |
This is my assessment of the VRT failures.
Failure Pattern 1: Expected
classic-dark-large-ltr — classic-dark-large-rtl — express-dark-large-ltr — express-dark-large-rtl — classic-dark-large-ltr — classic-dark-large-rtl — express-dark-large-ltr — express-dark-large-rtl — classic-light-large-ltr — classic-light-large-rtl — express-light-large-ltr — express-light-large-rtl — express-lightest-large-ltr — express-lightest-large-rtl —
Assessment: Large divider has changed thickness from 5px to 4px on Large theme.
Failure Pattern 2: Unexpected
classic-lightest-large-ltr — classic-lightest-large-rtl — classic-lightest-medium-ltr — classic-lightest-medium-rtl —
Zoomed in:
Assessment: This looks like a false fail to me.
Failure Pattern 3: Expected, but please review
hcm-visual —
Assessment: Previously there was no WHCM fallback to ensure visibility of the divider.
@pfulton following up on these VRTs to make sure I'm not holding this up.
Failure Pattern 2: Unexpected Question: Is it safe to assume this is a false failure?
Failure Pattern 3: Expected, but please review Question: Is my change to WHCM acceptable?
Thanks!
The WHCM changes have been refined and approved by accessibility. I've merged in the CSS PR for this, graduated the beta, and updated the PR here to use the full release. This is now ready for review (and merge)