feat: add t-shirt sizing to the Radio pattern #2471

Westbrook · 2022-08-02T16:38:04Z

Description

add t-shirt sizing to the Radio pattern
adopt Core Token based styling for Radio
adopt Core Token based styling for Close Button
update to the latest Spectrum CSS dependencies

TO DO:

Update documentation site
~~Look into Radio Group passing t-shirt size down to Radio Buttons like Action Group does~~
- Action Group doesn't actually do this, we should look at making this happen collectively at a later date.

How has this been tested?

Test case 1
1. Go here
2. Review VRT updates
Test case 2
1. Go here
2. Review the docs site

Types of changes

New feature (non-breaking change which adds functionality)

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

github-actions · 2022-08-02T16:42:02Z

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:

github-actions · 2022-08-02T17:13:08Z

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	-

pfulton

Looks great. Thank you for adding this one for me!

najikahalsema

Nice job!

Westbrook requested a review from pfulton August 2, 2022 16:38

Westbrook marked this pull request as draft August 2, 2022 16:52

Westbrook force-pushed the spectrum-css branch 3 times, most recently from fc3fb99 to 42c355a Compare August 3, 2022 15:15

Base automatically changed from spectrum-css to main August 3, 2022 15:22

pfulton previously approved these changes Aug 5, 2022

View reviewed changes

Westbrook dismissed pfulton’s stale review via 30de93a August 18, 2022 13:25

Westbrook force-pushed the radio-tokens branch 7 times, most recently from aab222c to 9e41cbb Compare August 18, 2022 16:23

Westbrook Johnson added 4 commits August 18, 2022 12:35

feat: add t-shirt sizing to the Radio pattern

b1a6846

chore: use latest Spectrum CSS releases

93ad613

docs: include t-shirt sizing in Radio docs

aba21ef

ci: update golden images cache

7ce74f4

Westbrook force-pushed the radio-tokens branch from 9e41cbb to 7ce74f4 Compare August 18, 2022 16:35

Westbrook marked this pull request as ready for review August 19, 2022 11:41

Westbrook requested review from hunterloftis and najikahalsema August 19, 2022 11:41

najikahalsema approved these changes Aug 19, 2022

View reviewed changes

Westbrook merged commit 7d040ab into main Aug 19, 2022

Westbrook deleted the radio-tokens branch August 19, 2022 19:59

feat: add t-shirt sizing to the Radio pattern #2471

feat: add t-shirt sizing to the Radio pattern #2471

Uh oh!

Conversation

Westbrook commented Aug 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

TO DO:

How has this been tested?

Types of changes

Checklist

Uh oh!

github-actions bot commented Aug 2, 2022

Branch Preview

Uh oh!

github-actions bot commented Aug 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tachometer results

action-bar permalink

action-button permalink

action-group permalink

action-menu permalink

button permalink

card permalink

dialog permalink

field-group permalink

help-text permalink

illustrated-message permalink

menu permalink

number-field permalink

overlay permalink

picker permalink

popover permalink

radio permalink

search permalink

slider permalink

split-button permalink

tags permalink

textfield permalink

toast permalink

tooltip permalink

action-bar permalink

action-button permalink

action-group permalink

action-menu permalink

button permalink

card permalink

dialog permalink

field-group permalink

help-text permalink

illustrated-message permalink

menu permalink

number-field permalink

overlay permalink

picker permalink

popover permalink

radio permalink

search permalink

slider permalink

split-button permalink

tags permalink

textfield permalink

toast permalink

tooltip permalink

Uh oh!

pfulton left a comment

Choose a reason for hiding this comment

Uh oh!

najikahalsema left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Westbrook commented Aug 2, 2022 •

edited

Loading

github-actions bot commented Aug 2, 2022 •

edited

Loading