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

jandrade · 2025-01-30T21:16:46Z

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:

[WB-1814.1] Refactor Checkbox and Radio to use semantic colors #2439
[WB-1814.2] Refactor TextField and TextArea to use semantic colors #2440
[WB-1814.3] Refactor Switch to use semantic colors #2441
[WB-1814.4] Refactor Accordion, Banner, BirthdayPicker to use semantic colors #2446
IconButton (current PR)
Clickable, Link
Modal
Popover, Tooltip
Pill, Toolbar

Issue: WB-1814

Test plan:

Verify that the Chromatic snapshots are unchanged.

URL: /?path=/story/packages-iconbutton-all-variants--default

changeset-bot · 2025-01-30T21:16:51Z

🦋 Changeset detected

Latest commit: e7b02f3

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

This PR includes changesets to release 8 packages

Name	Type
@khanacademy/wonder-blocks-icon-button	Patch
@khanacademy/wonder-blocks-banner	Patch
@khanacademy/wonder-blocks-modal	Patch
@khanacademy/wonder-blocks-popover	Patch
@khanacademy/wonder-blocks-search-field	Patch
@khanacademy/wonder-blocks-dropdown	Patch
@khanacademy/wonder-blocks-tooltip	Patch
@khanacademy/wonder-blocks-birthday-picker	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-30T21:18:42Z

Size Change: +169 B (+0.17%)

Total Size: 98.5 kB

Filename	Size	Change
`packages/wonder-blocks-icon-button/dist/es/index.js`	3.12 kB	+169 B (+5.73%)	🔍

ℹ️ View Unchanged

Filename	Size
`packages/wonder-blocks-accordion/dist/es/index.js`	3.75 kB
`packages/wonder-blocks-banner/dist/es/index.js`	1.55 kB
`packages/wonder-blocks-birthday-picker/dist/es/index.js`	1.8 kB
`packages/wonder-blocks-breadcrumbs/dist/es/index.js`	887 B
`packages/wonder-blocks-button/dist/es/index.js`	4.31 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-form/dist/es/index.js`	5.99 kB
`packages/wonder-blocks-grid/dist/es/index.js`	1.36 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.85 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`	2 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-tokens/dist/es/index.js`	2.54 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-30T21:20:02Z

A new build was pushed to Chromatic! 🚀

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

Chromatic results:

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

jandrade · 2025-01-30T21:46:58Z

packages/wonder-blocks-icon-button/src/components/icon-button-core.tsx

+    buttonColor: ButtonColor,
+    disabled: boolean,
+    kind: Kind,
    light: boolean,
-    buttonColor: string,
+    theme: IconButtonThemeContract,


note: Just reordered the arguments alphabetically.

jandrade · 2025-01-30T21:48:02Z

packages/wonder-blocks-icon-button/src/components/icon-button-core.tsx

 ) {
-    switch (kind) {


note: Changed from switch to if as constants cannot be redefined within switch statements. I did this as I wanted to be able to reuse const themeVariant etc for better readability.

jandrade · 2025-01-30T21:50:49Z

packages/wonder-blocks-icon-button/src/components/icon-button-core.tsx

 }

 const _generateStyles = (
-    buttonColor = "default",
-    kind: "primary" | "secondary" | "tertiary",
+    buttonColor: ButtonColor = "default",


note: Same here related to reordering args alphabetically.

jandrade · 2025-01-30T21:52:59Z

packages/wonder-blocks-icon-button/src/themes/default.ts

note: Modified the structure to make it really closer to semanticColor.action. Note that this time used primary, secondary, etc instead of filled, outlinedto be able to map the keys to the props defined inIconButton(e.g.kind="primary"`). Still undecided with which approach to take. Any thoughts are completely welcome!

khan-actions-bot · 2025-01-30T21:55:06Z

Gerald

Required Reviewers

@Khan/wonder-blocks for changes to .changeset/sixty-jars-guess.md, __docs__/wonder-blocks-icon-button/icon-button-variants.stories.tsx, __docs__/wonder-blocks-icon-button/icon-button.stories.tsx, packages/wonder-blocks-icon-button/src/components/icon-button-core.tsx, packages/wonder-blocks-icon-button/src/themes/default.ts, packages/wonder-blocks-icon-button/src/themes/khanmigo.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-30T21:55:49Z

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (7ed03e7) 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="PR2449"

Packages can also be installed manually by running:

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

marcysutton

This looks like a really robust overhaul! I left some questions on things I wasn't understanding 100%. But I think it's going to be way easier to theme with this in place. Nice work!

marcysutton · 2025-01-31T18:14:48Z

__docs__/wonder-blocks-icon-button/icon-button-variants.stories.tsx

-            autodocs: false,
-        },
-    },
+    tags: ["!autodocs"],


praise: I didn't know you could do this! Nice!

marcysutton · 2025-01-31T18:17:12Z

packages/wonder-blocks-icon-button/src/components/icon-button-core.tsx

@@ -101,6 +104,7 @@ const IconButtonCore: React.ForwardRefExoticComponent<
    const renderInner = (router: any): React.ReactNode => {
        const buttonStyles = _generateStyles(
            color,
+            !!disabled,


question: Is the boolean coercion of disabled meant to handle an undefined case?

That's correct, this is mostly required b/c that prop is optional.

marcysutton · 2025-01-31T18:19:54Z

packages/wonder-blocks-icon-button/src/components/icon-button-core.tsx

+ */
+function getActionType(buttonColor: ButtonColor, disabled: boolean) {
+    const actionType =
+        buttonColor === "destructive" ? "destructive" : "progressive";


question: could you use nullish coalescing here? (out of curiosity)

const actionType = buttonColor === "destructive" ?? "progressive";

In this case it wouldn't work because the left-hand operand would return true if the condition is fulfilled.

const actionType = buttonColor === "destructive" ?? "progressive"; // when `buttonColor=destructive` => actionType=true // when `buttonColor=default` => actionType="progressive"

Apologies if I'm being too literal 😅, but maybe I'm missing something in the expression (this could still use nullish coalescing here, which would be cool).

marcysutton · 2025-01-31T18:27:25Z

packages/wonder-blocks-icon-button/src/themes/default.ts

+ * will apply the same styles as Button.
+ */
+const baseColorStates = {
+    ...semanticColor.action.outlined,


question: what case does this spread token cover? Could you add a comment for it?

Good point! I'll add it.

marcysutton · 2025-01-31T18:30:27Z

packages/wonder-blocks-icon-button/src/components/icon-button-core.tsx

@@ -18,6 +18,9 @@ import {
    IconButtonThemeContract,
 } from "../themes/themed-icon-button";

+type Kind = "primary" | "secondary" | "tertiary";
+type ButtonColor = "default" | "destructive";


question: Where does progressive come in? Should that be included here among the options?

ahh great question..... so the thing is that historically we have called the "blue" color version as default, but this is changing with Polaris. This is a change that it is being proposed in Figma (which makes sense IMO). So we have to make that mapping (default -> progressive), but the goal is to align on the naming later. I'll add a note in the code to clarify that.

I created a ticket to address this later. I'll add the TODO comment to point to it. Thanks again for raising this question.

beaesguerra

Looks good! Left a question around naming!

beaesguerra · 2025-01-31T20:44:07Z

packages/wonder-blocks-icon-button/src/components/icon-button-core.tsx

-            : theme.color.stroke.action.default;
-
-    const buttonType = `${color}-${kind}-${light}-${size}-${themeName}`;
+    const buttonType = `${buttonColor}-d_${disabled}-${kind}-l_${light}-${size}-${themeName}`;


question: What does the -d_ mean in the buttonType name?

Disabled, but that's just to be able to cache this string properly.

This is mostly for debugging purposes if needed.

codecov · 2025-01-31T22:54:06Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 0.00%. Comparing base (cbf9c34) to head (e7b02f3).
Report is 4 commits behind head on main.

Additional details and impacted files

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

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 cbf9c34...e7b02f3. Read the comment docs.

Next step is to refactor the `Link` 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. - Updated stories to use the new semantic colors. ### Implementation plan: 1. #2439 2. #2440 3. #2441 4. #2446 5. #2449 6. Link (current PR) 7. Modal 8. Popover, Tooltip 9. Pill 10. Clickable, Toolbar Issue: WB-1814 ## Test plan: Verify that the Chromatic snapshots are unchanged. URL: `/?path=/story/packages-link-link-all-variants--default` 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), ✅ 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), ⏭️ dependabot, ✅ gerald Pull Request URL: #2464

## Summary: Next step is to refactor the `Modal` package to use semantic colors. Besides the migration, this PR also includes the following changes: - Reworked the theme structure to split tokens by sub-component. - Updated stories to use the new semantic colors. - Adapted some components to use theming instead of hardcoded colors. ### Implementation plan: 1. #2439 2. #2440 3. #2441 4. #2446 5. #2449 6. #2464 7. Modal (current PR) 8. Popover, Tooltip 9. Dropdown 10. Clickable, Pill, Toolbar Issue: WB-1814 ## Test plan: Verify that the Modal Chromatic snapshots are mostly unchanged. URL: `/?path=/docs/packages-modal-onepanedialog--docs&globals=viewport:desktop` Author: jandrade Reviewers: jandrade, beaesguerra, marcysutton Required Reviewers: Approved By: beaesguerra Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (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), ✅ gerald, ⏭️ dependabot Pull Request URL: #2468

…#2470) ## Summary: Next step is to refactor the `Popover`, `Tooltip` and `Toolbar` packages to use semantic colors. ### Implementation plan: 1. #2439 2. #2440 3. #2441 4. #2446 5. #2449 6. #2464 7. #2468 8. Popover, Tooltip, Toolbar (current PR) 9. Dropdown 10. Clickable, Pill Issue: WB-1814 ## Test plan: Verify that the Modal Chromatic snapshots are mostly unchanged. Author: jandrade Reviewers: 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), ✅ 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: #2470

## Summary: - Migrate Clickable and Pill to use semantic colors - Add `All Variants` story to Pill ### Implementation plan: 1. #2439 2. #2440 3. #2441 4. #2446 5. #2449 6. #2464 7. #2468 8. #2470 9. Clickable, Pill (current PR) 10. Dropdown Issue: WB-1814 ## Test plan: Navigate to the `Clickable` and `Pill` stories in Storybook and verify that the colors 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), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ gerald, ⏭️ dependabot Pull Request URL: #2472

…2474) ## Summary: Last PR that migrates the remaining components to use semantic colors. - Added `All Variants` stories to `ActionItem` and `OptionItem`. - Refactored `ActionItem` and `OptionItem` to use semantic colors. - Also refactored `ActionMenu`, `SingleSelect`, `MultiSelect` and `Combobox` to use semantic colors. - Simplified the styles in `ActionMenuOpenerCore` to use a single static StyleSheet instance (instead of generating another one in runtime). ### Implementation plan: 1. #2439 2. #2440 3. #2441 4. #2446 5. #2449 6. #2464 7. #2468 8. #2470 9. #2472 10. Dropdown (current PR) Issue: WB-1814 ## Test plan: Verify that all the dropdown stories are still working as expected. Author: jandrade Reviewers: jandrade, beaesguerra Required Reviewers: Approved By: beaesguerra Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ 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), ⏭️ dependabot, ✅ gerald Pull Request URL: #2474

[semantic-icon-button] docs(changeset): Migrate to semanticColor tokens

0c29ccd

jandrade self-assigned this Jan 30, 2025

[semantic-icon-button] Fix bg default color

0b6acda

jandrade commented Jan 30, 2025

View reviewed changes

[semantic-icon-button] Switch to semanticColor in a few extra places

d6ca781

jandrade marked this pull request as ready for review January 30, 2025 21:54

khan-actions-bot requested a review from a team January 30, 2025 21:55

[semantic-icon-button] Update stories

04b0fcf

marcysutton approved these changes Jan 31, 2025

View reviewed changes

beaesguerra approved these changes Jan 31, 2025

View reviewed changes

[semantic-icon-button] Add TODO comment

e7b02f3

jandrade merged commit c1f420a into main Jan 31, 2025
13 of 14 checks passed

jandrade deleted the semantic-icon-button branch January 31, 2025 22:53

jandrade mentioned this pull request Feb 18, 2025

[WB-1814.10] Refactor wonder-blocks-dropdown to use semantic colors #2474

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jandrade 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

jandrade Jan 30, 2025

jandrade Jan 30, 2025

jandrade Jan 30, 2025

jandrade Jan 30, 2025

khan-actions-bot commented Jan 30, 2025 •

edited

Loading

github-actions bot commented Jan 30, 2025 •

edited

Loading

marcysutton left a comment

marcysutton Jan 31, 2025 •

edited

Loading

marcysutton Jan 31, 2025

jandrade Jan 31, 2025

marcysutton Jan 31, 2025

jandrade Jan 31, 2025

marcysutton Jan 31, 2025

jandrade Jan 31, 2025

marcysutton Jan 31, 2025

jandrade Jan 31, 2025

jandrade Jan 31, 2025

beaesguerra left a comment

beaesguerra Jan 31, 2025

jandrade Jan 31, 2025

codecov bot commented Jan 31, 2025

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

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

Conversation

jandrade commented Jan 30, 2025 • edited Loading

Summary:

Implementation plan:

Test plan:

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

A new build was pushed to Chromatic! 🚀

Chromatic results:

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

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

Gerald

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

npm Snapshot: Published

marcysutton left a comment

Choose a reason for hiding this comment

marcysutton Jan 31, 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

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Jan 31, 2025

Codecov Report

jandrade 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

khan-actions-bot commented Jan 30, 2025 •

edited

Loading

github-actions bot commented Jan 30, 2025 •

edited

Loading

marcysutton Jan 31, 2025 •

edited

Loading