@khanacademy/wonder-blocks-icon-button 5.1.4 → 5.1.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @khanacademy/wonder-blocks-icon-button
 
+## 5.1.6
+
+### Patch Changes
+
+-   9092363d: Fixes keyboard behavior on IconButton:
+    -   Allows triggering onClick when Enter is pressed. - Fixes the active state from not being sticky on mobile devices.
+
+## 5.1.5
+
+### Patch Changes
+
+-   Updated dependencies [171e3b01]
+    -   @khanacademy/wonder-blocks-icon@4.0.0
+
 ## 5.1.4
 
 ### Patch Changes

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

@@ -9,6 +9,16 @@ type Props = SharedProps & {
      * passed in as the `<a>` tag's `href` if present.
      */
     href?: string;
+    /**
+     * Listens for keydown events on the button. This is useful for preventing
+     * default behavior when the user presses the spacebar or enter key.
+     */
+    onKeyDown?: (e: React.KeyboardEvent) => unknown;
+    /**
+     * Listens for keyup events on the button. This is useful for triggering
+     * actions when the user presses the spacebar or enter key.
+     */
+    onKeyUp?: (e: React.KeyboardEvent) => unknown;
 };
 declare const IconButtonCore: React.ForwardRefExoticComponent<Props & React.RefAttributes<typeof Link | HTMLButtonElement | HTMLAnchorElement>>;
 export default IconButtonCore;

package/dist/es/index.js

@@ -374,6 +374,15 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
         borderRadius: theme.border.radius.default,
         outlineWidth: theme.border.width.default
       }, kindOverrides[":hover"]),
+      ["@media not (hover: hover)"]: {
+        ":hover": {
+          boxShadow: "none",
+          color: defaultColor,
+          borderRadius: theme.border.radius.default,
+          outline: "none",
+          backgroundColor: "transparent"
+        }
+      },
       ":focus": {
         boxShadow: `0 0 0 ${theme.border.width.default}px ${defaultStrokeColor}`,
         borderRadius: theme.border.radius.default
@@ -435,6 +444,20 @@ const IconButton = React.forwardRef(function IconButton(props, ref) {
       target
     } = props,
     sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
+  function handleKeyDown(e) {
+    const keyCode = e.key;
+    if (!href && (keyCode === "Enter" || keyCode === "Space")) {
+      e.preventDefault();
+    }
+  }
+  function handleKeyUp(e) {
+    const keyCode = e.key;
+    if (!href && (keyCode === "Enter" || keyCode === "Space")) {
+      if (sharedProps.onClick) {
+        sharedProps.onClick(e);
+      }
+    }
+  }
   return React.createElement(ThemedIconButton, null, React.createElement(IconButtonCore, _extends({}, sharedProps, {
     color: color,
     disabled: disabled,
@@ -445,7 +468,9 @@ const IconButton = React.forwardRef(function IconButton(props, ref) {
     skipClientNav: skipClientNav,
     size: size,
     target: target,
-    tabIndex: tabIndex
+    tabIndex: tabIndex,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp
   })));
 });
 

package/dist/index.js

@@ -396,6 +396,15 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
         borderRadius: theme.border.radius.default,
         outlineWidth: theme.border.width.default
       }, kindOverrides[":hover"]),
+      ["@media not (hover: hover)"]: {
+        ":hover": {
+          boxShadow: "none",
+          color: defaultColor,
+          borderRadius: theme.border.radius.default,
+          outline: "none",
+          backgroundColor: "transparent"
+        }
+      },
       ":focus": {
         boxShadow: `0 0 0 ${theme.border.width.default}px ${defaultStrokeColor}`,
         borderRadius: theme.border.radius.default
@@ -457,6 +466,20 @@ const IconButton = React__namespace.forwardRef(function IconButton(props, ref) {
       target
     } = props,
     sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
+  function handleKeyDown(e) {
+    const keyCode = e.key;
+    if (!href && (keyCode === "Enter" || keyCode === "Space")) {
+      e.preventDefault();
+    }
+  }
+  function handleKeyUp(e) {
+    const keyCode = e.key;
+    if (!href && (keyCode === "Enter" || keyCode === "Space")) {
+      if (sharedProps.onClick) {
+        sharedProps.onClick(e);
+      }
+    }
+  }
   return React__namespace.createElement(ThemedIconButton, null, React__namespace.createElement(IconButtonCore, _extends({}, sharedProps, {
     color: color,
     disabled: disabled,
@@ -467,7 +490,9 @@ const IconButton = React__namespace.forwardRef(function IconButton(props, ref) {
     skipClientNav: skipClientNav,
     size: size,
     target: target,
-    tabIndex: tabIndex
+    tabIndex: tabIndex,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp
   })));
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-icon-button",
-  "version": "5.1.4",
+  "version": "5.1.6",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -18,7 +18,7 @@
     "@babel/runtime": "^7.18.6",
     "@khanacademy/wonder-blocks-clickable": "^4.0.11",
     "@khanacademy/wonder-blocks-core": "^6.3.0",
-    "@khanacademy/wonder-blocks-icon": "^3.0.0",
+    "@khanacademy/wonder-blocks-icon": "^4.0.0",
     "@khanacademy/wonder-blocks-theming": "^1.2.1"
   },
   "peerDependencies": {