feat(checkbox/group): s2 token migration, control spacing, subtle color changes #3531

aramos-adobe · 2025-01-30T18:59:06Z

Checkbox/Group S2 Migrations

Checkbox has some new tokens for control and color. Most of the tokens have been updated in the global vars.

New tokens

--spectrum-component-size-width-ratio-down
--spectrum-checkbox-bottom-to-text(S,M,L,XL)
--spectrum-checkbox-top-to-control (S,M,L,XL)
--spectrum-accent-content-color-default
--spectrum-accent-content-color-hover
--spectrum-accent-content-color-down
--spectrum-accent-content-color-key-focus

Modified tokens

--spectrum-checkbox-checkmark-color
--spectrum-checkbox-invalid-color-down
--spectrum-checkbox-control-color-default
--spectrum-checkbox-control-color-hover
--spectrum-checkbox-control-color-down
--spectrum-checkbox-control-color-focus

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

Look at the checkbox component in storybook
Check light and dark modes in Testing Mode

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-01-30T18:59:10Z

🦋 Changeset detected

Latest commit: f62b64e

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

This PR includes changesets to release 18 packages

Name	Type
@spectrum-css/checkbox	Major
@spectrum-css/assetcard	Major
@spectrum-css/assetlist	Major
@spectrum-css/card	Major
@spectrum-css/fieldgroup	Major
@spectrum-css/menu	Major
@spectrum-css/miller	Major
@spectrum-css/table	Major
@spectrum-css/actionmenu	Major
@spectrum-css/coachmark	Major
@spectrum-css/combobox	Major
@spectrum-css/picker	Major
@spectrum-css/pickerbutton	Major
@spectrum-css/popover	Major
@spectrum-css/tabs	Major
@spectrum-css/datepicker	Major
@spectrum-css/actionbar	Major
@spectrum-css/contextualhelp	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-01-30T19:01:19Z

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

github-actions · 2025-01-30T19:03:52Z

File metrics

Summary

Total size: 1.42 MB^*
Total change (Δ): 🔴 ⬆ 2.50 KB (0.17%)

Table reports on changes to a package's main file.

Package	Size	Minified	Gzipped	Δ
checkbox	25.26 KB	-	-	🔴 ⬆ 2.50 KB

checkbox

Filename	Head	Minified	Gzipped	Compared to base
index.css	25.26 KB	-	-	🔴 ⬆ 2.50 KB
metadata.json	14.08 KB	-	-	🔴 ⬆ 1.23 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.

rise-erpelding

This is a great start! I pointed out some of the changes that I thought were still needed to the CSS within the CSS file, but here's a quick rundown of what I think needs another look:

Down state
Some of the invalid default colors (emphasized colors seem to be working fine for whatever reason) - this is a (hopefully small) bugfix that I also noticed on main
Typography use of tokens
Updating CJK to match other components
Probably removing some stray dist files
There are SO many test cases covered already, but for some reason we don't have any focus, hover, or active states. I don't think there's any particular reason we've left them out as far as I know, so I'm wondering how you would feel about adding them? I think it would make catching bugs (like the bug I just mentioned above) a little easier!

As far as I can tell, I think the template.js and stories.js files for this component are fine, so probably no changes needed there!

rise-erpelding · 2025-01-31T16:17:54Z

components/checkbox/index.css

Going through the Figma specs here are some things I noticed on the CSS:

Checkbox layout - all of the tokens look good here except for Component size (down):

Awhile ago we wrote up some docs for down state in feat(downstate): docs + implementation for example components #2520, at that time the down state for checkbox was migrated to S2 as well so that it could be used on that docs page. There's also a comment in that PR from SWC about the approach there not working, that's something that we probably need to take some action on and find out more about to follow up. As it in this PR, it's changed from the checkbox being just a bit smaller when active, to being really small when active, so this will probably need another look.

Checkbox group layout - Checking the fieldgroup component, this looks good!

Checkbox colors - this needs some work:

The invalid/error default checked hover (screenshot below is hovered) color is the neutral-content-color-hover black and not the negative-color-1000 red. I think this is a bug that exists on main too, not something you introduced.

The down/active color on this same invalid default checked checkbox is also a black color and not a red color, so this would need to be updated as well.
It's a little strange that there's not a visual for the error, I wonder what's going on with that, but I think that's outside of the work of this PR 🤷‍♀️

Checkbox typography

We're not using default-font-family in the component, should we be?

Same for regular-font-weight and

Also default-font-style, but I see TODO comments in here around L370, it might be time to start setting those styles? I'm not sure of the historical reason why they weren't before.

CJK - this looks good and works just fine! But could you revise it so that the custom properties are redefined instead of resetting the style (probably moving the whole selector up to the top with the custom property definitions)? Similar to how you did it in Illustrated Message but with line height. Nothing is wrong with the way you have it, but after analyzing our components and realizing we're doing it 3 different ways across all of them, we want to try to standardize how we do this wherever we can, I just documented this in our style guide draft.

@rise-erpelding the default-font-family doesn't render correctly for some reason. For component size (down) there is something in documentation describing the usage.

rise-erpelding · 2025-01-31T16:20:41Z

components/checkbox/dist/index.css.map

Should we have this components/checkbox/dist/index.css.map and components/checkbox/dist/index.css committed?

rise-erpelding · 2025-01-31T16:21:18Z

components/progresscircle/dist/index.css

Wondering if these dist files for progresscircle also need to be removed.

Expanding the existing themes system to support the new S2 mappings. --- Co-authored-by: castastrophe <[email protected]> Co-authored-by: Patrick Fulton <[email protected]> Co-authored-by: Cory Dransfeldt <[email protected]> Co-authored-by: Aziz Ramos <[email protected]> Co-authored-by: Josh Winn <[email protected]> Co-authored-by: Rise Erpelding <[email protected]> Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: Rajdeep Chandra <[email protected]> Co-authored-by: TarunAdobe <[email protected]> Co-authored-by: Dragan Eror<[email protected]>

* feat: s2 foundations non-gray-800 colors update * add changeset

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

--- Co-authored-by: TarunAdobe <[email protected]>

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

components/checkbox/index.css

jawinn · 2025-02-12T15:00:44Z

components/checkbox/index.css

@@ -177,8 +195,7 @@
 		}

 		&:hover {
-			.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box,
-			.spectrum-Checkbox-box::before {


It looks like we lost the selector for the default hover on invalid here. If you hover over the invalid unchecked checkbox, you can see the wrong border color appearing:

Also the existing comment above this section of CSS should probably say just "Invalid" instead of "Selected Invalid", as it's not just for selected.

Ah good eye! Thank you

jawinn · 2025-02-12T15:11:40Z

components/checkbox/index.css

@@ -408,6 +418,8 @@

 	cursor: pointer;

+	margin-block-start: var(--spectrum-checkbox-top-to-control);


This isn't needed here and isn't having any effect because the input is visually hidden and position absolute. It looks like this token was an updated value that should be used for the existing margin on .spectrum-Checkbox-box.

I was thinking that we would replace the value of the existing margin property. So instead of:

margin: calc(var(--mod-checkbox-spacing, var(--spectrum-checkbox-spacing)) / 2) 0; margin-block-start: var(--spectrum-checkbox-top-to-control);

it'd be something like

margin: var(--mod-checkbox-margin-block, var(--spectrum-checkbox-top-to-control)) 0;

Now that we have this top to control token value, it looks like we can remove the previously used --spectrum-checkbox-spacing?

We want to make sure this value can still be customized with a mod (renamed as --mod-checkbox-margin-block above); the previous mod --mod-checkbox-spacing wouldn't work anymore on the top margin when both margin and margin-block-start are used.

jawinn · 2025-02-12T16:05:18Z

components/checkbox/index.css

I'm noticing a couple things that need adjustment in high contrast mode.

With the addition of --spectrum-checkbox-background-color, this needs a highcontrast variable added where it is used. To contrast with the existing CanvasText border and content color, this should be set to Canvas:

I'm seeing a few discrepancies between different combinations on hover and focus. All of the following issues appear to exist in Prod as well:

Invalid + Unchecked and Invalid + Indeterminate should also be showing the highlight color on hover and focus, similar to the default. Just the Invalid + Checked shows it on hover currently.

Read-only + Unchecked + Hover and Read-only + Unchecked + Keyboard Focus shouldn't be showing the highlight color

When the background of the checkbox is the Highlight color, it should be using the matching foreground pair HighlightText within it to ensure contrast in different color schemes; right now the checkmark and the indeterminate dash are using the wrong keyword "Canvas" via --spectrum-checkbox-checkmark-color.

There's also something really weird going on with the highlight colors. I think they're being overridden and not using the system colors, as one is appearing darker than the other:

jawinn · 2025-02-12T16:08:13Z

components/checkbox/index.css

@@ -20,15 +20,16 @@
 	--spectrum-checkbox-checkmark-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-gray-50)));


The pattern used on this line doesn't seem to be consistent with where we typically define the mods and highcontrast variables. This seems like a good time to clean this up.

…s2-migration

- removes --spectrum-statuslight-semantic-accent-color from CSS - removes deprecated accent variant from template and tests - adds changeset - update metadata.json

* feat(icon): updated s2 icons - workflow and ui Uses and updates to the latest icon sets for S2. ==== Workflow icons ==== Uses the latest version of this package. There is a large difference between the set of icons available for S1 and S2. These differences are documented separately from this work. ==== UI icons ==== Updates the ui-icons package with the latest set of icons. This includes deprecations and some new icons. See the change log for a full list of changes. The UI icons no longer contain both a medium and a large SVG asset. The file structure and loading have been changed to use the single asset. Co-authored-by: [ Cassondra ] <[email protected]> Also includes: * build(storybook): use latest 4.0.0 version of workflow icons * feat(icon): remove guessing of icon set if not provided * refactor(icon): refactors, cleans up, and documents template logic and utilities * feat(icon): exclude new ui icons not yet ready for production (CSS-1115) * feat(icon): exclude 22x20 workflow icons (CSS-1116)

…s2-migration

jawinn · 2025-02-20T17:22:52Z

components/checkbox/index.css

+		/* WHCM settings */
+		.spectrum-Checkbox-box,
+		.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box,
+		&.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box,
+		&.is-indeterminate .spectrum-Checkbox-box {
+			&::before {
+				border-color: var(--highcontrast-checkbox-color-default);
+			}
+		}
+
+		&:hover {
+			.spectrum-Checkbox-box::before,
+			.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before {
+				border-color: var(--highcontrast-checkbox-color-default);
+			}


High contrast only styles should live in the forced-colors media query.

Also could these possibly be handled by changes to custom property values instead?

jawinn · 2025-02-20T17:41:32Z

components/checkbox/index.css

The colors of the emphasized read-only checkboxes appear to be incorrect. They were blue in prod, and are now the default dark grey (+they change to blue on hover).

I'm also seeing invalid + hover showing blue instead of red.

jawinn · 2025-02-20T18:11:21Z

components/checkbox/index.css

@@ -408,6 +418,8 @@

 	cursor: pointer;

+	margin-block-start: var(--spectrum-checkbox-top-to-control);


I was thinking that we would replace the value of the existing margin property. So instead of:

margin: calc(var(--mod-checkbox-spacing, var(--spectrum-checkbox-spacing)) / 2) 0; margin-block-start: var(--spectrum-checkbox-top-to-control);

it'd be something like

margin: var(--mod-checkbox-margin-block, var(--spectrum-checkbox-top-to-control)) 0;

Now that we have this top to control token value, it looks like we can remove the previously used --spectrum-checkbox-spacing?

We want to make sure this value can still be customized with a mod (renamed as --mod-checkbox-margin-block above); the previous mod --mod-checkbox-spacing wouldn't work anymore on the top margin when both margin and margin-block-start are used.

jawinn · 2025-02-20T18:37:33Z

components/checkbox/stories/checkbox.test.js

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


This is a nice addition. I'd suggest also adding an emphasized + hovered test.

jawinn · 2025-02-20T18:40:46Z

.changeset/six-donuts-march.md

+
+# Checkbox S2 Migration
+
+Checkbox has some new control and color tokens.


Could you add some elaboration here about the changes? Such as the removal of .spectrum-Checkbox--sizeM as medium is the default, high contrast updates, maybe font changes, and anything else that would be helpful to know about what has changed? I also see the thickness mod renamed, fixing its typo.

jawinn · 2025-02-20T18:41:16Z

.changeset/six-donuts-march.md

+`--spectrum-checkbox-bottom-to-text(S,M,L,XL)`
+`--spectrum-checkbox-top-to-control (S,M,L,XL)`


Could you list these full token names out individually?

…previews could overlap adjacent components (#3568)

…s2-migration

aramos-adobe added ready-for-review S2 Spectrum 2 labels Jan 30, 2025

aramos-adobe self-assigned this Jan 30, 2025

aramos-adobe force-pushed the aramos-adobe/css1016-checkbox-group-s2-migration branch from 8a329ce to 6ca8078 Compare January 30, 2025 19:09

aramos-adobe requested a review from rise-erpelding January 30, 2025 19:13

rise-erpelding requested changes Jan 31, 2025

View reviewed changes

castastrophe force-pushed the spectrum-two branch 2 times, most recently from 56c6806 to 793571c Compare February 5, 2025 17:33

pfulton force-pushed the spectrum-two branch from ff3adf1 to f5b76b3 Compare February 6, 2025 21:29

castastrophe force-pushed the spectrum-two branch 3 times, most recently from f34473b to cf46c2b Compare February 7, 2025 20:01

aramos-adobe closed this Feb 7, 2025

aramos-adobe force-pushed the aramos-adobe/css1016-checkbox-group-s2-migration branch from 0a7d424 to cf46c2b Compare February 7, 2025 20:58

aramos-adobe reopened this Feb 7, 2025

aramos-adobe force-pushed the aramos-adobe/css1016-checkbox-group-s2-migration branch from f6bfaa1 to 988b92a Compare February 10, 2025 16:35

castastrophe and others added 11 commits February 11, 2025 09:14

feat: bug fixes for reducing theming variables

258263c

feat: s2 foundations non-gray-800 colors update (#3413)

43cb851

* feat: s2 foundations non-gray-800 colors update * add changeset

chore: release (s2-foundations) (#3421)

d79432e

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

fix(combobox): update border color in spectrum-two

767ca25

--- Co-authored-by: TarunAdobe <[email protected]>

fix(picker): update background and border color

bb5bb57

--- Co-authored-by: TarunAdobe <[email protected]>

chore: release (s2-foundations) (#3425)

09f1ab6

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

fix(combobox): retain border values for S1

e56bea5

chore: release (s2-foundations) (#3426)

b0e1772

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

aramos-adobe added 11 commits February 11, 2025 17:11

feat(checkbox): adding new s2 tokens

f6a8506

chore(checkbox): adding necessary files

ef6a469

chore(checkbox): adding necessary files and dist files

f227892

chore(checkbox): making tokens more specific

5de206a

chore(checkbox): adding checkbox dist files

febc8fb

chore(checkbox): remove unnecessary dist files

4259605

feat(checkbox): adding checkbox s2 tokens

b3ecf0e

chore(checkbox): adding metadata file

9e13cb7

feat(checkbox): restoring new s2 tokens

077f061

chore(checkbox): adding metadata file

2523707

feat(checkbox): adding focused and hovered states in test env

f77a28f

aramos-adobe force-pushed the aramos-adobe/css1016-checkbox-group-s2-migration branch from 644902d to f77a28f Compare February 11, 2025 22:12

chore(checkbox): adding popover metadata

1de5eb2

jawinn requested changes Feb 12, 2025

View reviewed changes

aramos-adobe added 2 commits February 13, 2025 11:51

feat(checkbox): configure WHCM mode and modify css

ba079a7

chore(checkbox): adding metadata file

6f1100a

aramos-adobe requested a review from jawinn February 13, 2025 16:52

jawinn and others added 6 commits February 13, 2025 14:28

chore(popover): add missing metadata update from build (#3553)

973ccc2

Merge branch 'spectrum-two' into aramos-adobe/css1016-checkbox-group-…

12f6e0a

…s2-migration

docs(dialog): use isOpen shared state in controls (#3562)

159f51f

fix(statuslight): remove accent variant (#3561)

2637aa6

- removes --spectrum-statuslight-semantic-accent-color from CSS - removes deprecated accent variant from template and tests - adds changeset - update metadata.json

Merge branch 'spectrum-two' into aramos-adobe/css1016-checkbox-group-…

22a5c4d

…s2-migration

jawinn requested changes Feb 20, 2025

View reviewed changes

cdransf and others added 2 commits February 21, 2025 16:25

fix(combobox): corrects cases where open combobx stories and testing …

95af748

…previews could overlap adjacent components (#3568)

Merge branch 'spectrum-two' into aramos-adobe/css1016-checkbox-group-…

f62b64e

…s2-migration

castastrophe force-pushed the spectrum-two branch 4 times, most recently from 9b6a97a to d5e72d4 Compare February 24, 2025 22:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(checkbox/group): s2 token migration, control spacing, subtle color changes #3531

feat(checkbox/group): s2 token migration, control spacing, subtle color changes #3531

aramos-adobe commented Jan 30, 2025 •

edited

Loading

changeset-bot bot commented Jan 30, 2025 •

edited

Loading

github-actions bot commented Jan 30, 2025 •

edited

Loading

github-actions bot commented Jan 30, 2025 •

edited

Loading

rise-erpelding left a comment

rise-erpelding Jan 31, 2025

aramos-adobe Feb 7, 2025

rise-erpelding Jan 31, 2025

rise-erpelding Jan 31, 2025

jawinn Feb 12, 2025

aramos-adobe Feb 12, 2025

jawinn Feb 12, 2025 •

edited

Loading

jawinn Feb 20, 2025 •

edited

Loading

jawinn Feb 12, 2025 •

edited

Loading

jawinn Feb 12, 2025

jawinn Feb 20, 2025

jawinn Feb 20, 2025

jawinn Feb 20, 2025 •

edited

Loading

jawinn Feb 20, 2025

jawinn Feb 20, 2025

jawinn Feb 20, 2025

		@@ -408,6 +418,8 @@

		cursor: pointer;

		margin-block-start: var(--spectrum-checkbox-top-to-control);

		@@ -20,15 +20,16 @@
		--spectrum-checkbox-checkmark-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-gray-50)));


		# Checkbox S2 Migration

		Checkbox has some new control and color tokens.

		`--spectrum-checkbox-bottom-to-text(S,M,L,XL)`
		`--spectrum-checkbox-top-to-control (S,M,L,XL)`

feat(checkbox/group): s2 token migration, control spacing, subtle color changes #3531

Are you sure you want to change the base?

feat(checkbox/group): s2 token migration, control spacing, subtle color changes #3531

Conversation

aramos-adobe commented Jan 30, 2025 • edited Loading

Checkbox/Group S2 Migrations

New tokens

Modified tokens

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

changeset-bot bot commented Jan 30, 2025 • edited Loading

🦋 Changeset detected

github-actions bot commented Jan 30, 2025 • edited Loading

github-actions bot commented Jan 30, 2025 • edited Loading

File metrics

Summary

checkbox

rise-erpelding 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

jawinn Feb 12, 2025 • edited Loading

Choose a reason for hiding this comment

jawinn Feb 20, 2025 • edited Loading

Choose a reason for hiding this comment

jawinn Feb 12, 2025 • 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

jawinn Feb 20, 2025 • 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

aramos-adobe commented Jan 30, 2025 •

edited

Loading

changeset-bot bot commented Jan 30, 2025 •

edited

Loading

github-actions bot commented Jan 30, 2025 •

edited

Loading

github-actions bot commented Jan 30, 2025 •

edited

Loading

jawinn Feb 12, 2025 •

edited

Loading

jawinn Feb 20, 2025 •

edited

Loading

jawinn Feb 12, 2025 •

edited

Loading

jawinn Feb 20, 2025 •

edited

Loading