@khanacademy/wonder-blocks-icon-button 4.1.9 → 4.2.0

package/src/__tests__/custom-snapshot.test.tsx

@@ -4,6 +4,7 @@ import * as renderer from "react-test-renderer";
 import {icons} from "@khanacademy/wonder-blocks-icon";
 
 import IconButtonCore from "../components/icon-button-core";
+import {IconButtonSize} from "../components/icon-button";
 
 const defaultHandlers = {
     onClick: () => void 0,
@@ -23,7 +24,11 @@ const defaultHandlers = {
 describe("IconButtonCore", () => {
     for (const kind of ["primary", "secondary", "tertiary"] as const) {
         for (const color of ["default", "destructive"] as const) {
-            for (const size of ["default", "small"] as const) {
+            for (const size of [
+                "xsmall",
+                "small",
+                "medium",
+            ] as IconButtonSize[]) {
                 for (const light of kind === "primary"
                     ? [true, false]
                     : [false]) {
@@ -52,6 +57,7 @@ describe("IconButtonCore", () => {
                                         kind={kind}
                                         color={color}
                                         light={light}
+                                        size={size}
                                         tabIndex={disabled ? -1 : 0}
                                         {...stateProps}
                                         {...defaultHandlers}

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

@@ -16,7 +16,11 @@ import type {
     ChildrenProps,
     ClickableState,
 } from "@khanacademy/wonder-blocks-clickable";
-import type {SharedProps} from "./icon-button";
+import type {IconButtonSize, SharedProps} from "./icon-button";
+import {
+    iconSizeForButtonSize,
+    targetPixelsForSize,
+} from "../util/icon-button-util";
 
 type Props = SharedProps &
     ChildrenProps &
@@ -42,7 +46,6 @@ const IconButtonCore: React.ForwardRefExoticComponent<
     Props
 >(function IconButtonCore(props: Props, ref) {
     const {
-        skipClientNav,
         color,
         disabled,
         focused,
@@ -52,6 +55,8 @@ const IconButtonCore: React.ForwardRefExoticComponent<
         kind = "primary",
         light = false,
         pressed,
+        size = "medium",
+        skipClientNav,
         style,
         testId,
         waiting: _,
@@ -64,11 +69,10 @@ const IconButtonCore: React.ForwardRefExoticComponent<
                 ? SemanticColor.controlDestructive
                 : SemanticColor.controlDefault;
 
-        const buttonStyles = _generateStyles(buttonColor, kind, light);
+        const buttonStyles = _generateStyles(buttonColor, kind, light, size);
 
         const defaultStyle = [
             sharedStyles.shared,
-            disabled && sharedStyles.disabled,
             buttonStyles.default,
             disabled && buttonStyles.disabled,
             !disabled &&
@@ -77,7 +81,13 @@ const IconButtonCore: React.ForwardRefExoticComponent<
                     : (hovered || focused) && buttonStyles.focus),
         ];
 
-        const child = <Icon size="medium" color="currentColor" icon={icon} />;
+        const child = (
+            <Icon
+                size={iconSizeForButtonSize(size)}
+                color="currentColor"
+                icon={icon}
+            />
+        );
 
         const commonProps = {
             "data-test-id": testId,
@@ -133,8 +143,6 @@ const sharedStyles = StyleSheet.create({
         alignItems: "center",
         justifyContent: "center",
         boxSizing: "border-box",
-        height: 40,
-        width: 40,
         padding: 0,
         cursor: "pointer",
         border: "none",
@@ -150,9 +158,6 @@ const sharedStyles = StyleSheet.create({
             WebkitTapHighlightColor: "rgba(0,0,0,0)",
         },
     },
-    disabled: {
-        cursor: "default",
-    },
 });
 
 const styles: Record<string, any> = {};
@@ -161,8 +166,9 @@ const _generateStyles = (
     color: string,
     kind: "primary" | "secondary" | "tertiary",
     light: boolean,
+    size: IconButtonSize,
 ) => {
-    const buttonType = color + kind + light.toString();
+    const buttonType = `${color}-${kind}-${light}-${size}`;
     if (styles[buttonType]) {
         return styles[buttonType];
     }
@@ -172,9 +178,26 @@ const _generateStyles = (
     }
 
     const {white, offBlack32, offBlack64, offBlack} = Color;
+    const defaultColor = ((): string => {
+        switch (kind) {
+            case "primary":
+                return light ? white : color;
+            case "secondary":
+                return offBlack;
+            case "tertiary":
+                return offBlack64;
+            default:
+                throw new Error("IconButton kind not recognized");
+        }
+    })();
+    const pixelsForSize = targetPixelsForSize(size);
 
     const newStyles = {
-        default: {},
+        default: {
+            height: pixelsForSize,
+            width: pixelsForSize,
+            color: defaultColor,
+        },
         focus: {
             color: light ? white : color,
             borderWidth: 2,
@@ -198,24 +221,6 @@ const _generateStyles = (
             cursor: "default",
         },
     } as const;
-    if (kind === "primary") {
-        // @ts-expect-error [FEI-5019] - TS2540 - Cannot assign to 'default' because it is a read-only property.
-        newStyles["default"] = {
-            color: light ? white : color,
-        };
-    } else if (kind === "secondary") {
-        // @ts-expect-error [FEI-5019] - TS2540 - Cannot assign to 'default' because it is a read-only property.
-        newStyles["default"] = {
-            color: offBlack,
-        };
-    } else if (kind === "tertiary") {
-        // @ts-expect-error [FEI-5019] - TS2540 - Cannot assign to 'default' because it is a read-only property.
-        newStyles["default"] = {
-            color: offBlack64,
-        };
-    } else {
-        throw new Error("IconButton kind not recognized");
-    }
 
     styles[buttonType] = StyleSheet.create(newStyles);
     return styles[buttonType];

package/src/components/icon-button.tsx

@@ -7,6 +7,8 @@ import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 import {Link} from "react-router-dom";
 import IconButtonCore from "./icon-button-core";
 
+export type IconButtonSize = "xsmall" | "small" | "medium";
+
 export type SharedProps = Partial<Omit<AriaProps, "aria-disabled">> & {
     /**
      * A Wonder Blocks icon asset, an object specifing paths for one or more of
@@ -40,6 +42,12 @@ export type SharedProps = Partial<Omit<AriaProps, "aria-disabled">> & {
      * Test ID used for e2e testing.
      */
     testId?: string;
+    /**
+     * Size of the icon button.
+     * One of `xsmall` (16 icon, 20 target), `small` (24, 32), or `medium (24, 40).
+     * Defaults to `medium`.
+     */
+    size?: IconButtonSize;
     /**
      * Optional custom styles.
      */
@@ -158,15 +166,16 @@ const IconButton: React.ForwardRefExoticComponent<
     SharedProps
 >(function IconButton(props: SharedProps, ref) {
     const {
-        onClick,
+        color = "default",
+        disabled = false,
         href,
+        kind = "primary",
+        light = false,
+        onClick,
+        size = "medium",
         skipClientNav,
         tabIndex,
         target,
-        color = "default",
-        kind = "primary",
-        light = false,
-        disabled = false,
         ...sharedProps
     } = props;
     const renderClickableBehavior = (router: any): React.ReactNode => {
@@ -191,14 +200,15 @@ const IconButton: React.ForwardRefExoticComponent<
                             {...state}
                             {...childrenProps}
                             color={color}
+                            disabled={disabled}
+                            href={href}
                             kind={kind}
                             light={light}
-                            disabled={disabled}
+                            ref={ref}
                             skipClientNav={skipClientNav}
-                            href={href}
+                            size={size}
                             target={target}
                             tabIndex={tabIndex}
-                            ref={ref}
                         />
                     );
                 }}

package/src/util/icon-button-util.test.ts

@@ -0,0 +1,29 @@
+import {iconSizeForButtonSize, targetPixelsForSize} from "./icon-button-util";
+
+describe("iconSizeForButtonSize", () => {
+    test.each`
+        buttonSize  | expectedIconSize
+        ${"xsmall"} | ${"small"}
+        ${"small"}  | ${"medium"}
+        ${"medium"} | ${"medium"}
+    `(
+        "should return $expectedIconSize icon for $buttonSize icon button",
+        ({buttonSize, expectedIconSize}) => {
+            expect(iconSizeForButtonSize(buttonSize)).toBe(expectedIconSize);
+        },
+    );
+});
+
+describe("targetPixelsForSize", () => {
+    test.each`
+        size        | expectedTargetPixels
+        ${"xsmall"} | ${24}
+        ${"small"}  | ${32}
+        ${"medium"} | ${40}
+    `(
+        "should return $expectedTargetPixels for $size icon button",
+        ({size, expectedTargetPixels}) => {
+            expect(targetPixelsForSize(size)).toBe(expectedTargetPixels);
+        },
+    );
+});

package/src/util/icon-button-util.ts

@@ -0,0 +1,22 @@
+import {IconSize} from "@khanacademy/wonder-blocks-icon";
+import {IconButtonSize} from "../components/icon-button";
+
+/**
+ * A function that returns the icon size for a given icon button size.
+ */
+export const iconSizeForButtonSize = (size: IconButtonSize): IconSize => {
+    switch (size) {
+        case "xsmall":
+            return "small";
+        case "small":
+            return "medium";
+        case "medium":
+            return "medium";
+    }
+};
+
+/**
+ * A function that returns the size of the touch target in pixels for a given icon button size.
+ */
+export const targetPixelsForSize = (size: IconButtonSize): number =>
+    ({xsmall: 24, small: 32, medium: 40}[size]);