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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @khanacademy/wonder-blocks-icon-button
 
+## 4.2.0
+
+### Minor Changes
+
+-   fb704043: Add size prop to icon button
+
+### Patch Changes
+
+-   Updated dependencies [80cab317]
+    -   @khanacademy/wonder-blocks-clickable@4.0.7
+
 ## 4.1.9
 
 ### Patch Changes

package/dist/components/icon-button.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import type { IconAsset } from "@khanacademy/wonder-blocks-icon";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import { Link } from "react-router-dom";
+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
@@ -35,6 +36,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.
      */

package/dist/es/index.js

@@ -39,13 +39,28 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded$1 = ["skipClientNav", "color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "style", "testId", "waiting"];
+const iconSizeForButtonSize = size => {
+  switch (size) {
+    case "xsmall":
+      return "small";
+    case "small":
+      return "medium";
+    case "medium":
+      return "medium";
+  }
+};
+const targetPixelsForSize = size => ({
+  xsmall: 24,
+  small: 32,
+  medium: 40
+})[size];
+
+const _excluded$1 = ["color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "size", "skipClientNav", "style", "testId", "waiting"];
 const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
 const IconButtonCore = React.forwardRef(function IconButtonCore(props, ref) {
   const {
-      skipClientNav,
       color,
       disabled,
       focused,
@@ -55,16 +70,18 @@ const IconButtonCore = React.forwardRef(function IconButtonCore(props, ref) {
       kind = "primary",
       light = false,
       pressed,
+      size = "medium",
+      skipClientNav,
       style,
       testId
     } = props,
     restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
   const renderInner = router => {
     const buttonColor = color === "destructive" ? SemanticColor.controlDestructive : SemanticColor.controlDefault;
-    const buttonStyles = _generateStyles(buttonColor, kind, light);
-    const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)];
+    const buttonStyles = _generateStyles(buttonColor, kind, light, size);
+    const defaultStyle = [sharedStyles.shared, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)];
     const child = React.createElement(Icon, {
-      size: "medium",
+      size: iconSizeForButtonSize(size),
       color: "currentColor",
       icon: icon
     });
@@ -98,8 +115,6 @@ const sharedStyles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     boxSizing: "border-box",
-    height: 40,
-    width: 40,
     padding: 0,
     cursor: "pointer",
     border: "none",
@@ -111,14 +126,11 @@ const sharedStyles = StyleSheet.create({
     ":focus": {
       WebkitTapHighlightColor: "rgba(0,0,0,0)"
     }
-  },
-  disabled: {
-    cursor: "default"
   }
 });
 const styles = {};
-const _generateStyles = (color, kind, light) => {
-  const buttonType = color + kind + light.toString();
+const _generateStyles = (color, kind, light, size) => {
+  const buttonType = `${color}-${kind}-${light}-${size}`;
   if (styles[buttonType]) {
     return styles[buttonType];
   }
@@ -131,8 +143,25 @@ const _generateStyles = (color, kind, light) => {
     offBlack64,
     offBlack
   } = Color;
+  const defaultColor = (() => {
+    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,
@@ -152,37 +181,23 @@ const _generateStyles = (color, kind, light) => {
       cursor: "default"
     }
   };
-  if (kind === "primary") {
-    newStyles["default"] = {
-      color: light ? white : color
-    };
-  } else if (kind === "secondary") {
-    newStyles["default"] = {
-      color: offBlack
-    };
-  } else if (kind === "tertiary") {
-    newStyles["default"] = {
-      color: offBlack64
-    };
-  } else {
-    throw new Error("IconButton kind not recognized");
-  }
   styles[buttonType] = StyleSheet.create(newStyles);
   return styles[buttonType];
 };
 
-const _excluded = ["onClick", "href", "skipClientNav", "tabIndex", "target", "color", "kind", "light", "disabled"];
+const _excluded = ["color", "disabled", "href", "kind", "light", "onClick", "size", "skipClientNav", "tabIndex", "target"];
 const IconButton = React.forwardRef(function IconButton(props, ref) {
   const {
-      onClick,
-      href,
-      skipClientNav,
-      tabIndex,
-      target,
       color = "default",
+      disabled = false,
+      href,
       kind = "primary",
       light = false,
-      disabled = false
+      onClick,
+      size = "medium",
+      skipClientNav,
+      tabIndex,
+      target
     } = props,
     sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
   const renderClickableBehavior = router => {
@@ -197,14 +212,15 @@ const IconButton = React.forwardRef(function IconButton(props, ref) {
       let childrenProps = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
       return React.createElement(IconButtonCore, _extends({}, sharedProps, 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
+        tabIndex: tabIndex
       }));
     });
   };

package/dist/index.js

@@ -65,13 +65,28 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded$1 = ["skipClientNav", "color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "style", "testId", "waiting"];
+const iconSizeForButtonSize = size => {
+  switch (size) {
+    case "xsmall":
+      return "small";
+    case "small":
+      return "medium";
+    case "medium":
+      return "medium";
+  }
+};
+const targetPixelsForSize = size => ({
+  xsmall: 24,
+  small: 32,
+  medium: 40
+})[size];
+
+const _excluded$1 = ["color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "size", "skipClientNav", "style", "testId", "waiting"];
 const StyledAnchor = wonderBlocksCore.addStyle("a");
 const StyledButton = wonderBlocksCore.addStyle("button");
 const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
 const IconButtonCore = React__namespace.forwardRef(function IconButtonCore(props, ref) {
   const {
-      skipClientNav,
       color,
       disabled,
       focused,
@@ -81,16 +96,18 @@ const IconButtonCore = React__namespace.forwardRef(function IconButtonCore(props
       kind = "primary",
       light = false,
       pressed,
+      size = "medium",
+      skipClientNav,
       style,
       testId
     } = props,
     restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
   const renderInner = router => {
     const buttonColor = color === "destructive" ? Color.SemanticColor.controlDestructive : Color.SemanticColor.controlDefault;
-    const buttonStyles = _generateStyles(buttonColor, kind, light);
-    const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)];
+    const buttonStyles = _generateStyles(buttonColor, kind, light, size);
+    const defaultStyle = [sharedStyles.shared, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)];
     const child = React__namespace.createElement(Icon__default["default"], {
-      size: "medium",
+      size: iconSizeForButtonSize(size),
       color: "currentColor",
       icon: icon
     });
@@ -124,8 +141,6 @@ const sharedStyles = aphrodite.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     boxSizing: "border-box",
-    height: 40,
-    width: 40,
     padding: 0,
     cursor: "pointer",
     border: "none",
@@ -137,14 +152,11 @@ const sharedStyles = aphrodite.StyleSheet.create({
     ":focus": {
       WebkitTapHighlightColor: "rgba(0,0,0,0)"
     }
-  },
-  disabled: {
-    cursor: "default"
   }
 });
 const styles = {};
-const _generateStyles = (color, kind, light) => {
-  const buttonType = color + kind + light.toString();
+const _generateStyles = (color, kind, light, size) => {
+  const buttonType = `${color}-${kind}-${light}-${size}`;
   if (styles[buttonType]) {
     return styles[buttonType];
   }
@@ -157,8 +169,25 @@ const _generateStyles = (color, kind, light) => {
     offBlack64,
     offBlack
   } = Color__default["default"];
+  const defaultColor = (() => {
+    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,
@@ -178,37 +207,23 @@ const _generateStyles = (color, kind, light) => {
       cursor: "default"
     }
   };
-  if (kind === "primary") {
-    newStyles["default"] = {
-      color: light ? white : color
-    };
-  } else if (kind === "secondary") {
-    newStyles["default"] = {
-      color: offBlack
-    };
-  } else if (kind === "tertiary") {
-    newStyles["default"] = {
-      color: offBlack64
-    };
-  } else {
-    throw new Error("IconButton kind not recognized");
-  }
   styles[buttonType] = aphrodite.StyleSheet.create(newStyles);
   return styles[buttonType];
 };
 
-const _excluded = ["onClick", "href", "skipClientNav", "tabIndex", "target", "color", "kind", "light", "disabled"];
+const _excluded = ["color", "disabled", "href", "kind", "light", "onClick", "size", "skipClientNav", "tabIndex", "target"];
 const IconButton = React__namespace.forwardRef(function IconButton(props, ref) {
   const {
-      onClick,
-      href,
-      skipClientNav,
-      tabIndex,
-      target,
       color = "default",
+      disabled = false,
+      href,
       kind = "primary",
       light = false,
-      disabled = false
+      onClick,
+      size = "medium",
+      skipClientNav,
+      tabIndex,
+      target
     } = props,
     sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
   const renderClickableBehavior = router => {
@@ -223,14 +238,15 @@ const IconButton = React__namespace.forwardRef(function IconButton(props, ref) {
       let childrenProps = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
       return React__namespace.createElement(IconButtonCore, _extends({}, sharedProps, 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
+        tabIndex: tabIndex
       }));
     });
   };

package/dist/util/icon-button-util.d.ts

@@ -0,0 +1,10 @@
+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 declare const iconSizeForButtonSize: (size: IconButtonSize) => IconSize;
+/**
+ * A function that returns the size of the touch target in pixels for a given icon button size.
+ */
+export declare const targetPixelsForSize: (size: IconButtonSize) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-icon-button",
-  "version": "4.1.9",
+  "version": "4.2.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,7 +16,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^4.0.6",
+    "@khanacademy/wonder-blocks-clickable": "^4.0.7",
     "@khanacademy/wonder-blocks-color": "^2.0.1",
     "@khanacademy/wonder-blocks-core": "^6.2.0",
     "@khanacademy/wonder-blocks-icon": "^2.1.6"