spectrum-web-components
spectrum-web-components copied to clipboard
Published
20 hours ago •
adobe
adobe
fix modal blink draft
trafficstars
Description
Prevents janky blink that happens the first time a modal overlay is opened over a non-modal overlay
Related issue(s)
- https://github.com/adobe/spectrum-web-components/issues/2599
Motivation and context
Several consumers have situations where a modal opens over a non-modal, leading to a weird UX.
How has this been tested?
- All current tests pass
- Open the new story that reproduces the situation
- Open both modals
- Confirm that there is no blink/flicker
Types of changes
- [X] 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
- [X] I have signed the Adobe Open Source CLA.
- [X] My code follows the code style of this project.
- [X] If my change required a change to the documentation, I have updated the documentation in this pull request.
- [X] I have read the CONTRIBUTING document.
- [X] I have added tests to cover my changes.
- [X] All new and existing tests passed.
- [X] 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.
I expect this to fail from the new VRT from the new story, but I'm pushing it up for a conversation around the test I modified.
@Westbrook is placement="none" important for this test? "none" isn't documented & I'm not sure why removing it allows this test to pass.
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 | 31.58ms - 31.89ms | - | unsure 🔍 -0% - +1% -0.15ms - +0.20ms |
| branch | 234 kB | 31.63ms - 31.79ms | unsure 🔍 -1% - +0% -0.20ms - +0.15ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 595 kB | 184.49ms - 185.56ms | - | faster ✔ 0% - 1% 0.33ms - 1.81ms |
| branch | 597 kB | 185.58ms - 186.60ms | slower ❌ 0% - 1% 0.33ms - 1.81ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 297 kB | 211.21ms - 212.76ms | - | unsure 🔍 -1% - +0% -1.14ms - +0.57ms |
| branch | 299 kB | 211.91ms - 212.63ms | unsure 🔍 -0% - +1% -0.57ms - +1.14ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 336 kB | 71.40ms - 71.92ms | - | unsure 🔍 -0% - +1% -0.20ms - +0.40ms |
| branch | 337 kB | 71.41ms - 71.72ms | unsure 🔍 -1% - +0% -0.40ms - +0.20ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 442 kB | 679.91ms - 697.03ms | - | faster ✔ 1% - 4% 3.98ms - 29.00ms |
| branch | 443 kB | 695.84ms - 714.09ms | slower ❌ 1% - 4% 3.98ms - 29.00ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 230 kB | 31.42ms - 31.56ms | - | unsure 🔍 -1% - +0% -0.16ms - +0.04ms |
| branch | 231 kB | 31.48ms - 31.63ms | unsure 🔍 -0% - +1% -0.04ms - +0.16ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 534 kB | 1946.62ms - 1949.65ms | - | unsure 🔍 -0% - +0% -0.35ms - +3.59ms |
| branch | 536 kB | 1945.26ms - 1947.78ms | unsure 🔍 -0% - +0% -3.59ms - +0.35ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 236 kB | 33.58ms - 33.70ms | - | unsure 🔍 -0% - +0% -0.12ms - +0.08ms |
| branch | 237 kB | 33.57ms - 33.74ms | unsure 🔍 -0% - +0% -0.08ms - +0.12ms |
- |
Firefox
action-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 233 kB | 122.26ms - 134.30ms | - | unsure 🔍 -2% - +10% -2.19ms - +12.47ms |
| branch | 234 kB | 118.96ms - 127.32ms | unsure 🔍 -10% - +2% -12.47ms - +2.19ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 595 kB | 446.08ms - 454.28ms | - | unsure 🔍 -0% - +2% -0.62ms - +10.34ms |
| branch | 597 kB | 441.68ms - 448.96ms | unsure 🔍 -2% - +0% -10.34ms - +0.62ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 297 kB | 597.76ms - 610.40ms | - | unsure 🔍 -1% - +2% -8.85ms - +13.53ms |
| branch | 299 kB | 592.51ms - 610.97ms | unsure 🔍 -2% - +1% -13.53ms - +8.85ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 336 kB | 197.13ms - 208.07ms | - | unsure 🔍 -7% - +1% -13.89ms - +2.41ms |
| branch | 337 kB | 202.30ms - 214.38ms | unsure 🔍 -1% - +7% -2.41ms - +13.89ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 442 kB | 1241.59ms - 1258.29ms | - | faster ✔ 0% - 2% 5.40ms - 30.20ms |
| branch | 443 kB | 1258.58ms - 1276.90ms | slower ❌ 0% - 2% 5.40ms - 30.20ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 230 kB | 114.69ms - 132.99ms | - | unsure 🔍 -14% - +4% -19.10ms - +5.02ms |
| branch | 231 kB | 123.03ms - 138.73ms | unsure 🔍 -4% - +16% -5.02ms - +19.10ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 534 kB | 2115.72ms - 2124.88ms | - | unsure 🔍 -1% - +0% -11.20ms - +4.08ms |
| branch | 536 kB | 2117.74ms - 2129.98ms | unsure 🔍 -0% - +1% -4.08ms - +11.20ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 236 kB | 90.68ms - 102.32ms | - | unsure 🔍 -9% - +7% -8.59ms - +6.39ms |
| branch | 237 kB | 92.89ms - 102.31ms | unsure 🔍 -7% - +9% -6.39ms - +8.59ms |
- |