@khanacademy/wonder-blocks-icon-button 5.0.0 → 5.1.0

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

@@ -162,4 +162,57 @@ describe("IconButton", () => {
         // Assert
         expect(screen.queryByText("Hello, world!")).not.toBeInTheDocument();
     });
+
+    test("disallow press/click when disabled is set", () => {
+        // Arrange
+        const onClickMock = jest.fn();
+        render(
+            <IconButton
+                icon={magnifyingGlassIcon}
+                aria-label="search"
+                testId="icon-button"
+                onClick={onClickMock}
+                disabled={true}
+            />,
+        );
+
+        // Act
+        userEvent.click(screen.getByRole("button"));
+
+        // Assert
+        expect(onClickMock).not.toBeCalled();
+    });
+
+    it("sets the 'target' prop on the underlying element", () => {
+        // Arrange
+        render(
+            <IconButton
+                icon={magnifyingGlassIcon}
+                href="https://www.khanacademy.org"
+                target="_blank"
+            />,
+        );
+
+        // Act
+        const link = screen.getByRole("link");
+        userEvent.click(link);
+
+        // Assert
+        expect(link).toHaveAttribute("target", "_blank");
+    });
+
+    it("renders an <a> if the href is '#'", () => {
+        // Arrange
+        render(
+            <MemoryRouter>
+                <IconButton icon={magnifyingGlassIcon} href="#" />,
+            </MemoryRouter>,
+        );
+
+        // Act
+        const link = screen.getByRole("link");
+
+        // Assert
+        expect(link.tagName).toBe("A");
+    });
 });

package/src/components/icon-button-core.tsx

@@ -3,24 +3,20 @@ import {StyleSheet} from "aphrodite";
 import {Link} from "react-router-dom";
 import {__RouterContext} from "react-router";
 
-import Color, {
-    SemanticColor,
-    mix,
-    fade,
-} from "@khanacademy/wonder-blocks-color";
 import {addStyle} from "@khanacademy/wonder-blocks-core";
 import {isClientSideUrl} from "@khanacademy/wonder-blocks-clickable";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
+import {useScopedTheme} from "@khanacademy/wonder-blocks-theming";
 
-import type {
-    ChildrenProps,
-    ClickableState,
-} from "@khanacademy/wonder-blocks-clickable";
 import type {IconButtonSize, SharedProps} from "./icon-button";
 import {
     iconSizeForButtonSize,
     targetPixelsForSize,
 } from "../util/icon-button-util";
+import {
+    IconButtonThemeContext,
+    IconButtonThemeContract,
+} from "../themes/themed-icon-button";
 
 /**
  * Returns the phosphor icon component based on the size. This is necessary
@@ -55,17 +51,15 @@ function IconChooser({
     }
 }
 
-type Props = SharedProps &
-    ChildrenProps &
-    ClickableState & {
-        /**
-         * URL to navigate to.
-         *
-         * Used to determine whether to render an `<a>` or `<button>` tag. Also
-         * passed in as the `<a>` tag's `href` if present.
-         */
-        href?: string;
-    };
+type Props = SharedProps & {
+    /**
+     * URL to navigate to.
+     *
+     * Used to determine whether to render an `<a>` or `<button>` tag. Also
+     * passed in as the `<a>` tag's `href` if present.
+     */
+    href?: string;
+};
 
 const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
@@ -81,37 +75,32 @@ const IconButtonCore: React.ForwardRefExoticComponent<
     const {
         color,
         disabled,
-        focused,
-        hovered,
         href,
         icon,
         kind = "primary",
         light = false,
-        pressed,
         size = "medium",
         skipClientNav,
         style,
         testId,
-        waiting: _,
         ...restProps
     } = props;
+    const {theme, themeName} = useScopedTheme(IconButtonThemeContext);
 
     const renderInner = (router: any): React.ReactNode => {
-        const buttonColor =
-            color === "destructive"
-                ? SemanticColor.controlDestructive
-                : SemanticColor.controlDefault;
-
-        const buttonStyles = _generateStyles(buttonColor, kind, light, size);
+        const buttonStyles = _generateStyles(
+            color,
+            kind,
+            light,
+            size,
+            theme,
+            themeName,
+        );
 
         const defaultStyle = [
             sharedStyles.shared,
             buttonStyles.default,
             disabled && buttonStyles.disabled,
-            !disabled &&
-                (pressed
-                    ? buttonStyles.active
-                    : (hovered || focused) && buttonStyles.focus),
         ];
 
         const child = <IconChooser size={size} icon={icon} />;
@@ -145,7 +134,8 @@ const IconButtonCore: React.ForwardRefExoticComponent<
                 <StyledButton
                     type="button"
                     {...commonProps}
-                    disabled={disabled}
+                    onClick={disabled ? undefined : restProps.onClick}
+                    aria-disabled={disabled}
                     ref={ref as React.Ref<HTMLButtonElement>}
                 >
                     {child}
@@ -180,22 +170,91 @@ const sharedStyles = StyleSheet.create({
         // This removes the 300ms click delay on mobile browsers by indicating that
         // "double-tap to zoom" shouldn't be used on this element.
         touchAction: "manipulation",
-        ":focus": {
-            // Mobile: Removes a blue highlight style shown when the user clicks a button
-            WebkitTapHighlightColor: "rgba(0,0,0,0)",
-        },
     },
 });
 
 const styles: Record<string, any> = {};
 
-const _generateStyles = (
+function getStylesByKind(
+    kind: "primary" | "secondary" | "tertiary",
+    theme: IconButtonThemeContract,
     color: string,
+    light: boolean,
+    buttonColor: string,
+) {
+    switch (kind) {
+        case "primary":
+            const primaryHoveredColor =
+                buttonColor === "destructive"
+                    ? theme.color.stroke.primary.critical.hovered
+                    : theme.color.stroke.primary.action.hovered;
+
+            return {
+                ":hover": {
+                    backgroundColor: theme.color.bg.hovered,
+                    color: light
+                        ? theme.color.stroke.primary.inverse.hovered
+                        : primaryHoveredColor,
+                    outlineColor: light ? theme.color.stroke.inverse : color,
+                    outlineOffset: 1,
+                    outlineStyle: "solid",
+                    outlineWidth: light
+                        ? theme.border.width.hoveredInverse
+                        : theme.border.width.hovered,
+                },
+                ":active": {
+                    backgroundColor: theme.color.bg.active,
+                },
+            };
+        case "secondary":
+        case "tertiary":
+            return {
+                ":hover": {
+                    backgroundColor:
+                        buttonColor === "destructive"
+                            ? theme.color.bg.filled.critical.hovered
+                            : theme.color.bg.filled.action.hovered,
+                    color:
+                        buttonColor === "destructive"
+                            ? theme.color.stroke.filled.critical.hovered
+                            : theme.color.stroke.filled.action.hovered,
+                    outlineWidth: theme.border.width.active,
+                },
+                ":active": {
+                    backgroundColor:
+                        buttonColor === "destructive"
+                            ? theme.color.bg.filled.critical.active
+                            : theme.color.bg.filled.action.active,
+                    color:
+                        buttonColor === "destructive"
+                            ? theme.color.stroke.filled.critical.active
+                            : theme.color.stroke.filled.action.active,
+                    outlineWidth: theme.border.width.active,
+                },
+            };
+        default:
+            return {
+                ":focus-visible": {},
+                ":hover": {},
+                ":active": {},
+            };
+    }
+}
+
+const _generateStyles = (
+    buttonColor = "default",
     kind: "primary" | "secondary" | "tertiary",
     light: boolean,
     size: IconButtonSize,
+    theme: IconButtonThemeContract,
+    themeName: string,
 ) => {
-    const buttonType = `${color}-${kind}-${light}-${size}`;
+    const color: string =
+        buttonColor === "destructive"
+            ? theme.color.stroke.critical.default
+            : theme.color.stroke.action.default;
+
+    const buttonType = `${color}-${kind}-${light}-${size}-${themeName}`;
     if (styles[buttonType]) {
         return styles[buttonType];
     }
@@ -204,48 +263,129 @@ const _generateStyles = (
         throw new Error("Light is only supported for primary IconButtons");
     }
 
-    const {white, offBlack32, offBlack64, offBlack} = Color;
     const defaultColor = ((): string => {
         switch (kind) {
             case "primary":
-                return light ? white : color;
+                return light
+                    ? theme.color.stroke.primary.inverse.default
+                    : color;
             case "secondary":
-                return offBlack;
+                return theme.color.stroke.secondary.default;
             case "tertiary":
-                return offBlack64;
+                return theme.color.stroke.tertiary.default;
             default:
                 throw new Error("IconButton kind not recognized");
         }
     })();
     const pixelsForSize = targetPixelsForSize(size);
 
+    // Override styles for each kind of button. This is useful for merging
+    // pseudo-classes properly.
+    const kindOverrides = getStylesByKind(
+        kind,
+        theme,
+        color,
+        light,
+        buttonColor,
+    );
+
+    const activeInverseColor =
+        buttonColor === "destructive"
+            ? theme.color.stroke.critical.inverse
+            : theme.color.stroke.action.inverse;
+    const activeColor =
+        buttonColor === "destructive"
+            ? theme.color.stroke.critical.active
+            : theme.color.stroke.action.active;
+
+    // Shared by hover and focus states.
+    const defaultStrokeColor = light ? theme.color.stroke.inverse : color;
+
+    const disabledStrokeColor = light
+        ? theme.color.stroke.disabled.inverse
+        : theme.color.stroke.disabled.default;
+
+    const disabledStatesStyles = {
+        backgroundColor: theme.color.bg.disabled,
+        color: disabledStrokeColor,
+        outlineColor: disabledStrokeColor,
+    };
+
     const newStyles = {
         default: {
             height: pixelsForSize,
             width: pixelsForSize,
             color: defaultColor,
-        },
-        focus: {
-            color: light ? white : color,
-            borderWidth: 2,
-            borderColor: light ? white : color,
-            borderStyle: "solid",
-            borderRadius: 4,
-        },
-        active: {
-            color: light
-                ? mix(fade(color, 0.32), white)
-                : mix(offBlack32, color),
-            borderWidth: 2,
-            borderColor: light
-                ? mix(fade(color, 0.32), white)
-                : mix(offBlack32, color),
-            borderStyle: "solid",
-            borderRadius: 4,
+            borderRadius: theme.border.radius.default,
+
+            /**
+             * States
+             *
+             * Defined in the following order: hover, focus, active.
+             */
+            ":hover": {
+                boxShadow: "none",
+                color: defaultStrokeColor,
+                borderRadius: theme.border.radius.default,
+                outlineWidth: theme.border.width.default,
+                ...kindOverrides[":hover"],
+            },
+            // Provide basic, default focus styles on older browsers (e.g.
+            // Safari 14)
+            ":focus": {
+                boxShadow: `0 0 0 ${theme.border.width.default}px ${defaultStrokeColor}`,
+                borderRadius: theme.border.radius.default,
+            },
+            // Remove default focus styles for mouse users ONLY if
+            // :focus-visible is supported on this platform.
+            ":focus:not(:focus-visible)": {
+                boxShadow: "none",
+            },
+            // Provide focus styles for keyboard users on modern browsers.
+            ":focus-visible": {
+                // Reset default focus styles
+                boxShadow: "none",
+                // Apply modern focus styles
+                outlineWidth: theme.border.width.default,
+                outlineColor: defaultStrokeColor,
+                outlineOffset: 1,
+                outlineStyle: "solid",
+                borderRadius: theme.border.radius.default,
+                ...kindOverrides[":focus-visible"],
+            },
+            ":active": {
+                color: light ? activeInverseColor : activeColor,
+                outlineWidth: theme.border.width.default,
+                outlineColor: light ? activeInverseColor : activeColor,
+                outlineOffset: 1,
+                outlineStyle: "solid",
+                borderRadius: theme.border.radius.default,
+                ...kindOverrides[":active"],
+            },
         },
         disabled: {
-            color: light ? mix(fade(white, 0.32), color) : offBlack32,
-            cursor: "default",
+            color: disabledStrokeColor,
+            cursor: "not-allowed",
+            // NOTE: Even that browsers recommend to specify pseudo-classes in
+            // this order: link, visited, focus, hover, active, we need to
+            // specify focus after hover to override hover styles. By doing this
+            // we are able to remove the hover outline when the button is
+            // disabled.
+            // For order reference: https://css-tricks.com/snippets/css/link-pseudo-classes-in-order/
+            ":hover": {...disabledStatesStyles, outline: "none"},
+            ":active": {...disabledStatesStyles, outline: "none"},
+            // Provide basic, default focus styles on older browsers (e.g.
+            // Safari 14)
+            ":focus": {
+                boxShadow: `0 0 0 ${theme.border.width.default}px ${disabledStrokeColor}`,
+                borderRadius: theme.border.radius.default,
+            },
+            // Remove default focus styles for mouse users ONLY if
+            // :focus-visible is supported on this platform.
+            ":focus:not(:focus-visible)": {
+                boxShadow: "none",
+            },
+            ":focus-visible": disabledStatesStyles,
         },
     } as const;
 

package/src/components/icon-button.tsx

@@ -1,11 +1,10 @@
 import * as React from "react";
-import {__RouterContext} from "react-router";
 
-import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
 import type {PhosphorIconAsset} from "@khanacademy/wonder-blocks-icon";
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 import {Link} from "react-router-dom";
 import IconButtonCore from "./icon-button-core";
+import ThemedIconButton from "../themes/themed-icon-button";
 
 export type IconButtonSize = "xsmall" | "small" | "medium";
 
@@ -172,54 +171,28 @@ export const IconButton: React.ForwardRefExoticComponent<
         href,
         kind = "primary",
         light = false,
-        onClick,
         size = "medium",
         skipClientNav,
         tabIndex,
         target,
         ...sharedProps
     } = props;
-    const renderClickableBehavior = (router: any): React.ReactNode => {
-        const ClickableBehavior = getClickableBehavior(
-            href,
-            skipClientNav,
-            router,
-        );
 
-        return (
-            <ClickableBehavior
+    return (
+        <ThemedIconButton>
+            <IconButtonCore
+                {...sharedProps}
+                color={color}
                 disabled={disabled}
                 href={href}
-                onClick={onClick}
-                role="button"
+                kind={kind}
+                light={light}
+                ref={ref}
+                skipClientNav={skipClientNav}
+                size={size}
                 target={target}
-            >
-                {(state, {...childrenProps}) => {
-                    return (
-                        <IconButtonCore
-                            {...sharedProps}
-                            {...state}
-                            {...childrenProps}
-                            color={color}
-                            disabled={disabled}
-                            href={href}
-                            kind={kind}
-                            light={light}
-                            ref={ref}
-                            skipClientNav={skipClientNav}
-                            size={size}
-                            target={target}
-                            tabIndex={tabIndex}
-                        />
-                    );
-                }}
-            </ClickableBehavior>
-        );
-    };
-
-    return (
-        <__RouterContext.Consumer>
-            {(router) => renderClickableBehavior(router)}
-        </__RouterContext.Consumer>
+                tabIndex={tabIndex}
+            />
+        </ThemedIconButton>
     );
 });

package/src/themes/default.ts

@@ -0,0 +1,111 @@
+import {tokens} from "@khanacademy/wonder-blocks-theming";
+
+const theme = {
+    color: {
+        bg: {
+            /**
+             * Default
+             */
+            hovered: "transparent",
+            active: "transparent",
+            disabled: "transparent",
+            /**
+             * Kind
+             */
+            // Filled icon buttons (secondary, tertiary)
+            // NOTE: Transparent in the default theme, but we want to use the
+            // filled colors for Khanmigo.
+            filled: {
+                action: {
+                    hovered: "transparent",
+                    active: "transparent",
+                },
+                critical: {
+                    hovered: "transparent",
+                    active: "transparent",
+                },
+            },
+        },
+        // Shared colors for icon and borders
+        stroke: {
+            /**
+             * Default
+             */
+            disabled: {
+                default: tokens.color.offBlack32,
+                inverse: tokens.color.white50,
+            },
+            // focus, hover
+            inverse: tokens.color.white,
+
+            /**
+             * Color
+             */
+            // color="default"
+            action: {
+                default: tokens.color.blue,
+                active: tokens.color.activeBlue,
+                inverse: tokens.color.fadedBlue,
+            },
+            // color="destructive"
+            critical: {
+                default: tokens.color.red,
+                active: tokens.color.activeRed,
+                inverse: tokens.color.fadedRed,
+            },
+
+            /**
+             * Kind
+             */
+            primary: {
+                // primary + action
+                action: {
+                    hovered: tokens.color.blue,
+                    active: tokens.color.activeBlue,
+                },
+                // primary + critical
+                critical: {
+                    hovered: tokens.color.red,
+                    active: tokens.color.activeRed,
+                },
+                // on dark background
+                inverse: {
+                    default: tokens.color.white,
+                    hovered: tokens.color.white,
+                },
+            },
+            secondary: {
+                default: tokens.color.offBlack,
+            },
+            tertiary: {
+                default: tokens.color.offBlack64,
+            },
+            // Filled icon buttons (secondary, tertiary)
+            filled: {
+                // filled + action
+                action: {
+                    hovered: tokens.color.blue,
+                    active: tokens.color.activeBlue,
+                },
+                // filled + critical
+                critical: {
+                    hovered: tokens.color.red,
+                    active: tokens.color.activeRed,
+                },
+            },
+        },
+    },
+    border: {
+        width: {
+            default: tokens.border.width.thin,
+            active: tokens.border.width.none,
+            hovered: tokens.border.width.thin,
+            hoveredInverse: tokens.border.width.thin,
+        },
+        radius: {
+            default: tokens.border.radius.medium_4,
+        },
+    },
+};
+
+export default theme;

package/src/themes/khanmigo.ts

@@ -0,0 +1,76 @@
+import {mergeTheme, tokens} from "@khanacademy/wonder-blocks-theming";
+import defaultTheme from "./default";
+
+/**
+ * The overrides for the Khanmigo theme.
+ */
+const theme = mergeTheme(defaultTheme, {
+    color: {
+        bg: {
+            hovered: tokens.color.white,
+            active: tokens.color.white64,
+            // Filled icon buttons (secondary, tertiary)
+            filled: {
+                action: {
+                    hovered: tokens.color.blue,
+                    active: tokens.color.activeBlue,
+                },
+                critical: {
+                    hovered: tokens.color.red,
+                    active: tokens.color.activeRed,
+                },
+            },
+        },
+        stroke: {
+            /**
+             * Color
+             */
+            action: {
+                inverse: tokens.color.eggplant,
+            },
+            critical: {
+                inverse: tokens.color.eggplant,
+            },
+            /**
+             * Kind
+             */
+            primary: {
+                // primary + action
+                action: {
+                    hovered: tokens.color.eggplant,
+                    active: tokens.color.eggplant,
+                },
+                // primary + critical
+                critical: {
+                    hovered: tokens.color.eggplant,
+                    active: tokens.color.eggplant,
+                },
+                // on dark background
+                inverse: {
+                    hovered: tokens.color.eggplant,
+                },
+            },
+            // Filled icon buttons (secondary, tertiary)
+            filled: {
+                // filled + action
+                action: {
+                    hovered: tokens.color.white,
+                    active: tokens.color.white,
+                },
+                // filled + critical
+                critical: {
+                    hovered: tokens.color.white,
+                    active: tokens.color.white,
+                },
+            },
+        },
+    },
+    border: {
+        width: {
+            hovered: tokens.border.width.none,
+            hoveredInverse: tokens.border.width.none,
+        },
+    },
+});
+
+export default theme;