feat(radio): adding new colors, type, and size tokens, invalid state, WHCM #3555

aramos-adobe · 2025-02-13T19:45:06Z

Radio S2 Migration

Updates:

Now has an invalid/error state
High contrast tokens have been modified
Typography tokens modified

New tokens

--spectrum-radio-invalid-color-default
--spectrum-radio-invalid-color-hover
--spectrum-radio-invalid-color-down
--spectrum-radio-invalid-color-key-focus
--spectrum-radio-border-width
--spectrum-radio-text-font-weight
--spectrum-radio-text-font-style

Modified tokens

--spectrum-radio-emphasized-accent-color
--spectrum-radio-emphasized-accent-color-hover
--spectrum-radio-emphasized-accent-color-down
--spectrum-radio-emphasized-accent-color-focus

Validation steps

Review Radio story
Review test environment

Regression testing

Validate:

The documentation pages for at least two other components are still loading, including:

The pages render correctly, are accessible, and are responsive.

If components have been modified, VRTs have been run on this branch:

VRTs have been run and looked at.
Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
I have tested these changes in Windows High Contrast mode.
If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

changeset-bot · 2025-02-13T19:45:10Z

🦋 Changeset detected

Latest commit: a6365c3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@spectrum-css/radio	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-02-13T19:56:34Z

File metrics

Summary

Total size: 1.37 MB^*

Package	Size	Minified	Gzipped
radio	15.92 KB	15.10 KB	2.25 KB

radio

Filename	Head	Minified	Gzipped	Compared to base
index.css	15.92 KB	15.10 KB	2.25 KB	🔴 ⬆ 0.70 KB
metadata.json	8.93 KB	-	-	🔴 ⬆ 0.28 KB

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

github-actions · 2025-02-13T19:57:27Z

🚀 Deployed on https://pr-3555--spectrum-css.netlify.app

…igration

jawinn

Nice work. Visually everything is looking good to me.
Just a few suggestions here that are mostly Storybook related.

components/radio/stories/radio.stories.js

components/radio/stories/radio.test.js

components/radio/dist/metadata.json

components/radio/stories/radio.stories.js

components/radio/stories/radio.test.js

components/radio/stories/template.js

…igration

cdransf

Looks awesome! ✨

marissahuysentruyt

This is looking really good! I was just working on checkbox, which I remembered was used in field group. So as I was reviewing this, I had field group in my head to check, and sure enough, I have a question for you 😸

Because field group calls for radios, I think we'll have to update field group template to pass its isInvalid arg all the way through to the radio components. Currently, in field group, I'm not seeing the new error/invalid state.

Is that how you would interpret the Figma note that the "s2 visual is not available?" And that the invalid radio groups just don't have their appropriate red border colors yet?

components/radio/stories/radio.test.js

components/radio/stories/radio.stories.js

components/radio/stories/template.js

marissahuysentruyt · 2025-03-12T19:46:55Z

.changeset/angry-needles-behave.md

+"@spectrum-css/radio": major
+---
+
+# Radio S2 Migration


This is just a personal preference, but I'd actually love the PR to have this title! I feel like it would make it really easy to search for in the future.

Me too! Do try to avoid using the h1 though, that's reserved for # Change Log. I recommend ### because it typically nests under the h2 version number.

marissahuysentruyt · 2025-03-12T19:55:29Z

components/radio/stories/template.js

 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			style=${styleMap(customStyles)}
 		>
 			<input
 				type="radio"
 				name=${name}
-				class="${rootClass}-input"
+				class=${classMap({["is-focus-visible"]: isFocused, [`${rootClass}-input`]: true })}


I have a question and then a suggestion for this line.

My question is why did you end up putting the isFocused arg here, as opposed to with the rest of the isHovered and isInvalid args? Is that in line with changes you did with checkbox (I haven't looked at that PR yet).

This is strictly a suggestion for readability:
Would you mind putting these on separate lines, like the classMap on the parent div? I think it's a little easier to read when they're listed on separate lines instead of just comma-separated.

Oh- semi related to this. Right now, we can tab focus to a disabled radio, which isn't correct.

I think here we need:
["is-focus-visible"]: isFocused && !isDisabled

marissahuysentruyt · 2025-03-12T20:25:25Z

components/radio/index.css

+	--spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-content-color-default);
+	--spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-content-color-hover);
+	--spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-content-color-down);
+	--spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-content-color-key-focus);


These sort of feel like duplicates to me. Could we rework any of the selectors that include :checked to just use the unchecked custom properties instead? I can't comment at line 133, but I was thinking something like:

&:hover { /*indicator hover */ .spectrum-Radio-button::before, .spectrum-Radio-input:checked + .spectrum-Radio-button::before { border-color: var(--highcontrast-radio-button-border-color-hover, var(--mod-radio-button-border-color-hover, var(--spectrum-radio-button-border-color-hover))); } .spectrum-Radio-label { color: var(--highcontrast-radio-neutral-content-color-hover, var(--mod-radio-neutral-content-color-hover, var(--spectrum-radio-neutral-content-color-hover))); } }

Does that still do everything we need it to do? My gut says that the "checked" and "unchecked" colors were pointing to the same resolved tokens- just one was using the global (gray-900) colors, and the other was using the aliases (neutral-background-color-selected-hover).

Happy to pair on this if I'm not making sense 🍐

components/radio/index.css

aramos-adobe · 2025-03-12T21:27:25Z

This is looking really good! I was just working on checkbox, which I remembered was used in field group. So as I was reviewing this, I had field group in my head to check, and sure enough, I have a question for you 😸

Because field group calls for radios, I think we'll have to update field group template to pass its isInvalid arg all the way through to the radio components. Currently, in field group, I'm not seeing the new error/invalid state.

Is that how you would interpret the Figma note that the "s2 visual is not available?" And that the invalid radio groups just don't have their appropriate red border colors yet?

Based on what React Spectrum's got it looks like this:

marissahuysentruyt · 2025-03-13T13:28:00Z

components/radio/stories/template.js

@@ -15,6 +16,9 @@ export const Template = ({
 	isChecked = false,
 	isDisabled = false,
 	isReadOnly = false,
+	isFocused = false,
+	isInvalid = false,


@aramos-adobe Based on that React link you sent me, I do think we need to pass the isInvalid arg to the radio components in field group. Right, they do not have the updated border colors. (I think I left a screenshot in my original note about this)

Thanks for sending that! 👍

…igration

marissahuysentruyt

Nice work on this! The tokens look good! I'm glad we double checked the error state and those negative tokens that were mentioned in the Figma specs.

This is another suggestion, and doesn't block an approval, but it was a thought I had. We could add some more test cases to make sure we don't miss any combination states:

checked + hovered
disabled + checked + hovered
readOnly + checked +hovered
active (to show the "down" state/perspective change, but this includes adding more to the template and an extra control)

I think some of these (or similar) are in the checkbox tests, so I was wondering if it would be helpful to expand the radio coverage in a similar way.

marissahuysentruyt · 2025-03-17T17:38:16Z

.changeset/angry-needles-behave.md

+
+Updates:
+
+- Now has an invalid/error state


In that thread on slack when we asked about the red error border color, it sounded to me like those negative tokens called out in the radio Figma specs were incorrectly added. We should probably delete all of the new invalid CSS and the changeset mentions 😭

@aramos-adobe I think you already deleted most of the invalid CSS, but I found just a couple instances of some invalid stuff here in the changeset, and then an arg in the stories file. 👍

marissahuysentruyt · 2025-03-17T18:08:20Z

components/combobox/dist/metadata.json

@@ -14,7 +14,6 @@
    ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only",
    ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-invalid > .spectrum-Combobox-input:read-only",
    ".spectrum-Combobox--quiet.spectrum-Combobox--sizeL",
-    ".spectrum-Combobox--quiet.spectrum-Combobox--sizeM",


I wonder if this snuck in during a rebase? I don't remember seeing a combobox diff before.

marissahuysentruyt · 2025-03-17T18:10:13Z

components/radio/stories/radio.stories.js

 	},
 	args: {
 		rootClass: "spectrum-Radio",
 		size: "m",
 		label: "Label",
 		isEmphasized: false,
 		isChecked: false,
+		isInvalid: false,


We probably don't need this isInvalid arg anymore. I think it's causing an uncategorized argument in the controls:

marissahuysentruyt

I think this just needs to be built again to update the metadata for radio & combobox (I'm getting metadata updates when I run this locally on my end!), but it's looking great! Thanks for all your hard work on this!

castastrophe · 2025-03-19T16:32:20Z

components/radio/stories/radio.test.js

 		}
 	],
 	stateData: [
 		{
 			testHeading: "Checked",
 			isChecked: true,
 		},
+		{


Love this test expansion 💃

…igration

aramos-adobe changed the base branch from spectrum-2 to spectrum-two February 13, 2025 19:45

aramos-adobe force-pushed the aramos-adobe/css712-radio-group-s2-migration branch from 8dee413 to a46599d Compare February 13, 2025 20:07

aramos-adobe self-assigned this Feb 13, 2025

aramos-adobe added S2 Spectrum 2 ready-for-review labels Feb 13, 2025

aramos-adobe requested review from rise-erpelding and jawinn February 19, 2025 14:52

castastrophe force-pushed the spectrum-two branch 5 times, most recently from d5e72d4 to 0f14273 Compare February 24, 2025 22:39

aramos-adobe force-pushed the aramos-adobe/css712-radio-group-s2-migration branch from 0704a09 to 63b2cc9 Compare February 25, 2025 17:49

castastrophe force-pushed the spectrum-two branch from 3499231 to ad861d0 Compare February 25, 2025 20:24

aramos-adobe added 5 commits March 3, 2025 10:24

feat(radio): adding radio options

b5300b9

chore(radio): update metadata

b1e043e

feat(radio): removing unused hcm token

5272a11

chore(radio): adding changeset

6075002

feat(radio): updating emphasized hcm selected color

75c6f2b

aramos-adobe force-pushed the aramos-adobe/css712-radio-group-s2-migration branch from 8e3b47f to 75c6f2b Compare March 3, 2025 15:25

Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…

6ca3363

…igration

jawinn requested changes Mar 4, 2025

View reviewed changes

aramos-adobe added 3 commits March 4, 2025 12:52

Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…

da822c1

…igration

Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…

efe4ccd

…igration

feat(radio): adding more tests and helptext ecample

ccb1d52

aramos-adobe requested a review from jawinn March 6, 2025 15:33

Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…

2f8d2d6

…igration

Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…

ee3d45d

…igration

jawinn approved these changes Mar 11, 2025

View reviewed changes

cdransf approved these changes Mar 12, 2025

View reviewed changes

marissahuysentruyt requested changes Mar 12, 2025

View reviewed changes

marissahuysentruyt reviewed Mar 13, 2025

View reviewed changes

aramos-adobe added 2 commits March 13, 2025 14:14

Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…

b2d5f58

…igration

feat(radio): removing dupe tokens, test, stories

2202448

aramos-adobe requested a review from marissahuysentruyt March 13, 2025 20:14

aramos-adobe added 5 commits March 13, 2025 17:10

Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…

b43d118

…igration

Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…

c3322dd

…igration

feat(radio): updating template docs

77f7789

feat(radio): updating invalid template and story

aa237b4

feat(radio): removing invalid state

75f9ed5

marissahuysentruyt requested changes Mar 17, 2025

View reviewed changes

aramos-adobe added 2 commits March 17, 2025 15:15

feat(radio): cleaning up templates

e288721

feat(radio): adding active control and test state

5570715

aramos-adobe requested a review from marissahuysentruyt March 17, 2025 20:34

marissahuysentruyt approved these changes Mar 17, 2025

View reviewed changes

chore(radio): rebuilding metadata files

bd6a49e

aramos-adobe added ready-to-merge and removed ready-for-review ready-to-merge labels Mar 18, 2025

castastrophe added size-3 M ~18-30hrs; moderate effort or complexity, several work days needed. ready-to-merge labels Mar 19, 2025

castastrophe approved these changes Mar 19, 2025

View reviewed changes

Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…

a6365c3

…igration

aramos-adobe merged commit 0af6461 into spectrum-two Mar 20, 2025
12 checks passed

aramos-adobe deleted the aramos-adobe/css712-radio-group-s2-migration branch March 20, 2025 14:08

github-actions bot mentioned this pull request Mar 20, 2025

chore: release (next) #3635

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(radio): adding new colors, type, and size tokens, invalid state, WHCM #3555

feat(radio): adding new colors, type, and size tokens, invalid state, WHCM #3555

aramos-adobe commented Feb 13, 2025 •

edited

Loading

changeset-bot bot commented Feb 13, 2025 •

edited

Loading

github-actions bot commented Feb 13, 2025 •

edited

Loading

github-actions bot commented Feb 13, 2025 •

edited

Loading

jawinn left a comment

cdransf left a comment

marissahuysentruyt left a comment

marissahuysentruyt Mar 12, 2025

castastrophe Mar 19, 2025

marissahuysentruyt Mar 12, 2025

marissahuysentruyt Mar 12, 2025

marissahuysentruyt Mar 12, 2025

marissahuysentruyt Mar 12, 2025

aramos-adobe commented Mar 12, 2025

marissahuysentruyt Mar 13, 2025

marissahuysentruyt left a comment •

edited

Loading

marissahuysentruyt Mar 17, 2025

marissahuysentruyt Mar 17, 2025

marissahuysentruyt Mar 17, 2025

marissahuysentruyt Mar 17, 2025

marissahuysentruyt left a comment

castastrophe Mar 19, 2025

feat(radio): adding new colors, type, and size tokens, invalid state, WHCM #3555

feat(radio): adding new colors, type, and size tokens, invalid state, WHCM #3555

Conversation

aramos-adobe commented Feb 13, 2025 • edited Loading

Radio S2 Migration

New tokens

Modified tokens

Validation steps

Regression testing

Screenshots

To-do list

changeset-bot bot commented Feb 13, 2025 • edited Loading

🦋 Changeset detected

github-actions bot commented Feb 13, 2025 • edited Loading

File metrics

Summary

radio

github-actions bot commented Feb 13, 2025 • edited Loading

jawinn left a comment

Choose a reason for hiding this comment

cdransf left a comment

Choose a reason for hiding this comment

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aramos-adobe commented Mar 12, 2025

Choose a reason for hiding this comment

marissahuysentruyt left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aramos-adobe commented Feb 13, 2025 •

edited

Loading

changeset-bot bot commented Feb 13, 2025 •

edited

Loading

github-actions bot commented Feb 13, 2025 •

edited

Loading

github-actions bot commented Feb 13, 2025 •

edited

Loading

marissahuysentruyt left a comment •

edited

Loading