@khanacademy/wonder-blocks-icon-button 3.4.4 → 3.4.7

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @khanacademy/wonder-blocks-icon-button
 
+## 3.4.7
+
+### Patch Changes
+
+-   Updated dependencies [5f4a4297]
+-   Updated dependencies [2b96fd59]
+    -   @khanacademy/wonder-blocks-core@4.3.2
+    -   @khanacademy/wonder-blocks-clickable@2.2.7
+    -   @khanacademy/wonder-blocks-icon@1.2.28
+
+## 3.4.6
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-clickable@2.2.6
+-   @khanacademy/wonder-blocks-core@4.3.1
+-   @khanacademy/wonder-blocks-icon@1.2.27
+
+## 3.4.5
+
+### Patch Changes
+
+-   Updated dependencies [246a921d]
+    -   @khanacademy/wonder-blocks-core@4.3.0
+    -   @khanacademy/wonder-blocks-clickable@2.2.5
+    -   @khanacademy/wonder-blocks-icon@1.2.26
+
 ## 3.4.4
 
 ### Patch Changes

package/dist/es/index.js

@@ -37,7 +37,7 @@ class IconButtonCore extends React.Component {
     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 child = /*#__PURE__*/React.createElement(Icon, {
+    const child = React.createElement(Icon, {
       size: "medium",
       color: "currentColor",
       icon: icon
@@ -49,13 +49,13 @@ class IconButtonCore extends React.Component {
     }, restProps);
 
     if (href && !disabled) {
-      return router && !skipClientNav && isClientSideUrl(href) ? /*#__PURE__*/React.createElement(StyledLink, _extends({}, commonProps, {
+      return router && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, {
         to: href
-      }), child) : /*#__PURE__*/React.createElement(StyledAnchor, _extends({}, commonProps, {
+      }), child) : React.createElement(StyledAnchor, _extends({}, commonProps, {
         href: href
       }), child);
     } else {
-      return /*#__PURE__*/React.createElement(StyledButton, _extends({
+      return React.createElement(StyledButton, _extends({
         type: "button"
       }, commonProps, {
         disabled: disabled
@@ -64,7 +64,7 @@ class IconButtonCore extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderInner(router));
+    return React.createElement(__RouterContext.Consumer, null, router => this.renderInner(router));
   }
 
 }
@@ -84,11 +84,8 @@ const sharedStyles = StyleSheet.create({
     textDecoration: "none",
     background: "none",
     margin: -8,
-    // 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)"
     }
   },
@@ -159,43 +156,6 @@ const _generateStyles = (color, kind, light) => {
 
 const _excluded = ["onClick", "href", "skipClientNav", "tabIndex", "target"],
       _excluded2 = ["tabIndex"];
-
-/**
- * An IconButton is a button whose contents are an SVG image.
- *
- * To use, supply an onClick function, a wonder-blocks icon asset (see
- * the Icon section) and an aria-label to describe the button functionality.
- * Optionally specify href (URL), clientSideNav, color
- * (Wonder Blocks Blue or Red), kind ("primary", "secondary", or "tertiary"),
- * light (whether the IconButton will be rendered on a dark background),
- * disabled , test ID, and custom styling.
- *
- * The size of an IconButton matches the size of icon it wraps which is 24x24
- * pixels.  The focus ring which is displayed on hover and focus is much
- * larger but does not affect its size.  This matches the behavior of Button.
- *
- * IconButtons require a certain amount of space between them to ensure the
- * focus rings don't overlap.  The minimum amount of spacing is 16px, but
- * you should refer to the mocks provided by design.  Using a Strut in between
- * IconButtons is the preferred way to for adding this spacing.
- *
- * Many layouts require alignment of visual left (or right) side of an
- * IconButton.  This requires a little bit of pixel nudging since each icon
- * as a different amount of internal padding.
- *
- * See the Toolbar documentation for examples of IconButton use that follow
- * the best practices described above.
- *
- * ```js
- * import {icons} from "@khanacademy/wonder-blocks-icon";
- *
- * <IconButton
- *     icon={icons.anIcon}
- *     aria-label="An Icon"
- *     onClick={(e) => console.log("Hello, world!")}
- * />
- * ```
- */
 class IconButton extends React.Component {
   renderClickableBehavior(router) {
     const _this$props = this.props,
@@ -209,7 +169,7 @@ class IconButton extends React.Component {
           sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
     const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
-    return /*#__PURE__*/React.createElement(ClickableBehavior, {
+    return React.createElement(ClickableBehavior, {
       disabled: sharedProps.disabled,
       href: href,
       onClick: onClick,
@@ -221,20 +181,17 @@ class IconButton extends React.Component {
       } = _ref,
           childrenProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
 
-      return /*#__PURE__*/React.createElement(IconButtonCore, _extends({}, sharedProps, state, childrenProps, {
+      return React.createElement(IconButtonCore, _extends({}, sharedProps, state, childrenProps, {
         skipClientNav: skipClientNav,
         href: href,
-        target: target // If tabIndex is provide to the component we allow
-        // it to override the tabIndex provide to use by
-        // ClickableBehavior.
-        ,
+        target: target,
         tabIndex: tabIndex || clickableTabIndex
       }));
     });
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+    return React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
   }
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-icon-button",
-  "version": "3.4.4",
+  "version": "3.4.7",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,10 +16,10 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-clickable": "^2.2.4",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.7",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
-    "@khanacademy/wonder-blocks-core": "^4.2.1",
-    "@khanacademy/wonder-blocks-icon": "^1.2.25"
+    "@khanacademy/wonder-blocks-core": "^4.3.2",
+    "@khanacademy/wonder-blocks-icon": "^1.2.28"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -28,6 +28,6 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.3.0"
+    "wb-dev-build-settings": "^0.4.0"
   }
 }

package/src/components/icon-button.js

@@ -81,6 +81,8 @@ export type SharedProps = {|
 
     /**
      * A target destination window for a link to open in.
+     *
+     * TODO(WB-1262): only allow this prop when `href` is also set.t
      */
     target?: "_blank",