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: ccb1d52

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

This PR includes changesets to release 2 packages

Name	Type
@spectrum-css/radio	Major
@spectrum-css/helptext	Minor

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^*
✅ No change in file sizes

Package	Size	Minified	Gzipped
helptext	7.13 KB	6.83 KB	1.09 KB
radio	17.86 KB	16.95 KB	2.39 KB

File change details

helptext

Filename	Head	Minified	Gzipped	Compared to base
index.css	7.13 KB	6.83 KB	1.09 KB	🔴 ⬆ 0.02 KB
metadata.json	3.31 KB	-	-	-

radio

Filename	Head	Minified	Gzipped	Compared to base
index.css	17.86 KB	16.95 KB	2.39 KB	🔴 ⬆ 2.62 KB
metadata.json	9.92 KB	-	-	🔴 ⬆ 1.27 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.

jawinn · 2025-02-28T18:58:15Z

components/radio/stories/radio.stories.js

Can you add a new docs only "Invalid" story with documentation? With this I'd mention the .is-invalid class that the implementation would apply.

jawinn · 2025-02-28T19:08:36Z

components/radio/stories/radio.test.js

+		{
+			testHeading: "Invalid",
+			isInvalid: true,
+		}


Nice additions to the tests.

There are a few combinations I can see aren't covered in the testing grid yet, that I'd suggest also adding:

invalid + checked

disabled + checked

read-only + checked

jawinn · 2025-03-04T15:46:18Z

components/radio/dist/metadata.json

-    "--spectrum-neutral-background-color-selected-default",
-    "--spectrum-neutral-background-color-selected-down",
-    "--spectrum-neutral-background-color-selected-hover",
-    "--spectrum-neutral-background-color-selected-key-focus",


I still see these on the token specs under "Radio button token changes", but it looks like that part of the Figma might be wrong, and they're actually neutral-content-color tokens now according to the other section of the Figma? The design team may need to update that.

jawinn · 2025-03-04T16:29:39Z

components/radio/stories/radio.stories.js

@@ -37,6 +37,7 @@ export default {
 			control: { type: "text" },
 		},
 		isEmphasized,
+		isInvalid,


I'd also import and add isFocused here, along with a default arg value of false, since that's being used now.

jawinn · 2025-03-04T16:31:45Z

components/radio/stories/radio.test.js

+			isHovered: true,
+		},
+		{
+			testHeading: "Focus",


Suggested change

testHeading: "Focus",

testHeading: "Focus-visible",

jawinn · 2025-03-04T16:32:44Z

components/radio/stories/template.js

+				@focusin=${function() {
+					updateArgs({ isFocused: true });
+				}}
+				@focusout=${function() {
+					updateArgs({ isFocused: false });
+				}}


Suggested change

@focusin=${function() {

updateArgs({ isFocused: true });

}}

@focusout=${function() {

updateArgs({ isFocused: false });

}}

I'd recommend removing this, as it will show the focus ring on click in the Default story. It should only show on tab focus. That's because these events are different behavior than the :focus-visible in our styles.

…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

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

helptext

radio

github-actions bot commented Feb 13, 2025 •

edited

Loading

jawinn left a comment

jawinn Feb 28, 2025

jawinn Feb 28, 2025

jawinn Mar 4, 2025

jawinn Mar 4, 2025

jawinn Mar 4, 2025

jawinn Mar 4, 2025

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

Are you sure you want to change the base?

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

helptext

radio

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

jawinn left a comment

Choose a reason for hiding this comment

jawinn Feb 28, 2025

Choose a reason for hiding this comment

jawinn Feb 28, 2025

Choose a reason for hiding this comment

jawinn Mar 4, 2025

Choose a reason for hiding this comment

jawinn Mar 4, 2025

Choose a reason for hiding this comment

jawinn Mar 4, 2025

Choose a reason for hiding this comment

jawinn Mar 4, 2025

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