@khanacademy/wonder-blocks-button 6.0.1 → 6.2.0

package/src/components/__tests__/button-with-icon.test.tsx

@@ -0,0 +1,274 @@
+/**
+ * Tests for Wonder Blocks Button with icons.
+ * The rest of the button tests can be found in button.test.tsx.
+ */
+
+import * as React from "react";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import plus from "@phosphor-icons/core/regular/plus.svg";
+
+import {ThemeSwitcherContext, tokens} from "@khanacademy/wonder-blocks-theming";
+
+import Button from "../button";
+
+describe("button with icon", () => {
+    test("start icon should be hidden from Screen Readers", () => {
+        // Arrange
+        render(
+            <Button testId={"button-focus-test"} startIcon={plus}>
+                Label
+            </Button>,
+        );
+
+        // Act
+        const icon = screen.getByTestId("button-focus-test-start-icon");
+
+        // Assert
+        expect(icon).toHaveAttribute("aria-hidden", "true");
+    });
+
+    test("end icon should be hidden from Screen Readers", () => {
+        // Arrange
+        render(
+            <Button testId={"button-focus-test"} endIcon={plus}>
+                Label
+            </Button>,
+        );
+
+        // Act
+        const icon = screen.getByTestId("button-focus-test-end-icon");
+
+        // Assert
+        expect(icon).toHaveAttribute("aria-hidden", "true");
+    });
+
+    /**
+     * Primary button
+     */
+
+    test("icon is displayed when button contains startIcon", () => {
+        // Arrange
+        render(
+            <Button testId={"button-focus-test"} startIcon={plus}>
+                Label
+            </Button>,
+        );
+
+        // Act
+        const icon = screen.getByTestId("button-focus-test-start-icon");
+
+        // Assert
+        expect(icon).toBeInTheDocument();
+        expect(icon).toHaveAttribute("aria-hidden", "true");
+    });
+
+    test("icon is displayed when button contains endIcon", () => {
+        // Arrange
+        render(
+            <Button testId={"button-focus-test"} endIcon={plus}>
+                Label
+            </Button>,
+        );
+
+        // Act
+        const icon = screen.getByTestId("button-focus-test-end-icon");
+
+        // Assert
+        expect(icon).toBeInTheDocument();
+        expect(icon).toHaveAttribute("aria-hidden", "true");
+    });
+
+    test("both icons are displayed when button contains startIcon and endIcon", () => {
+        // Arrange
+        render(
+            <Button
+                testId={"button-focus-test"}
+                startIcon={plus}
+                endIcon={plus}
+            >
+                Label
+            </Button>,
+        );
+
+        // Act
+        const startIcon = screen.getByTestId("button-focus-test-start-icon");
+        const endIcon = screen.getByTestId("button-focus-test-end-icon");
+
+        // Assert
+        expect(startIcon).toBeInTheDocument();
+        expect(endIcon).toBeInTheDocument();
+    });
+
+    /**
+     * Secondary button
+     */
+
+    test("icon is displayed when secondary button contains startIcon", () => {
+        // Arrange
+        render(
+            <Button
+                kind="secondary"
+                testId={"button-icon-test"}
+                startIcon={plus}
+            >
+                Label
+            </Button>,
+        );
+
+        // Act
+        const icon = screen.getByTestId("button-icon-test-start-icon");
+
+        // Assert
+        expect(icon).toBeInTheDocument();
+        expect(icon).toHaveAttribute("aria-hidden", "true");
+    });
+
+    test("icon is displayed when secondary button contains endIcon", () => {
+        // Arrange
+        render(
+            <Button kind="secondary" testId={"button-icon-test"} endIcon={plus}>
+                Label
+            </Button>,
+        );
+
+        // Act
+        const icon = screen.getByTestId("button-icon-test-end-icon");
+
+        // Assert
+        expect(icon).toBeInTheDocument();
+        expect(icon).toHaveAttribute("aria-hidden", "true");
+    });
+
+    test("default theme secondary button icon has no hover style", () => {
+        // Arrange
+        render(
+            <Button kind="secondary" testId={"button-icon-test"} endIcon={plus}>
+                Label
+            </Button>,
+        );
+
+        // Act
+        const button = screen.getByTestId("button-icon-test");
+        const iconWrapper = screen.getByTestId(
+            "button-icon-test-end-icon-wrapper",
+        );
+        userEvent.hover(button);
+
+        // Assert
+        expect(iconWrapper).toHaveStyle(`backgroundColor: transparent`);
+    });
+
+    test("Khanmigo secondary button icon has hover style", () => {
+        // Arrange
+        render(
+            <ThemeSwitcherContext.Provider value="khanmigo">
+                <Button
+                    kind="secondary"
+                    testId={"button-icon-test"}
+                    endIcon={plus}
+                >
+                    Label
+                </Button>
+            </ThemeSwitcherContext.Provider>,
+        );
+
+        // Act
+        const button = screen.getByTestId("button-icon-test");
+        const iconWrapper = screen.getByTestId(
+            "button-icon-test-end-icon-wrapper",
+        );
+        userEvent.hover(button);
+
+        // Assert
+        expect(iconWrapper).toHaveStyle(
+            `backgroundColor: ${tokens.color.fadedBlue16}`,
+        );
+    });
+
+    /**
+     * Tertiary button
+     */
+
+    test("icon is displayed when tertiary button contains startIcon", () => {
+        // Arrange
+        render(
+            <Button
+                kind="tertiary"
+                testId={"button-focus-test"}
+                startIcon={plus}
+            >
+                Label
+            </Button>,
+        );
+
+        // Act
+        const icon = screen.getByTestId("button-focus-test-start-icon");
+
+        // Assert
+        expect(icon).toBeInTheDocument();
+        expect(icon).toHaveAttribute("aria-hidden", "true");
+    });
+
+    test("icon is displayed when tertiary button contains endIcon", () => {
+        // Arrange
+        render(
+            <Button kind="tertiary" testId={"button-focus-test"} endIcon={plus}>
+                Label
+            </Button>,
+        );
+
+        // Act
+        const icon = screen.getByTestId("button-focus-test-end-icon");
+
+        // Assert
+        expect(icon).toBeInTheDocument();
+        expect(icon).toHaveAttribute("aria-hidden", "true");
+    });
+
+    test("default theme tertiary button icon has no hover style", () => {
+        // Arrange
+        render(
+            <Button kind="tertiary" testId={"button-icon-test"} endIcon={plus}>
+                Label
+            </Button>,
+        );
+
+        // Act
+        const button = screen.getByTestId("button-icon-test");
+        const iconWrapper = screen.getByTestId(
+            "button-icon-test-end-icon-wrapper",
+        );
+        userEvent.hover(button);
+
+        // Assert
+        expect(iconWrapper).toHaveStyle(`backgroundColor: transparent`);
+    });
+
+    test("Khanmigo tertiary button icon has hover style", () => {
+        // Arrange
+        render(
+            <ThemeSwitcherContext.Provider value="khanmigo">
+                <Button
+                    kind="tertiary"
+                    testId={"button-icon-test"}
+                    endIcon={plus}
+                >
+                    Label
+                </Button>
+            </ThemeSwitcherContext.Provider>,
+        );
+
+        // Act
+        const button = screen.getByTestId("button-icon-test");
+        const iconWrapper = screen.getByTestId(
+            "button-icon-test-end-icon-wrapper",
+        );
+        userEvent.hover(button);
+
+        // Assert
+        expect(iconWrapper).toHaveStyle(
+            `backgroundColor: ${tokens.color.fadedBlue16}`,
+        );
+    });
+});

package/src/components/__tests__/button.test.tsx

@@ -1,8 +1,13 @@
+/**
+ * Test for Wonder Blocks Button component.
+ *
+ * The test for buttons with icons are in a separate file
+ * (button-with-icon.test.tsx) since this one is already too long.
+ */
 import * as React from "react";
 import {MemoryRouter, Route, Switch} from "react-router-dom";
 import {render, screen, waitFor} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import plus from "@phosphor-icons/core/regular/plus.svg";
 
 import Button from "../button";
 
@@ -828,91 +833,4 @@ describe("Button", () => {
             }).not.toThrow();
         });
     });
-
-    describe("button with icon", () => {
-        test("icon is displayed when button contains startIcon", () => {
-            // Arrange
-            render(
-                <Button testId={"button-focus-test"} startIcon={plus}>
-                    Label
-                </Button>,
-            );
-
-            // Act
-            const icon = screen.getByTestId("button-focus-test-start-icon");
-
-            // Assert
-            expect(icon).toBeInTheDocument();
-            expect(icon).toHaveAttribute("aria-hidden", "true");
-        });
-
-        test("icon is displayed when button contains endIcon", () => {
-            // Arrange
-            render(
-                <Button testId={"button-focus-test"} endIcon={plus}>
-                    Label
-                </Button>,
-            );
-
-            // Act
-            const icon = screen.getByTestId("button-focus-test-end-icon");
-
-            // Assert
-            expect(icon).toBeInTheDocument();
-            expect(icon).toHaveAttribute("aria-hidden", "true");
-        });
-
-        test("both icons are displayed when button contains startIcon and endIcon", () => {
-            // Arrange
-            render(
-                <Button
-                    testId={"button-focus-test"}
-                    startIcon={plus}
-                    endIcon={plus}
-                >
-                    Label
-                </Button>,
-            );
-
-            // Act
-            const startIcon = screen.getByTestId(
-                "button-focus-test-start-icon",
-            );
-            const endIcon = screen.getByTestId("button-focus-test-end-icon");
-
-            // Assert
-            expect(startIcon).toBeInTheDocument();
-            expect(endIcon).toBeInTheDocument();
-        });
-
-        test("start icon should be hidden from Screen Readers", () => {
-            // Arrange
-            render(
-                <Button testId={"button-focus-test"} startIcon={plus}>
-                    Label
-                </Button>,
-            );
-
-            // Act
-            const icon = screen.getByTestId("button-focus-test-start-icon");
-
-            // Assert
-            expect(icon).toHaveAttribute("aria-hidden", "true");
-        });
-
-        test("end icon should be hidden from Screen Readers", () => {
-            // Arrange
-            render(
-                <Button testId={"button-focus-test"} endIcon={plus}>
-                    Label
-                </Button>,
-            );
-
-            // Act
-            const icon = screen.getByTestId("button-focus-test-end-icon");
-
-            // Assert
-            expect(icon).toHaveAttribute("aria-hidden", "true");
-        });
-    });
 });

package/src/components/button-core.tsx

@@ -4,7 +4,7 @@ import {Link} from "react-router-dom";
 import {__RouterContext} from "react-router";
 
 import {LabelLarge, LabelSmall} from "@khanacademy/wonder-blocks-typography";
-import {addStyle} from "@khanacademy/wonder-blocks-core";
+import {addStyle, View} from "@khanacademy/wonder-blocks-core";
 import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
 import {isClientSideUrl} from "@khanacademy/wonder-blocks-clickable";
 import {
@@ -47,6 +47,7 @@ const ButtonCore: React.ForwardRefExoticComponent<
             hovered,
             href = undefined,
             kind = "primary",
+            labelStyle,
             light = false,
             pressed,
             size = "medium",
@@ -110,6 +111,7 @@ const ButtonCore: React.ForwardRefExoticComponent<
                 style={[
                     sharedStyles.text,
                     size === "large" && sharedStyles.largeText,
+                    labelStyle,
                     spinner && sharedStyles.hiddenText,
                     kind === "tertiary" && sharedStyles.textWithFocus,
                     // apply press/hover effects on the label
@@ -138,12 +140,24 @@ const ButtonCore: React.ForwardRefExoticComponent<
         const contents = (
             <React.Fragment>
                 {startIcon && (
-                    <ButtonIcon
-                        size={iconSize}
-                        icon={startIcon}
-                        style={sharedStyles.startIcon}
-                        testId={testId ? `${testId}-start-icon` : undefined}
-                    />
+                    <View
+                        // The start icon doesn't have the circle around it
+                        // in the Khanmigo theme, but we wrap it with
+                        // iconWrapper anyway to give it the same spacing
+                        // as the end icon so the button is symmetrical.
+                        style={sharedStyles.iconWrapper}
+                    >
+                        <ButtonIcon
+                            size={iconSize}
+                            icon={startIcon}
+                            style={[
+                                sharedStyles.startIcon,
+                                kind === "tertiary" &&
+                                    sharedStyles.tertiaryStartIcon,
+                            ]}
+                            testId={testId ? `${testId}-start-icon` : undefined}
+                        />
+                    </View>
                 )}
                 {label}
                 {spinner && (
@@ -155,12 +169,27 @@ const ButtonCore: React.ForwardRefExoticComponent<
                     />
                 )}
                 {endIcon && (
-                    <ButtonIcon
-                        size={iconSize}
-                        icon={endIcon}
-                        style={sharedStyles.endIcon}
-                        testId={testId ? `${testId}-end-icon` : undefined}
-                    />
+                    <View
+                        testId={
+                            testId ? `${testId}-end-icon-wrapper` : undefined
+                        }
+                        style={[
+                            styles.endIcon,
+                            sharedStyles.iconWrapper,
+                            sharedStyles.endIconWrapper,
+                            kind === "tertiary" &&
+                                sharedStyles.endIconWrapperTertiary,
+                            (focused || hovered) &&
+                                kind !== "primary" &&
+                                sharedStyles.iconWrapperSecondaryHovered,
+                        ]}
+                    >
+                        <ButtonIcon
+                            size={iconSize}
+                            icon={endIcon}
+                            testId={testId ? `${testId}-end-icon` : undefined}
+                        />
+                    </View>
                 )}
             </React.Fragment>
         );
@@ -232,10 +261,6 @@ const themedSharedStyles: ThemedStylesFn<ButtonThemeContract> = (theme) => ({
             WebkitTapHighlightColor: "rgba(0,0,0,0)",
         },
     },
-    withIcon: {
-        // The left padding for the button with icon should have 4px less padding
-        paddingLeft: theme.padding.medium,
-    },
     disabled: {
         cursor: "auto",
     },
@@ -258,7 +283,7 @@ const themedSharedStyles: ThemedStylesFn<ButtonThemeContract> = (theme) => ({
     },
     largeText: {
         fontSize: theme.font.size.large,
-        lineHeight: theme.font.lineHeight.large,
+        lineHeight: `${theme.font.lineHeight.large}px`,
     },
     textWithFocus: {
         position: "relative", // allows the tertiary button border to use the label width
@@ -270,16 +295,42 @@ const themedSharedStyles: ThemedStylesFn<ButtonThemeContract> = (theme) => ({
         position: "absolute",
     },
     startIcon: {
-        marginInlineEnd: theme.padding.small,
+        marginRight: theme.padding.small,
+        marginLeft: theme.margin.icon.offset,
+    },
+    tertiaryStartIcon: {
+        // Undo the negative padding from startIcon since tertiary
+        // buttons don't have extra padding.
+        marginLeft: 0,
     },
     endIcon: {
-        marginInlineStart: theme.padding.small,
+        marginLeft: theme.padding.small,
+    },
+    iconWrapper: {
+        borderRadius: theme.border.radius.icon,
+        padding: theme.padding.xsmall,
+        // View has a default minWidth of 0, which causes the label text
+        // to encroach on the icon when it needs to truncate. We can fix
+        // this by setting the minWidth to auto.
+        minWidth: "auto",
+    },
+    iconWrapperSecondaryHovered: {
+        backgroundColor: theme.color.bg.icon.secondaryHover,
+        color: theme.color.text.icon.secondaryHover,
+    },
+    endIconWrapper: {
+        marginLeft: theme.padding.small,
+        marginRight: theme.margin.icon.offset,
+    },
+    endIconWrapperTertiary: {
+        marginRight: 0,
     },
 });
 
 const styles: Record<string, any> = {};
 
-const _generateStyles = (
+// export for testing only
+export const _generateStyles = (
     buttonColor = "default",
     kind: "primary" | "secondary" | "tertiary",
     light: boolean,
@@ -356,7 +407,6 @@ const _generateStyles = (
             },
         };
     } else if (kind === "secondary") {
-        const horizontalPadding = padding - (theme.border.width.focused - 1);
         const secondaryBorderColor =
             buttonColor === "destructive"
                 ? theme.color.border.secondary.critical
@@ -372,11 +422,12 @@ const _generateStyles = (
                     ? theme.color.bg.secondary.inverse
                     : theme.color.bg.secondary.default,
                 color: light ? theme.color.text.inverse : color,
-                borderColor: light
+                outlineColor: light
                     ? theme.color.border.secondary.inverse
                     : secondaryBorderColor,
-                borderStyle: "solid",
-                borderWidth: theme.border.width.secondary,
+                outlineStyle: "solid",
+                outlineWidth: theme.border.width.secondary,
+                outlineOffset: 1,
                 paddingLeft: padding,
                 paddingRight: padding,
             },
@@ -384,37 +435,29 @@ const _generateStyles = (
                 background: light
                     ? theme.color.bg.secondary.inverse
                     : theme.color.bg.secondary.focus,
-                borderColor: light ? theme.color.border.primary.inverse : color,
-                borderWidth: theme.border.width.focused,
-                paddingLeft: horizontalPadding,
-                paddingRight: horizontalPadding,
+                outlineColor: light
+                    ? theme.color.border.primary.inverse
+                    : color,
+                outlineWidth: theme.border.width.focused,
             },
 
             active: {
                 background: light ? activeColor : secondaryActiveColor,
                 color: light ? fadedColor : activeColor,
-                borderColor: light ? fadedColor : activeColor,
-                borderWidth: theme.border.width.focused,
-                // We need to reduce padding to offset the difference
-                // caused by the border becoming thicker on focus.
-                paddingLeft: horizontalPadding,
-                paddingRight: horizontalPadding,
+                outlineColor: light ? fadedColor : activeColor,
+                outlineWidth: theme.border.width.focused,
             },
             disabled: {
                 color: light
                     ? theme.color.text.secondary.inverse
                     : theme.color.text.disabled,
-                borderColor: light ? fadedColor : theme.color.border.disabled,
+                outlineColor: light ? fadedColor : theme.color.border.disabled,
                 cursor: "default",
                 ":focus": {
-                    borderColor: light
+                    outlineColor: light
                         ? theme.color.border.secondary.inverse
                         : theme.color.border.disabled,
-                    borderWidth: theme.border.width.disabled,
-                    // We need to reduce padding to offset the difference
-                    // caused by the border becoming thicker on focus.
-                    paddingLeft: padding - 1,
-                    paddingRight: padding - 1,
+                    outlineWidth: theme.border.width.disabled,
                 },
             },
         };
@@ -439,25 +482,12 @@ const _generateStyles = (
                 },
             },
             focus: {
-                ":after": {
-                    content: "''",
-                    // Since we are using a pseudo element, we need to manually
-                    // calculate the width/height and use absolute position to
-                    // prevent other elements from being shifted around.
-                    position: "absolute",
-                    // Keeps the button at the same size when applying the
-                    // borderWidth property, so we can apply the correct value
-                    // per theme for each side (left and right).
-                    width: `calc(100% + ${theme.border.width.focused * 2}px)`,
-                    // Same as above, but for the height (top and bottom).
-                    height: `calc(100% - ${theme.border.width.focused * 2}px)`,
-                    borderStyle: "solid",
-                    borderColor: light
-                        ? theme.color.border.tertiary.inverse
-                        : color,
-                    borderWidth: theme.border.width.focused,
-                    borderRadius: theme.border.radius.default,
-                },
+                outlineStyle: "solid",
+                outlineColor: light
+                    ? theme.color.border.tertiary.inverse
+                    : color,
+                outlineWidth: theme.border.width.focused,
+                borderRadius: theme.border.radius.default,
             },
             active: {
                 color: light ? fadedColor : activeColor,
@@ -471,11 +501,9 @@ const _generateStyles = (
                 cursor: "default",
             },
             disabledFocus: {
-                ":after": {
-                    borderColor: light
-                        ? theme.color.border.tertiary.inverse
-                        : theme.color.border.disabled,
-                },
+                outlineColor: light
+                    ? theme.color.border.tertiary.inverse
+                    : theme.color.border.disabled,
             },
         };
     } else {

package/src/components/button.tsx

@@ -110,6 +110,10 @@ export type SharedProps =
          * page reload.
          */
         skipClientNav?: boolean;
+        /**
+         * Optional custom styles for the inner label.
+         */
+        labelStyle?: StyleType;
         /**
          * Optional custom styles.
          */