[WB-1814.1] Refactor Checkbox and Radio to use semantic colors #2439

jandrade · 2025-01-22T15:08:53Z

Summary:

This PR get us closer to prepare form field components to apply a future Polaris theme.

Generated All Variant stories for Checkbox and Radio components.
Migrated color instances to use semanticColor in Checkbox and Radio.

NOTE: Next PR will do the same for the remaining form fields (TextField, TextArea).

Issue: WB-1814

Test plan:

Verify that the Checkbox and Radio stories look correct

…d Radio components

changeset-bot · 2025-01-22T15:08:57Z

🦋 Changeset detected

Latest commit: 0d9c7f1

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

This PR includes changesets to release 23 packages

Name	Type
@khanacademy/wonder-blocks-tokens	Minor
@khanacademy/wonder-blocks-form	Patch
@khanacademy/wonder-blocks-accordion	Patch
@khanacademy/wonder-blocks-banner	Patch
@khanacademy/wonder-blocks-birthday-picker	Patch
@khanacademy/wonder-blocks-breadcrumbs	Patch
@khanacademy/wonder-blocks-button	Patch
@khanacademy/wonder-blocks-cell	Patch
@khanacademy/wonder-blocks-clickable	Patch
@khanacademy/wonder-blocks-dropdown	Patch
@khanacademy/wonder-blocks-grid	Patch
@khanacademy/wonder-blocks-icon-button	Patch
@khanacademy/wonder-blocks-labeled-field	Patch
@khanacademy/wonder-blocks-layout	Patch
@khanacademy/wonder-blocks-link	Patch
@khanacademy/wonder-blocks-modal	Patch
@khanacademy/wonder-blocks-pill	Patch
@khanacademy/wonder-blocks-popover	Patch
@khanacademy/wonder-blocks-progress-spinner	Patch
@khanacademy/wonder-blocks-search-field	Patch
@khanacademy/wonder-blocks-switch	Patch
@khanacademy/wonder-blocks-toolbar	Patch
@khanacademy/wonder-blocks-tooltip	Patch

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-22T15:10:40Z

Size Change: -54 B (-0.06%)

Total Size: 98 kB

Filename	Size	Change
`packages/wonder-blocks-form/dist/es/index.js`	5.99 kB	-59 B (-0.97%)
`packages/wonder-blocks-tokens/dist/es/index.js`	2.54 kB	+5 B (+0.2%)

ℹ️ View Unchanged

Filename	Size
`packages/wonder-blocks-accordion/dist/es/index.js`	3.77 kB
`packages/wonder-blocks-banner/dist/es/index.js`	1.53 kB
`packages/wonder-blocks-birthday-picker/dist/es/index.js`	1.77 kB
`packages/wonder-blocks-breadcrumbs/dist/es/index.js`	887 B
`packages/wonder-blocks-button/dist/es/index.js`	4.12 kB
`packages/wonder-blocks-cell/dist/es/index.js`	2.01 kB
`packages/wonder-blocks-clickable/dist/es/index.js`	3.06 kB
`packages/wonder-blocks-core/dist/es/index.js`	2.9 kB
`packages/wonder-blocks-data/dist/es/index.js`	6.24 kB
`packages/wonder-blocks-dropdown/dist/es/index.js`	18.9 kB
`packages/wonder-blocks-grid/dist/es/index.js`	1.36 kB
`packages/wonder-blocks-icon-button/dist/es/index.js`	2.95 kB
`packages/wonder-blocks-icon/dist/es/index.js`	871 B
`packages/wonder-blocks-labeled-field/dist/es/index.js`	1.84 kB
`packages/wonder-blocks-layout/dist/es/index.js`	1.82 kB
`packages/wonder-blocks-link/dist/es/index.js`	2.28 kB
`packages/wonder-blocks-modal/dist/es/index.js`	5.42 kB
`packages/wonder-blocks-pill/dist/es/index.js`	1.65 kB
`packages/wonder-blocks-popover/dist/es/index.js`	4.88 kB
`packages/wonder-blocks-progress-spinner/dist/es/index.js`	1.52 kB
`packages/wonder-blocks-search-field/dist/es/index.js`	1.34 kB
`packages/wonder-blocks-switch/dist/es/index.js`	1.92 kB
`packages/wonder-blocks-testing-core/dist/es/index.js`	3.74 kB
`packages/wonder-blocks-testing/dist/es/index.js`	1.07 kB
`packages/wonder-blocks-theming/dist/es/index.js`	693 B
`packages/wonder-blocks-timing/dist/es/index.js`	1.8 kB
`packages/wonder-blocks-toolbar/dist/es/index.js`	905 B
`packages/wonder-blocks-tooltip/dist/es/index.js`	6.99 kB
`packages/wonder-blocks-typography/dist/es/index.js`	1.23 kB

_{compressed-size-action}

github-actions · 2025-01-22T15:11:55Z

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-rpfqdqdrjr.chromatic.com/

Chromatic results:

Metric	Total
Captured snapshots	169
Tests with visual changes	0
Total stories	530
Inherited (not captured) snapshots [TurboSnap]	211
Tests on the build	380

…lor tokens

…to use semanticColor tokens

… snapshots

khan-actions-bot · 2025-01-22T16:54:46Z

Gerald

Required Reviewers

@Khan/wonder-blocks for changes to .changeset/eighty-zebras-burn.md, .changeset/unlucky-planes-admire.md, __docs__/components/all-variants.tsx, __docs__/wonder-blocks-form/checkbox-accessibility.stories.tsx, __docs__/wonder-blocks-form/checkbox-group.stories.tsx, __docs__/wonder-blocks-form/checkbox-variants.stories.tsx, __docs__/wonder-blocks-form/checkbox.stories.tsx, __docs__/wonder-blocks-form/radio-variants.stories.tsx, __docs__/wonder-blocks-form/radio.stories.tsx, packages/wonder-blocks-form/src/components/checkbox-core.tsx, packages/wonder-blocks-form/src/components/choice-internal.tsx, packages/wonder-blocks-form/src/components/group-styles.ts, packages/wonder-blocks-form/src/components/radio-core.tsx, packages/wonder-blocks-tokens/src/tokens/semantic-color.ts

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

github-actions · 2025-01-22T16:55:33Z

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (3fef0a8) and published all packages with changesets to npm.

You can install the packages in webapp by running:

./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2439"

Packages can also be installed manually by running:

yarn add @khanacademy/wonder-blocks-<package-name>@PR2439

beaesguerra

Left some comments around semantic token usage!

Things are looking great so far! The semantic tokens make it easier to review styling code changes since we can focus on if the semantics make sense for the use case (rather than the color values. We can check for how it looks in Chromatic!). This will also help us have more consistent styles across components 😄

__docs__/wonder-blocks-form/checkbox-accessibility.stories.tsx

beaesguerra · 2025-01-23T22:50:55Z

packages/wonder-blocks-form/src/components/checkbox-core.tsx

-            color={disabled ? offBlack32 : white}
+            color={
+                disabled
+                    ? semanticColor.action.disabled.default


thought: I wonder if it would be helpful to have semanticColor.icon.disabled? We have semanticColor.icon.action!

Oh that's a great call! I'll add that token in this PR.

beaesguerra · 2025-01-23T22:53:26Z

packages/wonder-blocks-form/src/components/checkbox-core.tsx

@@ -133,15 +139,15 @@ const sharedStyles = StyleSheet.create({
        outline: "none",
        boxSizing: "border-box",
        borderStyle: "solid",
-        borderWidth: 1,
+        borderWidth: border.width.hairline,
        borderRadius: 3,


The border radius can be a token too!

Suggested change

borderRadius: 3,

borderRadius: border.radius.small_3,

beaesguerra · 2025-01-23T22:55:43Z

packages/wonder-blocks-form/src/components/checkbox-core.tsx

+        backgroundColor: semanticColor.action.disabled.secondary,
+        borderColor: semanticColor.border.primary,


Would it be helpful for there to be background and border tokens for disabled actions? So then this could be:

Suggested change

backgroundColor: semanticColor.action.disabled.secondary,

borderColor: semanticColor.border.primary,

backgroundColor: semanticColor.action.disabled.background,

borderColor: semanticColor.action.disabled.border,

hmmm yeah, the more we discuss this, the more I think we should have at least aborder/bg/fg definition in action.disabled. That would make it easier to distinguish the differences between action and status tokens. I really hope we can simplify the button tokens soon so we can benefit from this simplified approach where we can only have to define bg and fg tokens.

@beaesguerra I'm going to keep it this way for now, but I'll ask Design later today to consolidate on a common structure for action tokens.

beaesguerra · 2025-01-23T22:58:14Z

packages/wonder-blocks-form/src/components/checkbox-core.tsx


                // Focus and hover have the same style. Focus style only shows
                // up with keyboard navigation.
                ":focus-visible": {
-                    boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`,
+                    outline: `${border.width.thin}px solid ${colorAction.hover.border}`,


Would this change to the global focus outline token?

Good question, I'll add a TODO comment to change this later.

beaesguerra · 2025-01-23T23:53:53Z

packages/wonder-blocks-form/src/components/checkbox-core.tsx

-                    borderWidth: 2,
+                    backgroundColor: error
+                        ? semanticColor.status.critical.background
+                        : colorAction.hover.background,


Would it make sense for there to be a background property for the global focus token as well?

Good question.... for now, it will live as semanticColor.border.focus. We'll see how we define the global focus tokens for handling other things like outlineOffset, width, etc.

beaesguerra · 2025-01-23T23:56:33Z

packages/wonder-blocks-form/src/components/radio-core.tsx

@@ -62,7 +60,7 @@ const disabledChecked = {
    height: size / 2,
    width: size / 2,
    borderRadius: "50%",
-    backgroundColor: offBlack32,
+    backgroundColor: semanticColor.action.disabled.default,


Would it make sense to use semanticColor.action.disabled.background here?

Ahh I see, we have action.disabled.default and action.disabled.secondary. for the unselected/selected disabled states. Maybe this would be a case for using action.disabled and action.disabledInverse? So it would look like this:

disabled: { background: ..., foreground: ..., border: ..., }, disabledInverse: { background: ..., foreground: ..., border: ..., },

I see what you mean. We probably don't need an Inverse disabled state as it depends on every component to define that case. As Radio is very specific, I can add this object that you are proposing at the component level. This would probably be a good case for a component-theme definition for this component.

Here's the figma for reference (which I followed for applying the tokens): https://www.figma.com/design/VbVu3h2BpBhH80niq101MHHE/%F0%9F%92%A0-Main-Components?node-id=15197-6741&t=rQdKVXrPUcAWd6Ac-4

beaesguerra · 2025-01-23T23:58:21Z

packages/wonder-blocks-form/src/components/radio-core.tsx

-                backgroundColor: white,
-                borderColor: palette.base,
+                backgroundColor: colorAction.default.background,
+                borderColor: colorAction.default.foreground,


Should this be colorAction.default.border?

ah unfortunately, we can't for now. the default border is gray instead of blue. That's why I had to use foreground. I'll add a TODO comment to later change this.

beaesguerra · 2025-01-23T23:58:53Z

packages/wonder-blocks-form/src/components/radio-core.tsx

                borderWidth: size / 4,

                // Focus and hover have the same style. Focus style only shows
                // up with keyboard navigation.
                ":focus-visible": {
-                    boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`,
+                    outline: `${border.width.thin}px solid ${colorAction.hover.border}`,


Same question around if this would use the global focus token!

I'll add a TODO comment here.

beaesguerra · 2025-01-24T00:08:23Z

packages/wonder-blocks-form/src/components/checkbox-core.tsx

-const fadedBlue = mix(color.fadedBlue16, white);
-const activeBlue = color.activeBlue;
-const fadedRed = mix(color.fadedRed8, white);
-const activeRed = color.activeRed;


Yay glad we can simplify things! 🎉

…orm-cb-rb-semantic-v2

…o semanticColor.

…orm-cb-rb-semantic-v2

beaesguerra

Looks good! 🎉 Thanks for refining the token usage!

codecov · 2025-01-29T15:38:50Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 0.00%. Comparing base (c162abb) to head (0d9c7f1).
Report is 1 commits behind head on main.

Additional details and impacted files

@@     Coverage Diff      @@
##   main   #2439   +/-   ##
============================
============================

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c162abb...0d9c7f1. Read the comment docs.

## Summary: Continuing with the semantic colors migration, this PR covers the `Switch` component. - Refactored the `Switch` themes to use semantic colors. - Added `All Variants` story to switch. - Disabled chromatic snapshots for existing stories (now using All Variants). ### Implementation plan: 1. #2439 2. #2440 3. Switch (current PR) 4. Accordion, Banner, BirthdayPicker 5. IconButton 6. Clickable, Link 7. Modal 8. Popover, Tooltip 9. Pill, Toolbar Issue: WB-1814 ## Test plan: - Navigate to /?path=/story/packages-switch-switch-all-variants--default - Verify that the styles are correct. Author: jandrade Reviewers: jandrade, beaesguerra Required Reviewers: Approved By: beaesguerra Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Chromatic - Build and test on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ gerald, ⏭️ dependabot Pull Request URL: #2441

…c colors (#2446) ## Summary: Next step is to refactor the `Accordion`, `Banner`, and `BirthdayPicker` components to use semantic colors. ### Implementation plan: 1. #2439 2. #2440 3. #2441 4. Accordion, Banner, BirthdayPicker (current PR) 5. IconButton 6. Clickable, Link 7. Modal 8. Popover, Tooltip 9. Pill, Toolbar Issue: WB-1814 ## Test plan: Verify that the Chromatic snapshots are unchanged. Author: jandrade Reviewers: jandrade, beaesguerra Required Reviewers: Approved By: beaesguerra Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Chromatic - Build and test on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️ dependabot Pull Request URL: #2446

## Summary: Next step is to refactor the `IconButton` component to use semantic colors. Besides the migration, this PR also includes the following changes: - Reworked the theme structure to make it closer to the semanticColor structure. - Moved all the color-related CSS properties to a separate function (`getStylesByKind`). - Added `border` to all the states to prepare the work for Polaris as these icon buttons will look similar to the Button ones. ### Implementation plan: 1. #2439 2. #2440 3. #2441 4. #2446 5. IconButton (current PR) 6. Clickable, Link 7. Modal 8. Popover, Tooltip 9. Pill, Toolbar Issue: WB-1814 ## Test plan: Verify that the Chromatic snapshots are unchanged. URL: `/?path=/story/packages-iconbutton-all-variants--default` Author: jandrade Reviewers: jandrade, marcysutton, beaesguerra Required Reviewers: Approved By: marcysutton, beaesguerra Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Chromatic - Build and test on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ⏭️ dependabot Pull Request URL: #2449

[form-cb-rb-semantic-v2] Generate All Variant stories for Checkbox an…

2e277e1

…d Radio components

jandrade self-assigned this Jan 22, 2025

Juan Andrade added 5 commits January 22, 2025 11:24

[form-cb-rb-semantic-v2] Migrate Radio and Checkbox to use semanticCo…

dd91fb7

…lor tokens

[form-cb-rb-semantic-v2] docs(changeset): Migrate Radio and Checkbox …

4200fa1

…to use semanticColor tokens

[form-cb-rb-semantic-v2] Remove redundant tests in favor of chromatic…

b5a72c9

… snapshots

[form-cb-rb-semantic-v2] Fix disabled styles

a933be0

[form-cb-rb-semantic-v2] Use semanticColor in stories

714e51a

jandrade marked this pull request as ready for review January 22, 2025 16:54

khan-actions-bot requested a review from a team January 22, 2025 16:54

jandrade mentioned this pull request Jan 23, 2025

[WB-1814.3] Refactor Switch to use semantic colors #2441

Merged

beaesguerra reviewed Jan 24, 2025

View reviewed changes

Juan Andrade added 3 commits January 28, 2025 12:36

[form-cb-rb-semantic-v2] Merge remote-tracking branch 'origin' into f…

35550f1

…orm-cb-rb-semantic-v2

[form-cb-rb-semantic-v2] docs(changeset): Add icon.disabled token t…

6846854

…o semanticColor.

[form-cb-rb-semantic-v2] Address feedback

8a92bc0

khan-actions-bot requested a review from a team January 28, 2025 20:25

Juan Andrade added 4 commits January 28, 2025 15:47

[form-cb-rb-semantic-v2] Fix styles (Radio)

2c13554

[form-cb-rb-semantic-v2] Merge remote-tracking branch 'origin' into f…

3848b7a

…orm-cb-rb-semantic-v2

[form-cb-rb-semantic-v2] Use semantic focus border color

fad122b

[form-cb-rb-semantic-v2] Revert semantic focus color

0d9c7f1

jandrade requested a review from beaesguerra January 28, 2025 22:20

beaesguerra approved these changes Jan 28, 2025

View reviewed changes

jandrade mentioned this pull request Jan 29, 2025

[WB-1814.4] Refactor Accordion, Banner, BirthdayPicker to use semantic colors #2446

Merged

jandrade merged commit 8cfaeab into main Jan 29, 2025
14 checks passed

jandrade deleted the form-cb-rb-semantic-v2 branch January 29, 2025 15:38

jandrade mentioned this pull request Jan 30, 2025

[WB-1814.5] Refactor IconButton to use semantic colors #2449

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WB-1814.1] Refactor Checkbox and Radio to use semantic colors #2439

[WB-1814.1] Refactor Checkbox and Radio to use semantic colors #2439

jandrade commented Jan 22, 2025 •

edited

Loading

changeset-bot bot commented Jan 22, 2025 •

edited

Loading

github-actions bot commented Jan 22, 2025 •

edited

Loading

github-actions bot commented Jan 22, 2025 •

edited

Loading

khan-actions-bot commented Jan 22, 2025 •

edited

Loading

github-actions bot commented Jan 22, 2025 •

edited

Loading

beaesguerra left a comment

beaesguerra Jan 23, 2025

jandrade Jan 27, 2025

beaesguerra Jan 23, 2025

beaesguerra Jan 23, 2025

jandrade Jan 27, 2025

jandrade Jan 28, 2025

beaesguerra Jan 23, 2025

jandrade Jan 27, 2025

beaesguerra Jan 23, 2025

jandrade Jan 27, 2025

beaesguerra Jan 23, 2025

beaesguerra Jan 24, 2025

jandrade Jan 27, 2025

beaesguerra Jan 23, 2025

jandrade Jan 27, 2025

beaesguerra Jan 23, 2025

jandrade Jan 27, 2025

beaesguerra Jan 24, 2025

beaesguerra left a comment

codecov bot commented Jan 29, 2025

		backgroundColor: semanticColor.action.disabled.secondary,
		borderColor: semanticColor.border.primary,

[WB-1814.1] Refactor Checkbox and Radio to use semantic colors #2439

[WB-1814.1] Refactor Checkbox and Radio to use semantic colors #2439

Conversation

jandrade commented Jan 22, 2025 • edited Loading

Summary:

Test plan:

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

🦋 Changeset detected

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

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

A new build was pushed to Chromatic! 🚀

Chromatic results:

khan-actions-bot commented Jan 22, 2025 • edited Loading

Gerald

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

npm Snapshot: Published

beaesguerra 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

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

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

beaesguerra left a comment

Choose a reason for hiding this comment

codecov bot commented Jan 29, 2025

Codecov Report

jandrade commented Jan 22, 2025 •

edited

Loading

changeset-bot bot commented Jan 22, 2025 •

edited

Loading

github-actions bot commented Jan 22, 2025 •

edited

Loading

github-actions bot commented Jan 22, 2025 •

edited

Loading

khan-actions-bot commented Jan 22, 2025 •

edited

Loading

github-actions bot commented Jan 22, 2025 •

edited

Loading