spectrum-web-components
spectrum-web-components copied to clipboard
feat(action-bar): support for action-menus
Description
Action Menu is not currently an accepted child of Action Bar. Expanding the Action Group management that is internally leveraged by Action Bar to include Action Menu would enable clients to use Action Menu with slot "buttons" and may also help resolve the Menu overlay overlap issue.
Related issue(s)
- #3531
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)
- [x] 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.
- [ ] 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.
- [ ] 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
Tachometer results
Chrome
accordion permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 419 kB | 169.54ms - 172.25ms | - | unsure 🔍 -1% - +1% -1.73ms - +1.97ms |
| branch | 410 kB | 169.51ms - 172.04ms | unsure 🔍 -1% - +1% -1.97ms - +1.73ms |
- |
action-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 490 kB | 91.35ms - 92.23ms | - | unsure 🔍 -1% - +1% -0.72ms - +0.53ms |
| branch | 481 kB | 91.44ms - 92.33ms | unsure 🔍 -1% - +1% -0.53ms - +0.72ms |
- |
action-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 519 kB | 113.58ms - 115.38ms | - | unsure 🔍 -2% - +1% -2.34ms - +0.91ms |
| branch | 510 kB | 113.84ms - 116.55ms | unsure 🔍 -1% - +2% -0.91ms - +2.34ms |
- |
action-group permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 540 kB | 70.20ms - 71.45ms | - | unsure 🔍 -2% - +1% -1.12ms - +0.67ms |
| branch | 532 kB | 70.41ms - 71.69ms | unsure 🔍 -1% - +2% -0.67ms - +1.12ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 650 kB | 182.60ms - 187.90ms | - | unsure 🔍 -1% - +2% -2.19ms - +4.00ms |
| branch | 643 kB | 182.74ms - 185.95ms | unsure 🔍 -2% - +1% -4.00ms - +2.19ms |
- |
alert-dialog permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 460 kB | 127.90ms - 129.37ms | - | slower ❌ 0% - 1% 0.00ms - 1.71ms |
| branch | 451 kB | 127.35ms - 128.21ms | faster ✔ 0% - 1% 0.00ms - 1.71ms |
- |
avatar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 401 kB | 25.71ms - 25.92ms | - | unsure 🔍 -2% - +0% -0.63ms - +0.10ms |
| branch | 393 kB | 25.74ms - 26.44ms | unsure 🔍 -0% - +2% -0.10ms - +0.63ms |
- |
badge permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 402 kB | 35.71ms - 37.03ms | - | unsure 🔍 -2% - +3% -0.76ms - +1.22ms |
| branch | 393 kB | 35.40ms - 36.88ms | unsure 🔍 -3% - +2% -1.22ms - +0.76ms |
- |
button-group permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 447 kB | 63.67ms - 64.55ms | - | faster ✔ 1% - 3% 0.62ms - 2.00ms |
| branch | 439 kB | 64.89ms - 65.95ms | slower ❌ 1% - 3% 0.62ms - 2.00ms |
- |
button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 453 kB | 78.89ms - 79.99ms | - | unsure 🔍 -2% - +0% -1.68ms - +0.06ms |
| branch | 444 kB | 79.57ms - 80.92ms | unsure 🔍 -0% - +2% -0.06ms - +1.68ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 510 kB | 64.96ms - 65.72ms | - | unsure 🔍 -1% - +0% -0.96ms - +0.10ms |
| branch | 501 kB | 65.40ms - 66.13ms | unsure 🔍 -0% - +1% -0.10ms - +0.96ms |
- |
checkbox permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 422 kB | 97.81ms - 98.55ms | - | unsure 🔍 -1% - +1% -1.46ms - +0.55ms |
| branch | 413 kB | 97.70ms - 99.57ms | unsure 🔍 -1% - +1% -0.55ms - +1.46ms |
- |
color-area permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 459 kB | 146.51ms - 147.28ms | - | unsure 🔍 -2% - +1% -2.30ms - +1.03ms |
| branch | 450 kB | 145.91ms - 149.15ms | unsure 🔍 -1% - +2% -1.03ms - +2.30ms |
- |
color-slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 461 kB | 125.11ms - 125.81ms | - | unsure 🔍 -0% - +0% -0.39ms - +0.61ms |
| branch | 452 kB | 124.99ms - 125.71ms | unsure 🔍 -0% - +0% -0.61ms - +0.39ms |
- |
color-wheel permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 463 kB | 126.22ms - 126.94ms | - | unsure 🔍 -1% - +1% -0.70ms - +0.71ms |
| branch | 453 kB | 125.97ms - 127.18ms | unsure 🔍 -1% - +1% -0.71ms - +0.70ms |
- |
dialog permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 514 kB | 87.74ms - 88.33ms | - | unsure 🔍 -2% - +1% -1.89ms - +0.56ms |
| branch | 505 kB | 87.51ms - 89.89ms | unsure 🔍 -1% - +2% -0.56ms - +1.89ms |
- |
field-label permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 394 kB | 25.20ms - 26.09ms | - | unsure 🔍 -4% - +2% -1.09ms - +0.48ms |
| branch | 385 kB | 25.31ms - 26.59ms | unsure 🔍 -2% - +4% -0.48ms - +1.09ms |
- |
grid permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 462 kB | 38.66ms - 39.25ms | - | slower ❌ 3% - 5% 1.11ms - 1.85ms |
| branch | 435 kB | 37.25ms - 37.71ms | faster ✔ 3% - 5% 1.11ms - 1.85ms |
- |
infield-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 406 kB | 21.10ms - 21.55ms | - | unsure 🔍 -1% - +2% -0.13ms - +0.37ms |
| branch | 398 kB | 21.09ms - 21.31ms | unsure 🔍 -2% - +1% -0.37ms - +0.13ms |
- |
link permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 387 kB | 20.96ms - 21.32ms | - | unsure 🔍 -1% - +2% -0.12ms - +0.43ms |
| branch | 379 kB | 20.77ms - 21.20ms | unsure 🔍 -2% - +1% -0.43ms - +0.12ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 477 kB | 248.77ms - 252.97ms | - | faster ✔ 7% - 9% 18.88ms - 25.38ms |
| branch | 469 kB | 270.52ms - 275.47ms | slower ❌ 7% - 10% 18.88ms - 25.38ms |
- |
meter permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 409 kB | 64.09ms - 64.67ms | - | unsure 🔍 -1% - +1% -0.54ms - +0.37ms |
| branch | 400 kB | 64.11ms - 64.82ms | unsure 🔍 -1% - +1% -0.37ms - +0.54ms |
- |
number-field permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 526 kB | 105.32ms - 109.32ms | - | unsure 🔍 -0% - +4% -0.25ms - +4.12ms |
| branch | 517 kB | 104.51ms - 106.26ms | unsure 🔍 -4% - +0% -4.12ms - +0.25ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 517 kB | 57.86ms - 59.76ms | - | unsure 🔍 -0% - +4% -0.16ms - +2.03ms |
| branch | 497 kB | 57.32ms - 58.43ms | unsure 🔍 -3% - +0% -2.03ms - +0.16ms |
- |
picker-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 418 kB | 47.80ms - 48.49ms | - | unsure 🔍 -3% - +2% -1.24ms - +0.78ms |
| branch | 409 kB | 47.43ms - 49.33ms | unsure 🔍 -2% - +3% -0.78ms - +1.24ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 515 kB | 624.79ms - 634.89ms | - | unsure 🔍 -0% - +2% -0.19ms - +13.07ms |
| branch | 507 kB | 619.11ms - 627.70ms | unsure 🔍 -2% - +0% -13.07ms - +0.19ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 386 kB | 22.90ms - 23.08ms | - | unsure 🔍 -1% - +0% -0.31ms - +0.09ms |
| branch | 377 kB | 22.92ms - 23.28ms | unsure 🔍 -0% - +1% -0.09ms - +0.31ms |
- |
progress-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 410 kB | 51.04ms - 51.62ms | - | unsure 🔍 -1% - +1% -0.63ms - +0.33ms |
| branch | 401 kB | 51.10ms - 51.86ms | unsure 🔍 -1% - +1% -0.33ms - +0.63ms |
- |
progress-circle permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 386 kB | 49.89ms - 50.44ms | - | unsure 🔍 -1% - +1% -0.41ms - +0.31ms |
| branch | 377 kB | 49.98ms - 50.44ms | unsure 🔍 -1% - +1% -0.31ms - +0.41ms |
- |
radio permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 410 kB | 73.38ms - 74.38ms | - | unsure 🔍 -0% - +1% -0.21ms - +1.07ms |
| branch | 401 kB | 73.04ms - 73.86ms | unsure 🔍 -1% - +0% -1.07ms - +0.21ms |
- |
search permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 475 kB | 62.05ms - 62.86ms | - | unsure 🔍 -2% - +0% -0.98ms - +0.18ms |
| branch | 467 kB | 62.44ms - 63.27ms | unsure 🔍 -0% - +2% -0.18ms - +0.98ms |
- |
sidenav permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 432 kB | 326.58ms - 332.43ms | - | unsure 🔍 -1% - +2% -1.66ms - +6.30ms |
| branch | 423 kB | 324.49ms - 329.89ms | unsure 🔍 -2% - +1% -6.30ms - +1.66ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 478 kB | 119.36ms - 121.22ms | - | slower ❌ 3% - 5% 3.32ms - 5.64ms |
| branch | 471 kB | 115.11ms - 116.50ms | faster ✔ 3% - 5% 3.32ms - 5.64ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 736 kB | 1857.28ms - 1860.25ms | - | unsure 🔍 +0% - +0% +4.32ms - +8.40ms |
| branch | 719 kB | 1851.01ms - 1853.80ms | unsure 🔍 -0% - -0% -8.40ms - -4.32ms |
- |
swatch permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 411 kB | 25.15ms - 25.42ms | - | unsure 🔍 -0% - +1% -0.11ms - +0.24ms |
| branch | 402 kB | 25.10ms - 25.33ms | unsure 🔍 -1% - +0% -0.24ms - +0.11ms |
- |
switch permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 403 kB | 27.27ms - 27.56ms | - | unsure 🔍 -1% - +1% -0.25ms - +0.20ms |
| branch | 394 kB | 27.27ms - 27.61ms | unsure 🔍 -1% - +1% -0.20ms - +0.25ms |
- |
table permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 538 kB | 323.27ms - 326.88ms | - | unsure 🔍 -1% - +1% -3.01ms - +1.95ms |
| branch | 505 kB | 323.90ms - 327.30ms | unsure 🔍 -1% - +1% -1.95ms - +3.01ms |
- |
tabs permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 427 kB | 120.82ms - 122.46ms | - | unsure 🔍 -1% - +1% -1.31ms - +1.22ms |
| branch | 419 kB | 120.72ms - 122.65ms | unsure 🔍 -1% - +1% -1.22ms - +1.31ms |
- |
tags permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 458 kB | 40.68ms - 43.77ms | - | slower ❌ 86% - 101% 18.84ms - 21.94ms |
| branch | 449 kB | 21.70ms - 21.96ms | faster ✔ 46% - 50% 18.84ms - 21.94ms |
- |
textfield permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 434 kB | 40.13ms - 40.61ms | - | faster ✔ 0% - 2% 0.16ms - 1.00ms |
| branch | 425 kB | 40.60ms - 41.29ms | slower ❌ 0% - 2% 0.16ms - 1.00ms |
- |
toast permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 437 kB | 48.52ms - 49.01ms | - | unsure 🔍 -1% - +1% -0.25ms - +0.44ms |
| branch | 429 kB | 48.42ms - 48.92ms | unsure 🔍 -1% - +1% -0.44ms - +0.25ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 576 kB | 47.04ms - 48.05ms | - | unsure 🔍 -2% - +1% -0.89ms - +0.60ms |
| branch | 561 kB | 47.14ms - 48.24ms | unsure 🔍 -1% - +2% -0.60ms - +0.89ms |
- |
top-nav permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 432 kB | 85.09ms - 86.28ms | - | unsure 🔍 -1% - +1% -1.13ms - +0.50ms |
| branch | 424 kB | 85.45ms - 86.55ms | unsure 🔍 -1% - +1% -0.50ms - +1.13ms |
- |
tray permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 528 kB | 116.48ms - 118.36ms | - | unsure 🔍 -1% - +1% -1.18ms - +1.05ms |
| branch | 519 kB | 116.89ms - 118.08ms | unsure 🔍 -1% - +1% -1.05ms - +1.18ms |
- |
Firefox
accordion permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 419 kB | 290.39ms - 300.41ms | - | unsure 🔍 -2% - +3% -5.36ms - +9.56ms |
| branch | 410 kB | 287.77ms - 298.83ms | unsure 🔍 -3% - +2% -9.56ms - +5.36ms |
- |
action-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 490 kB | 171.66ms - 175.90ms | - | unsure 🔍 -3% - +1% -6.09ms - +1.73ms |
| branch | 481 kB | 172.68ms - 179.24ms | unsure 🔍 -1% - +4% -1.73ms - +6.09ms |
- |
action-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 519 kB | 256.60ms - 266.28ms | - | unsure 🔍 -4% - +2% -9.30ms - +6.02ms |
| branch | 510 kB | 257.15ms - 269.01ms | unsure 🔍 -2% - +4% -6.02ms - +9.30ms |
- |
action-group permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 540 kB | 175.30ms - 181.70ms | - | unsure 🔍 -2% - +3% -3.22ms - +6.02ms |
| branch | 532 kB | 173.77ms - 180.43ms | unsure 🔍 -3% - +2% -6.02ms - +3.22ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 650 kB | 321.45ms - 332.63ms | - | unsure 🔍 -2% - +3% -5.19ms - +9.27ms |
| branch | 643 kB | 320.42ms - 329.58ms | unsure 🔍 -3% - +2% -9.27ms - +5.19ms |
- |
alert-dialog permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 460 kB | 227.98ms - 233.34ms | - | unsure 🔍 -2% - +2% -5.04ms - +3.88ms |
| branch | 451 kB | 227.68ms - 234.80ms | unsure 🔍 -2% - +2% -3.88ms - +5.04ms |
- |
avatar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 401 kB | 56.45ms - 60.99ms | - | unsure 🔍 -3% - +7% -1.67ms - +3.75ms |
| branch | 393 kB | 56.20ms - 59.16ms | unsure 🔍 -6% - +3% -3.75ms - +1.67ms |
- |
badge permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 402 kB | 82.06ms - 86.26ms | - | unsure 🔍 -6% - +1% -5.09ms - +1.09ms |
| branch | 393 kB | 83.89ms - 88.43ms | unsure 🔍 -1% - +6% -1.09ms - +5.09ms |
- |
button-group permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 447 kB | 160.41ms - 169.39ms | - | unsure 🔍 -5% - +3% -8.63ms - +4.23ms |
| branch | 439 kB | 162.49ms - 171.71ms | unsure 🔍 -3% - +5% -4.23ms - +8.63ms |
- |
button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 453 kB | 178.93ms - 186.71ms | - | unsure 🔍 -2% - +4% -3.65ms - +6.81ms |
| branch | 444 kB | 177.74ms - 184.74ms | unsure 🔍 -4% - +2% -6.81ms - +3.65ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 510 kB | 124.07ms - 129.45ms | - | unsure 🔍 -3% - +3% -4.35ms - +4.07ms |
| branch | 501 kB | 123.66ms - 130.14ms | unsure 🔍 -3% - +3% -4.07ms - +4.35ms |
- |
checkbox permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 422 kB | 197.27ms - 206.97ms | - | unsure 🔍 -4% - +3% -7.36ms - +6.04ms |
| branch | 413 kB | 198.15ms - 207.41ms | unsure 🔍 -3% - +4% -6.04ms - +7.36ms |
- |
color-area permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 459 kB | 235.90ms - 245.42ms | - | unsure 🔍 -1% - +5% -1.53ms - +10.93ms |
| branch | 450 kB | 231.94ms - 239.98ms | unsure 🔍 -5% - +1% -10.93ms - +1.53ms |
- |
color-slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 461 kB | 227.18ms - 234.34ms | - | unsure 🔍 -3% - +2% -6.14ms - +3.74ms |
| branch | 452 kB | 228.55ms - 235.37ms | unsure 🔍 -2% - +3% -3.74ms - +6.14ms |
- |
color-wheel permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 463 kB | 207.14ms - 213.54ms | - | unsure 🔍 -3% - +2% -5.95ms - +3.47ms |
| branch | 453 kB | 208.12ms - 215.04ms | unsure 🔍 -2% - +3% -3.47ms - +5.95ms |
- |
dialog permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 514 kB | 132.09ms - 137.63ms | - | unsure 🔍 -4% - +2% -5.25ms - +3.13ms |
| branch | 505 kB | 132.78ms - 139.06ms | unsure 🔍 -2% - +4% -3.13ms - +5.25ms |
- |
field-label permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 394 kB | 58.90ms - 62.94ms | - | unsure 🔍 -2% - +6% -1.21ms - +3.73ms |
| branch | 385 kB | 58.24ms - 61.08ms | unsure 🔍 -6% - +2% -3.73ms - +1.21ms |
- |
grid permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 462 kB | 75.51ms - 79.01ms | - | unsure 🔍 -2% - +5% -1.57ms - +3.53ms |
| branch | 435 kB | 74.42ms - 78.14ms | unsure 🔍 -5% - +2% -3.53ms - +1.57ms |
- |
infield-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 406 kB | 49.51ms - 53.37ms | - | unsure 🔍 -3% - +6% -1.54ms - +2.90ms |
| branch | 398 kB | 49.65ms - 51.87ms | unsure 🔍 -6% - +3% -2.90ms - +1.54ms |
- |
link permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 387 kB | 40.83ms - 42.73ms | - | unsure 🔍 -4% - +3% -1.90ms - +1.30ms |
| branch | 379 kB | 40.79ms - 43.37ms | unsure 🔍 -3% - +5% -1.30ms - +1.90ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 477 kB | 417.39ms - 427.73ms | - | unsure 🔍 -2% - +1% -9.03ms - +6.35ms |
| branch | 469 kB | 418.21ms - 429.59ms | unsure 🔍 -2% - +2% -6.35ms - +9.03ms |
- |
meter permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 409 kB | 108.42ms - 113.46ms | - | unsure 🔍 -4% - +2% -4.08ms - +2.76ms |
| branch | 400 kB | 109.29ms - 113.91ms | unsure 🔍 -2% - +4% -2.76ms - +4.08ms |
- |
number-field permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 526 kB | 217.65ms - 224.35ms | - | unsure 🔍 -4% - +1% -8.80ms - +1.92ms |
| branch | 517 kB | 220.27ms - 228.61ms | unsure 🔍 -1% - +4% -1.92ms - +8.80ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 598 kB | 125.61ms - 131.11ms | - | unsure 🔍 -2% - +3% -3.12ms - +3.40ms |
| branch | 581 kB | 126.47ms - 129.97ms | unsure 🔍 -3% - +2% -3.40ms - +3.12ms |
- |
picker-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 418 kB | 87.31ms - 91.61ms | - | unsure 🔍 -5% - +2% -4.75ms - +1.99ms |
| branch | 409 kB | 88.24ms - 93.44ms | unsure 🔍 -2% - +5% -1.99ms - +4.75ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 515 kB | 966.60ms - 1001.04ms | - | unsure 🔍 -1% - +3% -8.59ms - +26.83ms |
| branch | 507 kB | 970.56ms - 978.84ms | unsure 🔍 -3% - +1% -26.83ms - +8.59ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 386 kB | 50.20ms - 52.60ms | - | unsure 🔍 -6% - +4% -3.26ms - +1.90ms |
| branch | 377 kB | 49.80ms - 54.36ms | unsure 🔍 -4% - +6% -1.90ms - +3.26ms |
- |
progress-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 410 kB | 88.70ms - 94.90ms | - | unsure 🔍 -3% - +6% -3.08ms - +5.04ms |
| branch | 401 kB | 88.20ms - 93.44ms | unsure 🔍 -5% - +3% -5.04ms - +3.08ms |
- |
progress-circle permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 386 kB | 66.60ms - 71.72ms | - | unsure 🔍 -5% - +6% -3.39ms - +4.19ms |
| branch | 377 kB | 65.96ms - 71.56ms | unsure 🔍 -6% - +5% -4.19ms - +3.39ms |
- |
radio permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 410 kB | 146.56ms - 154.12ms | - | unsure 🔍 -3% - +5% -3.91ms - +6.79ms |
| branch | 401 kB | 145.11ms - 152.69ms | unsure 🔍 -5% - +3% -6.79ms - +3.91ms |
- |
search permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 475 kB | 112.10ms - 120.54ms | - | unsure 🔍 -5% - +5% -6.25ms - +5.33ms |
| branch | 467 kB | 112.81ms - 120.75ms | unsure 🔍 -5% - +5% -5.33ms - +6.25ms |
- |
sidenav permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 432 kB | 538.72ms - 555.72ms | - | unsure 🔍 -2% - +2% -10.99ms - +9.03ms |
| branch | 423 kB | 542.91ms - 553.49ms | unsure 🔍 -2% - +2% -9.03ms - +10.99ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 478 kB | 221.16ms - 230.56ms | - | slower ❌ 2% - 8% 3.91ms - 16.81ms |
| branch | 471 kB | 211.08ms - 219.92ms | faster ✔ 2% - 7% 3.91ms - 16.81ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 736 kB | 1573.56ms - 1579.20ms | - | unsure 🔍 +0% - +0% +0.71ms - +7.25ms |
| branch | 719 kB | 1570.75ms - 1574.05ms | unsure 🔍 -0% - -0% -7.25ms - -0.71ms |
- |
swatch permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 411 kB | 71.01ms - 76.31ms | - | unsure 🔍 -4% - +6% -2.94ms - +4.42ms |
| branch | 402 kB | 70.37ms - 75.47ms | unsure 🔍 -6% - +4% -4.42ms - +2.94ms |
- |
switch permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 403 kB | 65.23ms - 69.53ms | - | unsure 🔍 -5% - +4% -3.34ms - +2.98ms |
| branch | 394 kB | 65.24ms - 69.88ms | unsure 🔍 -4% - +5% -2.98ms - +3.34ms |
- |
table permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 538 kB | 531.80ms - 541.64ms | - | unsure 🔍 -2% - +1% -11.58ms - +5.18ms |
| branch | 505 kB | 533.13ms - 546.71ms | unsure 🔍 -1% - +2% -5.18ms - +11.58ms |
- |
tabs permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 427 kB | 200.58ms - 208.66ms | - | unsure 🔍 -2% - +3% -4.87ms - +6.23ms |
| branch | 419 kB | 200.13ms - 207.75ms | unsure 🔍 -3% - +2% -6.23ms - +4.87ms |
- |
tags permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 458 kB | 46.97ms - 50.99ms | - | unsure 🔍 -3% - +7% -1.67ms - +3.19ms |
| branch | 449 kB | 46.85ms - 49.59ms | unsure 🔍 -6% - +3% -3.19ms - +1.67ms |
- |
textfield permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 434 kB | 82.88ms - 87.64ms | - | unsure 🔍 -6% - +1% -5.72ms - +1.04ms |
| branch | 425 kB | 85.20ms - 90.00ms | unsure 🔍 -1% - +7% -1.04ms - +5.72ms |
- |
toast permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 437 kB | 102.19ms - 108.65ms | - | unsure 🔍 -4% - +4% -4.26ms - +3.98ms |
| branch | 429 kB | 103.01ms - 108.11ms | unsure 🔍 -4% - +4% -3.98ms - +4.26ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 661 kB | 93.56ms - 96.32ms | - | unsure 🔍 -1% - +5% -0.87ms - +4.55ms |
| branch | 643 kB | 90.77ms - 95.43ms | unsure 🔍 -5% - +1% -4.55ms - +0.87ms |
- |
top-nav permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 432 kB | 131.85ms - 139.99ms | - | unsure 🔍 -5% - +4% -7.36ms - +5.84ms |
| branch | 424 kB | 131.48ms - 141.88ms | unsure 🔍 -4% - +5% -5.84ms - +7.36ms |
- |
tray permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 528 kB | 203.36ms - 209.84ms | - | unsure 🔍 -1% - +3% -2.36ms - +5.76ms |
| branch | 519 kB | 202.45ms - 207.35ms | unsure 🔍 -3% - +1% -5.76ms - +2.36ms |
- |
In https://feat-action-menu-in-action-bar--spectrum-web-components.netlify.app/storybook/?path=/story/action-bar--default when I navigate to the Action Menu with the keyboard, I am unable to access any of the Menu Items once it is opened.
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
- Spectrum | Lightest | Medium | LTR
- Spectrum | Lightest | Medium | RTL
- Spectrum | Lightest | Large | LTR
- Spectrum | Lightest | Large | RTL
- Spectrum | Light | Medium | LTR
- Spectrum | Light | Medium | RTL
- Spectrum | Light | Large | LTR
- Spectrum | Light | Large | RTL
- Spectrum | Dark | Medium | LTR
- Spectrum | Dark | Medium | RTL
- Spectrum | Dark | Large | LTR
- Spectrum | Dark | Large | RTL
- Spectrum | Darkest | Medium | LTR
- Spectrum | Darkest | Medium | RTL
- Spectrum | Darkest | Large | LTR
- Spectrum | 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
- Spectrum-two | Light | Medium | LTR
- Spectrum-two | Light | Medium | RTL
- Spectrum-two | Light | Large | LTR
- Spectrum-two | Light | Large | RTL
- Spectrum-two | Dark | Medium | LTR
- Spectrum-two | Dark | Medium | RTL
- Spectrum-two | Dark | Large | LTR
- Spectrum-two | Dark | Large | RTL
Tachometer results
Chrome
accordion permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 416 kB | 73.72ms - 75.56ms | - | faster ✔ 6% - 10% 4.52ms - 8.00ms |
| branch | 404 kB | 79.42ms - 82.38ms | slower ❌ 6% - 11% 4.52ms - 8.00ms |
- |
action-bar permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 485 kB | 49.34ms - 51.59ms | - | faster ✔ 1% - 7% 0.31ms - 3.59ms |
| branch | 473 kB | 51.22ms - 53.60ms | slower ❌ 1% - 7% 0.31ms - 3.59ms |
- |
action-button permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 515 kB | 66.81ms - 68.43ms | - | faster ✔ 2% - 6% 1.66ms - 4.01ms |
| branch | 502 kB | 69.60ms - 71.31ms | slower ❌ 2% - 6% 1.66ms - 4.01ms |
- |
action-group permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 536 kB | 45.11ms - 46.31ms | - | faster ✔ 4% - 8% 2.05ms - 3.78ms |
| branch | 524 kB | 48.01ms - 49.25ms | slower ❌ 4% - 8% 2.05ms - 3.78ms |
- |
action-menu permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 647 kB | 128.97ms - 132.09ms | - | faster ✔ 4% - 8% 6.08ms - 10.58ms |
| branch | 634 kB | 137.24ms - 140.48ms | slower ❌ 5% - 8% 6.08ms - 10.58ms |
- |
test-directive permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 604 kB | 59.92ms - 61.47ms | - | faster ✔ 4% - 7% 2.38ms - 4.47ms |
| branch | 592 kB | 63.42ms - 64.82ms | slower ❌ 4% - 7% 2.38ms - 4.47ms |
- |
test-lazy permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 603 kB | 57.93ms - 58.95ms | - | faster ✔ 5% - 8% 2.96ms - 4.74ms |
| branch | 591 kB | 61.56ms - 63.02ms | slower ❌ 5% - 8% 2.96ms - 4.74ms |
- |
test-open-close-directive permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 790 kB | 1874.06ms - 1877.07ms | - | unsure 🔍 -0% - +0% -2.17ms - +2.64ms |
| branch | 777 kB | 1873.46ms - 1877.21ms | unsure 🔍 -0% - +0% -2.64ms - +2.17ms |
- |
test-open-close permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 789 kB | 1860.68ms - 1863.29ms | - | unsure 🔍 -0% - +0% -0.82ms - +3.23ms |
| branch | 776 kB | 1859.23ms - 1862.33ms | unsure 🔍 -0% - +0% -3.23ms - +0.82ms |
- |
Firefox
accordion permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 416 kB | 162.17ms - 168.91ms | - | faster ✔ 5% - 10% 8.80ms - 18.44ms |
| branch | 404 kB | 175.72ms - 182.60ms | slower ❌ 5% - 11% 8.80ms - 18.44ms |
- |
action-bar permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 485 kB | 111.02ms - 117.22ms | - | unsure 🔍 -7% - +0% -8.43ms - +0.39ms |
| branch | 473 kB | 115.01ms - 121.27ms | unsure 🔍 -0% - +7% -0.39ms - +8.43ms |
- |
action-button permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 515 kB | 148.64ms - 157.44ms | - | unsure 🔍 -6% - +1% -9.35ms - +2.19ms |
| branch | 502 kB | 152.89ms - 160.35ms | unsure 🔍 -1% - +6% -2.19ms - +9.35ms |
- |
action-group permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 536 kB | 114.15ms - 119.33ms | - | faster ✔ 1% - 7% 1.33ms - 9.03ms |
| branch | 524 kB | 119.07ms - 124.77ms | slower ❌ 1% - 8% 1.33ms - 9.03ms |
- |
action-menu permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 647 kB | 270.65ms - 274.11ms | - | faster ✔ 11% - 13% 34.97ms - 40.79ms |
| branch | 634 kB | 307.91ms - 312.61ms | slower ❌ 13% - 15% 34.97ms - 40.79ms |
- |
test-directive permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 604 kB | 125.74ms - 127.34ms | - | faster ✔ 2% - 4% 3.08ms - 5.08ms |
| branch | 592 kB | 130.02ms - 131.22ms | slower ❌ 2% - 4% 3.08ms - 5.08ms |
- |
test-lazy permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 603 kB | 150.93ms - 155.55ms | - | slower ❌ 8% - 13% 11.57ms - 18.19ms |
| branch | 591 kB | 135.99ms - 140.73ms | faster ✔ 8% - 12% 11.57ms - 18.19ms |
- |
test-open-close-directive permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 790 kB | 1911.76ms - 1918.20ms | - | slower ❌ 1% - 2% 26.55ms - 34.89ms |
| branch | 777 kB | 1881.61ms - 1886.91ms | faster ✔ 1% - 2% 26.55ms - 34.89ms |
- |
test-open-close permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 789 kB | 1881.61ms - 1884.99ms | - | unsure 🔍 -0% - +0% -2.54ms - +2.66ms |
| branch | 776 kB | 1881.26ms - 1885.22ms | unsure 🔍 -0% - +0% -2.66ms - +2.54ms |
- |
Lighthouse scores
| Category | Latest (report) | Main (report) | Branch (report) |
|---|---|---|---|
| Performance | 0.99 | 0.99 | 0.99 |
| 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 | 222.359 kB | 212.00 kB 🏆 | 212.162 kB |
| Scripts | 54.581 kB | 49.57 kB 🏆 | 49.796 kB |
| Stylesheet | 34.774 kB | 30.397 kB 🏆 | 30.414 kB |
| Document | 6.069 kB | 5.357 kB | 5.329 kB 🏆 |
| Font | 126.935 kB | 126.676 kB | 126.623 kB 🏆 |
Request Count
| Category | Latest | Main | Branch |
|---|---|---|---|
| Total | 45 🏆 | 48 | 48 |
| Scripts | 37 🏆 | 40 | 40 |
| Stylesheet | 5 | 5 | 5 |
| Document | 1 | 1 | 1 |
| Font | 2 | 2 | 2 |
@nikkimk This is an expected behaviour as we've placed the edit button and the action-menu in the action-group so you should be able to use arrow keys to navigate between the two items inside of the action-group but using tab will jump to the next focusable element which in this case is the picker.
Here's the attached documentation for these changes.
@Rajdeepc I have addressed all the comments on the PR. Please take a look.
LGTM