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

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 suggested 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

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

castastrophe mentioned this pull request Apr 15, 2025

feat(tokens,card): update to @adobe/spectrum-tokens@13.3.0 #3669

Merged

12 tasks

This was referenced May 5, 2025

docs: adds tag for migrated components #3688

Merged

docs: add storybook migrated badge #3690

Merged

chore: add missing tags #3692

Merged

This was referenced May 16, 2025

chore(swatch,menu,swatchgroup): fix reverted metadata assets #3752

Merged

chore: merge latest updates from main #3777

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

Uh oh!

aramos-adobe commented Feb 13, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Feb 13, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Feb 13, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Feb 13, 2025 •

edited

Loading

Uh oh!

jawinn left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

marissahuysentruyt left a comment •

edited

Loading

Uh oh!

marissahuysentruyt Mar 17, 2025

Uh oh!

marissahuysentruyt Mar 17, 2025

Uh oh!

marissahuysentruyt Mar 17, 2025

Uh oh!

marissahuysentruyt Mar 17, 2025

Uh oh!

marissahuysentruyt left a comment

Uh oh!

castastrophe Mar 19, 2025

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Conversation

aramos-adobe commented Feb 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Radio S2 Migration

New tokens

Modified tokens

Validation steps

Regression testing

Screenshots

To-do list

Uh oh!

changeset-bot bot commented Feb 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Feb 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

radio

Uh oh!

github-actions bot commented Feb 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jawinn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

marissahuysentruyt left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Mar 17, 2025

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Mar 17, 2025

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Mar 17, 2025

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Mar 17, 2025

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

castastrophe Mar 19, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

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