spectrum-web-components
spectrum-web-components copied to clipboard
Published
20 hours ago •
adobe
adobe
refactor(overlay): move interaction management to a strategy pattern
Description
Refactor Overlay interactions into strategies. This could reduce the negatives in #3550 in that it duplicated so much brittle/nuanced code.
Related issue(s)
- refs #3549
- fixes #4088
How has this been tested?
- [ ] Test case 1
- Go here
- Test the actual interaction with each of the Overlay Element types
- See that they work the same as before
Types of changes
- [x] Refactor
Checklist
- [x] I have signed the Adobe Open Source CLA.
- [x] 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.
- [x] I have read the CONTRIBUTING document.
- [ ] I have added tests to cover my changes.
- [x] All new and existing tests passed.
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 | 489 kB | 70.68ms - 73.94ms | - | slower ❌ 0% - 6% 0.10ms - 4.01ms |
| branch | 474 kB | 69.17ms - 71.34ms | faster ✔ 0% - 5% 0.10ms - 4.01ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 655 kB | 164.01ms - 167.51ms | - | unsure 🔍 -3% - +0% -4.63ms - +0.77ms |
| branch | 633 kB | 165.64ms - 169.74ms | unsure 🔍 -0% - +3% -0.77ms - +4.63ms |
- |
combobox permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 706 kB | 37.96ms - 38.49ms | - | slower ❌ 1% - 3% 0.45ms - 1.10ms |
| branch | 693 kB | 37.26ms - 37.63ms | faster ✔ 1% - 3% 0.45ms - 1.10ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 480 kB | 208.42ms - 212.77ms | - | unsure 🔍 -1% - +2% -2.23ms - +5.18ms |
| branch | 465 kB | 206.13ms - 212.12ms | unsure 🔍 -2% - +1% -5.18ms - +2.23ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 494 kB | 53.88ms - 54.76ms | - | unsure 🔍 -1% - +1% -0.76ms - +0.54ms |
| branch | 473 kB | 53.96ms - 54.91ms | unsure 🔍 -1% - +1% -0.54ms - +0.76ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 518 kB | 554.54ms - 562.76ms | - | unsure 🔍 -1% - +2% -2.99ms - +9.69ms |
| branch | 501 kB | 550.47ms - 560.13ms | unsure 🔍 -2% - +1% -9.69ms - +2.99ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 386 kB | 21.43ms - 22.00ms | - | slower ❌ 0% - 3% 0.09ms - 0.67ms |
| branch | 373 kB | 21.28ms - 21.39ms | faster ✔ 0% - 3% 0.09ms - 0.67ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 721 kB | 1860.23ms - 1863.14ms | - | unsure 🔍 -0% - -0% -6.41ms - -2.33ms |
| branch | 704 kB | 1864.63ms - 1867.49ms | unsure 🔍 +0% - +0% +2.33ms - +6.41ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 560 kB | 42.66ms - 43.29ms | - | unsure 🔍 -1% - +1% -0.40ms - +0.55ms |
| branch | 536 kB | 42.54ms - 43.26ms | unsure 🔍 -1% - +1% -0.55ms - +0.40ms |
- |
Firefox
action-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 489 kB | 143.99ms - 149.77ms | - | unsure 🔍 -5% - +2% -7.02ms - +2.54ms |
| branch | 474 kB | 145.31ms - 152.93ms | unsure 🔍 -2% - +5% -2.54ms - +7.02ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 655 kB | 316.10ms - 324.10ms | - | unsure 🔍 -2% - +2% -7.41ms - +5.61ms |
| branch | 633 kB | 315.87ms - 326.13ms | unsure 🔍 -2% - +2% -5.61ms - +7.41ms |
- |
combobox permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 706 kB | 69.39ms - 76.01ms | - | slower ❌ 10% - 21% 6.17ms - 13.03ms |
| branch | 693 kB | 62.20ms - 64.00ms | faster ✔ 9% - 17% 6.17ms - 13.03ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 480 kB | 437.73ms - 448.31ms | - | unsure 🔍 -2% - +2% -8.13ms - +7.61ms |
| branch | 465 kB | 437.46ms - 449.10ms | unsure 🔍 -2% - +2% -7.61ms - +8.13ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 588 kB | 113.81ms - 118.19ms | - | unsure 🔍 -3% - +2% -3.34ms - +2.54ms |
| branch | 575 kB | 114.43ms - 118.37ms | unsure 🔍 -2% - +3% -2.54ms - +3.34ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 518 kB | 1029.06ms - 1043.06ms | - | unsure 🔍 -1% - +2% -14.39ms - +17.47ms |
| branch | 501 kB | 1020.21ms - 1048.83ms | unsure 🔍 -2% - +1% -17.47ms - +14.39ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 386 kB | 43.60ms - 48.36ms | - | unsure 🔍 -6% - +9% -2.56ms - +4.00ms |
| branch | 373 kB | 43.00ms - 47.52ms | unsure 🔍 -9% - +6% -4.00ms - +2.56ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 721 kB | 1637.93ms - 1645.11ms | - | unsure 🔍 -1% - +0% -9.91ms - +3.15ms |
| branch | 704 kB | 1639.44ms - 1650.36ms | unsure 🔍 -0% - +1% -3.15ms - +9.91ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 653 kB | 88.50ms - 92.94ms | - | unsure 🔍 -3% - +3% -2.80ms - +2.40ms |
| branch | 637 kB | 89.56ms - 92.28ms | unsure 🔍 -3% - +3% -2.40ms - +2.80ms |
- |
Lighthouse scores
| Category | Latest (report) | Main (report) | Branch (report) |
|---|---|---|---|
| Performance | 0.95 | 0.98 | 0.97 |
| Accessibility | 1 | 1 | 1 |
| Best Practices | 1 | 1 | 1 |
| SEO | 1 | 0.92 | 0.92 |
| PWA | 1 | 1 | 1 |
What is this?
Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.
Transfer Size
| Category | Latest | Main | Branch |
|---|---|---|---|
| Total | 242.182 kB | 226.85 kB 🏆 | 227.298 kB |
| Scripts | 59.407 kB | 53.713 kB | 53.70 kB 🏆 |
| Stylesheet | 50.303 kB | 41.294 kB 🏆 | 41.758 kB |
| Document | 5.758 kB | 5.129 kB | 5.128 kB 🏆 |
| Third Party | 126.714 kB | 126.714 kB | 126.712 kB 🏆 |
Request Count
| Category | Latest | Main | Branch |
|---|---|---|---|
| Total | 42 🏆 | 43 | 43 |
| Scripts | 34 🏆 | 35 | 35 |
| Stylesheet | 5 | 5 | 5 |
| Document | 1 | 1 | 1 |
| Third Party | 2 | 2 | 2 |