spectrum-web-components
spectrum-web-components copied to clipboard
feat: add t-shirt sizing to the Radio pattern
Description
- add t-shirt sizing to the Radio pattern
- adopt Core Token based styling
TO DO:
- [ ] Update documentation site
- [ ] Look into Radio Group passing t-shirt size down to Radio Buttons like Action Group does
How has this been tested?
- [ ] Test case 1
- Go here
- Review VRT updates
- [ ] Test case 2
- Go here (when complete)
- Review the docs site
Types of changes
- [x] New feature (non-breaking change which adds functionality)
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
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
action-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 231 kB | 33.62ms - 33.87ms | - | unsure 🔍 -1% - +0% -0.34ms - +0.00ms |
| branch | 232 kB | 33.80ms - 34.04ms | unsure 🔍 -0% - +1% -0.00ms - +0.34ms |
- |
action-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 398 kB | 58.03ms - 58.95ms | - | unsure 🔍 -2% - +1% -1.25ms - +0.40ms |
| branch | 400 kB | 58.23ms - 59.59ms | unsure 🔍 -1% - +2% -0.40ms - +1.25ms |
- |
action-group permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 423 kB | 115.54ms - 116.76ms | - | unsure 🔍 -1% - +1% -0.71ms - +1.23ms |
| branch | 425 kB | 115.13ms - 116.64ms | unsure 🔍 -1% - +1% -1.23ms - +0.71ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 591 kB | 222.74ms - 224.00ms | - | unsure 🔍 -1% - +0% -2.01ms - +0.75ms |
| branch | 594 kB | 222.77ms - 225.23ms | unsure 🔍 -0% - +1% -0.75ms - +2.01ms |
- |
button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 319 kB | 54.26ms - 54.56ms | - | unsure 🔍 -1% - +0% -0.35ms - +0.16ms |
| branch | 320 kB | 54.30ms - 54.71ms | unsure 🔍 -0% - +1% -0.16ms - +0.35ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 376 kB | 98.11ms - 99.00ms | - | unsure 🔍 -1% - +0% -0.96ms - +0.32ms |
| branch | 378 kB | 98.41ms - 99.34ms | unsure 🔍 -0% - +1% -0.32ms - +0.96ms |
- |
dialog permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 303 kB | 82.53ms - 82.95ms | - | unsure 🔍 -1% - +1% -0.42ms - +0.51ms |
| branch | 305 kB | 82.28ms - 83.11ms | unsure 🔍 -1% - +1% -0.51ms - +0.42ms |
- |
field-group permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 286 kB | 253.58ms - 255.35ms | - | unsure 🔍 -1% - +0% -2.39ms - +0.64ms |
| branch | 288 kB | 254.12ms - 256.57ms | unsure 🔍 -0% - +1% -0.64ms - +2.39ms |
- |
help-text permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 248 kB | 21.78ms - 21.90ms | - | faster ✔ 0% - 1% 0.05ms - 0.24ms |
| branch | 249 kB | 21.92ms - 22.05ms | slower ❌ 0% - 1% 0.05ms - 0.24ms |
- |
illustrated-message permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 280 kB | 48.52ms - 48.86ms | - | unsure 🔍 -0% - +1% -0.14ms - +0.28ms |
| branch | 281 kB | 48.49ms - 48.75ms | unsure 🔍 -1% - +0% -0.28ms - +0.14ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 295 kB | 247.97ms - 250.68ms | - | unsure 🔍 -1% - +1% -1.70ms - +1.29ms |
| branch | 297 kB | 248.91ms - 250.15ms | unsure 🔍 -1% - +1% -1.29ms - +1.70ms |
- |
number-field permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 490 kB | 182.82ms - 186.21ms | - | unsure 🔍 -2% - +1% -3.23ms - +1.57ms |
| branch | 492 kB | 183.65ms - 187.04ms | unsure 🔍 -1% - +2% -1.57ms - +3.23ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 333 kB | 76.61ms - 78.49ms | - | unsure 🔍 -2% - +1% -1.82ms - +1.00ms |
| branch | 335 kB | 76.91ms - 79.01ms | unsure 🔍 -1% - +2% -1.00ms - +1.82ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 438 kB | 790.63ms - 817.02ms | - | unsure 🔍 -2% - +2% -16.36ms - +17.15ms |
| branch | 441 kB | 793.10ms - 813.76ms | unsure 🔍 -2% - +2% -17.15ms - +16.36ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 227 kB | 34.52ms - 34.84ms | - | unsure 🔍 -2% - +0% -0.75ms - +0.03ms |
| branch | 229 kB | 34.68ms - 35.39ms | unsure 🔍 -0% - +2% -0.03ms - +0.75ms |
- |
radio permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 264 kB | 92.45ms - 93.14ms | - | faster ✔ 3% - 4% 2.75ms - 3.94ms |
| branch | 268 kB | 95.66ms - 96.62ms | slower ❌ 3% - 4% 2.75ms - 3.94ms |
- |
search permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 327 kB | 96.59ms - 97.13ms | - | unsure 🔍 -0% - +0% -0.27ms - +0.43ms |
| branch | 329 kB | 96.55ms - 97.00ms | unsure 🔍 -0% - +0% -0.43ms - +0.27ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 327 kB | 151.08ms - 154.85ms | - | unsure 🔍 -1% - +2% -1.11ms - +2.77ms |
| branch | 329 kB | 151.66ms - 152.60ms | unsure 🔍 -2% - +1% -2.77ms - +1.11ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 530 kB | 1951.82ms - 1954.74ms | - | unsure 🔍 -0% - +0% -2.75ms - +1.70ms |
| branch | 533 kB | 1952.12ms - 1955.49ms | unsure 🔍 -0% - +0% -1.70ms - +2.75ms |
- |
tags permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 321 kB | 31.85ms - 32.93ms | - | unsure 🔍 -1% - +3% -0.28ms - +1.07ms |
| branch | 323 kB | 31.59ms - 32.40ms | unsure 🔍 -3% - +1% -1.07ms - +0.28ms |
- |
textfield permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 284 kB | 53.29ms - 53.78ms | - | unsure 🔍 -1% - +1% -0.39ms - +0.29ms |
| branch | 286 kB | 53.35ms - 53.82ms | unsure 🔍 -1% - +1% -0.29ms - +0.39ms |
- |
toast permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 293 kB | 44.17ms - 44.77ms | - | unsure 🔍 -1% - +1% -0.23ms - +0.43ms |
| branch | 295 kB | 44.22ms - 44.52ms | unsure 🔍 -1% - +1% -0.43ms - +0.23ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 234 kB | 34.36ms - 34.76ms | - | unsure 🔍 -1% - +1% -0.32ms - +0.22ms |
| branch | 235 kB | 34.43ms - 34.80ms | unsure 🔍 -1% - +1% -0.22ms - +0.32ms |
- |
Firefox
action-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 231 kB | 129.56ms - 138.12ms | - | unsure 🔍 -1% - +8% -1.77ms - +9.77ms |
| branch | 232 kB | 125.97ms - 133.71ms | unsure 🔍 -7% - +1% -9.77ms - +1.77ms |
- |
action-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 398 kB | 125.74ms - 135.66ms | - | unsure 🔍 -5% - +6% -6.74ms - +7.66ms |
| branch | 400 kB | 125.02ms - 135.46ms | unsure 🔍 -6% - +5% -7.66ms - +6.74ms |
- |
action-group permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 423 kB | 348.97ms - 361.07ms | - | unsure 🔍 -5% - +1% -17.43ms - +2.47ms |
| branch | 425 kB | 354.61ms - 370.39ms | unsure 🔍 -1% - +5% -2.47ms - +17.43ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 591 kB | 468.05ms - 478.71ms | - | unsure 🔍 -1% - +2% -5.76ms - +9.48ms |
| branch | 594 kB | 466.07ms - 476.97ms | unsure 🔍 -2% - +1% -9.48ms - +5.76ms |
- |
button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 319 kB | 125.68ms - 136.96ms | - | unsure 🔍 -4% - +7% -5.01ms - +8.89ms |
| branch | 320 kB | 125.32ms - 133.44ms | unsure 🔍 -7% - +4% -8.89ms - +5.01ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 376 kB | 209.12ms - 217.76ms | - | unsure 🔍 -5% - +1% -11.12ms - +1.24ms |
| branch | 378 kB | 213.97ms - 222.79ms | unsure 🔍 -1% - +5% -1.24ms - +11.12ms |
- |
dialog permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 303 kB | 175.37ms - 186.83ms | - | unsure 🔍 -9% - +2% -16.83ms - +3.71ms |
| branch | 305 kB | 179.13ms - 196.19ms | unsure 🔍 -2% - +9% -3.71ms - +16.83ms |
- |
field-group permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 286 kB | 788.27ms - 800.93ms | - | unsure 🔍 -1% - +1% -8.71ms - +11.07ms |
| branch | 288 kB | 785.82ms - 801.02ms | unsure 🔍 -1% - +1% -11.07ms - +8.71ms |
- |
help-text permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 248 kB | 74.23ms - 83.29ms | - | unsure 🔍 -4% - +10% -3.31ms - +7.51ms |
| branch | 249 kB | 73.70ms - 79.62ms | unsure 🔍 -9% - +4% -7.51ms - +3.31ms |
- |
illustrated-message permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 280 kB | 113.64ms - 121.24ms | - | unsure 🔍 -8% - +4% -10.08ms - +4.56ms |
| branch | 281 kB | 113.94ms - 126.46ms | unsure 🔍 -4% - +9% -4.56ms - +10.08ms |
- |
menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 295 kB | 609.15ms - 618.57ms | - | unsure 🔍 -2% - +0% -13.39ms - +0.47ms |
| branch | 297 kB | 615.23ms - 625.41ms | unsure 🔍 -0% - +2% -0.47ms - +13.39ms |
- |
number-field permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 490 kB | 471.90ms - 480.54ms | - | unsure 🔍 -0% - +2% -1.34ms - +11.02ms |
| branch | 492 kB | 466.95ms - 475.81ms | unsure 🔍 -2% - +0% -11.02ms - +1.34ms |
- |
overlay permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 333 kB | 202.19ms - 216.57ms | - | unsure 🔍 -4% - +4% -9.04ms - +9.36ms |
| branch | 335 kB | 203.48ms - 214.96ms | unsure 🔍 -4% - +4% -9.36ms - +9.04ms |
- |
picker permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 438 kB | 1290.71ms - 1306.77ms | - | unsure 🔍 -1% - +0% -17.53ms - +5.29ms |
| branch | 441 kB | 1296.75ms - 1312.97ms | unsure 🔍 -0% - +1% -5.29ms - +17.53ms |
- |
popover permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 227 kB | 121.13ms - 138.11ms | - | unsure 🔍 -3% - +18% -2.56ms - +21.40ms |
| branch | 229 kB | 111.75ms - 128.65ms | unsure 🔍 -16% - +2% -21.40ms - +2.56ms |
- |
radio permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 264 kB | 301.97ms - 312.95ms | - | faster ✔ 1% - 5% 2.64ms - 16.96ms |
| branch | 268 kB | 312.66ms - 321.86ms | slower ❌ 1% - 6% 2.64ms - 16.96ms |
- |
search permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 327 kB | 226.53ms - 239.19ms | - | unsure 🔍 -5% - +2% -12.81ms - +5.45ms |
| branch | 329 kB | 229.96ms - 243.12ms | unsure 🔍 -2% - +6% -5.45ms - +12.81ms |
- |
slider permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 327 kB | 389.65ms - 397.95ms | - | unsure 🔍 -3% - +1% -10.52ms - +3.20ms |
| branch | 329 kB | 392.00ms - 402.92ms | unsure 🔍 -1% - +3% -3.20ms - +10.52ms |
- |
split-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 530 kB | 2115.16ms - 2128.52ms | - | unsure 🔍 -0% - +1% -7.40ms - +12.52ms |
| branch | 533 kB | 2111.90ms - 2126.66ms | unsure 🔍 -1% - +0% -12.52ms - +7.40ms |
- |
tags permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 321 kB | 74.35ms - 80.73ms | - | unsure 🔍 -11% - +3% -8.87ms - +2.87ms |
| branch | 323 kB | 75.61ms - 85.47ms | unsure 🔍 -4% - +12% -2.87ms - +8.87ms |
- |
textfield permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 284 kB | 141.96ms - 148.28ms | - | unsure 🔍 -6% - +2% -9.68ms - +2.68ms |
| branch | 286 kB | 143.30ms - 153.94ms | unsure 🔍 -2% - +7% -2.68ms - +9.68ms |
- |
toast permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 293 kB | 151.54ms - 161.14ms | - | unsure 🔍 -5% - +5% -7.28ms - +7.48ms |
| branch | 295 kB | 150.63ms - 161.85ms | unsure 🔍 -5% - +5% -7.48ms - +7.28ms |
- |
tooltip permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 234 kB | 95.61ms - 104.67ms | - | unsure 🔍 -9% - +3% -9.49ms - +3.33ms |
| branch | 235 kB | 98.68ms - 107.76ms | unsure 🔍 -3% - +10% -3.33ms - +9.49ms |
- |