[WB-1853] Button: Refactor theme to support semanticColor tokens (#2431)

## Summary: Now that we have `semanticColor` tokens available, this PR is responsible for refactoring the existing `Button` code to use these tokens instead of the `color` primitive tokens. Also, it modifies the theme structure to follow closer the semantic color tokens structure. Also added a `light.destructive.disabled` variant to the Dark story as we didn't include a snapshot for it. Issue: WB-1853 ## Test plan: Navigate to `/?path=/docs/packages-button--docs` and verify that the button hasn't changed. 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: #2431
Khan · Jan 29, 2025 · c089d35 · c089d35
1 parent 8cfaeab
commit c089d35
Show file tree

Hide file tree

Showing 7 changed files with 428 additions and 235 deletions.
diff --git a/.changeset/many-apes-play.md b/.changeset/many-apes-play.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-button": patch
+---
+
+Use `semanticColor` in Button. This replaces the use of `color` primitive tokens in favor of semantic color tokens
diff --git a/__docs__/wonder-blocks-button/button-variants.stories.tsx b/__docs__/wonder-blocks-button/button-variants.stories.tsx
@@ -17,16 +17,14 @@ import Button from "@khanacademy/wonder-blocks-button";
 export default {
     title: "Packages / Button / All Variants",
     parameters: {
-        docs: {
-            autodocs: false,
-        },
         chromatic: {
             // NOTE: This is required to prevent Chromatic from cutting off the
             // dark background in screenshots (accounts for all the space taken
             // by the variants).
             viewports: [1700],
         },
     },
+    tags: ["!autodocs"],
 } as Meta;
 
 type StoryComponentType = StoryObj<typeof Button>;
@@ -115,13 +113,29 @@ const KindVariants = ({light}: {light: boolean}) => {
             {sizes.map((size) => (
                 <>
                     {colors.map((color) => (
+                        <>
+                            <VariantsGroup
+                                size={size}
+                                color={color}
+                                light={light}
+                            />
+                            {light && (
+                                <VariantsGroup
+                                    size={size}
+                                    color={color}
+                                    disabled={true}
+                                    light={light}
+                                />
+                            )}
+                        </>
+                    ))}
+                    {!light && (
                         <VariantsGroup
                             size={size}
-                            color={color}
+                            disabled={true}
                             light={light}
                         />
-                    ))}
-                    <VariantsGroup size={size} disabled={true} light={light} />
+                    )}
                 </>
             ))}
         </>

diff --git a/__docs__/wonder-blocks-button/button.stories.tsx b/__docs__/wonder-blocks-button/button.stories.tsx
@@ -187,26 +187,28 @@ WithColor.parameters = {
 };
 
 export const Dark: StoryComponentType = () => (
-    <View style={{backgroundColor: color.darkBlue, padding: spacing.medium_16}}>
-        <View style={{flexDirection: "row"}}>
+    <View
+        style={{
+            backgroundColor: color.darkBlue,
+            gap: spacing.medium_16,
+            padding: spacing.medium_16,
+        }}
+    >
+        <View style={{flexDirection: "row", gap: spacing.medium_16}}>
             <Button onClick={() => {}} light={true}>
                 Hello, world!
             </Button>
-            <Strut size={16} />
             <Button onClick={() => {}} light={true} kind="secondary">
                 Hello, world!
             </Button>
-            <Strut size={16} />
             <Button onClick={() => {}} light={true} kind="tertiary">
                 Hello, world!
             </Button>
         </View>
-        <Strut size={16} />
-        <View style={{flexDirection: "row"}}>
+        <View style={{flexDirection: "row", gap: spacing.medium_16}}>
             <Button onClick={() => {}} light={true} disabled={true}>
                 Hello, world!
             </Button>
-            <Strut size={16} />
             <Button
                 onClick={() => {}}
                 light={true}
@@ -215,7 +217,6 @@ export const Dark: StoryComponentType = () => (
             >
                 Hello, world!
             </Button>
-            <Strut size={16} />
             <Button
                 onClick={() => {}}
                 light={true}
@@ -225,12 +226,10 @@ export const Dark: StoryComponentType = () => (
                 Hello, world!
             </Button>
         </View>
-        <Strut size={16} />
-        <View style={{flexDirection: "row"}}>
+        <View style={{flexDirection: "row", gap: spacing.medium_16}}>
             <Button onClick={() => {}} light={true} color="destructive">
                 Hello, world!
             </Button>
-            <Strut size={16} />
             <Button
                 onClick={() => {}}
                 light={true}
@@ -239,7 +238,6 @@ export const Dark: StoryComponentType = () => (
             >
                 Hello, world!
             </Button>
-            <Strut size={16} />
             <Button
                 onClick={() => {}}
                 light={true}
@@ -249,6 +247,34 @@ export const Dark: StoryComponentType = () => (
                 Hello, world!
             </Button>
         </View>
+        <View style={{flexDirection: "row", gap: spacing.medium_16}}>
+            <Button
+                onClick={() => {}}
+                disabled={true}
+                light={true}
+                color="destructive"
+            >
+                Hello, world!
+            </Button>
+            <Button
+                onClick={() => {}}
+                disabled={true}
+                light={true}
+                kind="secondary"
+                color="destructive"
+            >
+                Hello, world!
+            </Button>
+            <Button
+                onClick={() => {}}
+                disabled={true}
+                light={true}
+                kind="tertiary"
+                color="destructive"
+            >
+                Hello, world!
+            </Button>
+        </View>
     </View>
 );
 

diff --git a/packages/wonder-blocks-button/src/components/__tests__/button-with-icon.test.tsx b/packages/wonder-blocks-button/src/components/__tests__/button-with-icon.test.tsx
@@ -228,50 +228,4 @@ describe("button with icon", () => {
         expect(icon).toBeInTheDocument();
         expect(icon).toHaveAttribute("aria-hidden", "true");
     });
-
-    test("default theme tertiary button icon has no hover style", async () => {
-        // Arrange
-        render(
-            <Button kind="tertiary" testId={"button-icon-test"} endIcon={plus}>
-                Label
-            </Button>,
-        );
-
-        // Act
-        const button = await screen.findByTestId("button-icon-test");
-        const iconWrapper = await screen.findByTestId(
-            "button-icon-test-end-icon-wrapper",
-        );
-        await userEvent.hover(button);
-
-        // Assert
-        expect(iconWrapper).toHaveStyle(`backgroundColor: transparent`);
-    });
-
-    test("Khanmigo tertiary button icon has hover style", async () => {
-        // Arrange
-        render(
-            <ThemeSwitcherContext.Provider value="khanmigo">
-                <Button
-                    kind="tertiary"
-                    testId={"button-icon-test"}
-                    endIcon={plus}
-                >
-                    Label
-                </Button>
-            </ThemeSwitcherContext.Provider>,
-        );
-
-        // Act
-        const button = await screen.findByTestId("button-icon-test");
-        const iconWrapper = await screen.findByTestId(
-            "button-icon-test-end-icon-wrapper",
-        );
-        await userEvent.hover(button);
-
-        // Assert
-        expect(iconWrapper).toHaveStyle(
-            `backgroundColor: ${color.fadedBlue16}`,
-        );
-    });
 });