@khanacademy/wonder-blocks-button 4.0.13 → 4.1.0

package/dist/index.js

@@ -69,10 +69,9 @@ const _excluded$1 = ["children", "skipClientNav", "color", "disabled", "focused"
 const StyledAnchor = wonderBlocksCore.addStyle("a");
 const StyledButton = wonderBlocksCore.addStyle("button");
 const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
-class ButtonCore extends React__namespace.Component {
-  renderInner(router) {
-    const _this$props = this.props,
-      {
+const ButtonCore = React__namespace.forwardRef((props, ref) => {
+  const renderInner = router => {
+    const {
         children,
         skipClientNav,
         color,
@@ -80,23 +79,23 @@ class ButtonCore extends React__namespace.Component {
         focused,
         hovered,
         href = undefined,
-        kind,
-        light,
+        kind = "primary",
+        light = false,
         pressed,
-        size,
+        size = "medium",
         style,
         testId,
         type = undefined,
         spinner,
         icon,
         id
-      } = _this$props,
-      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
+      } = props,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
     const buttonColor = color === "destructive" ? Color.SemanticColor.controlDestructive : Color.SemanticColor.controlDefault;
     const iconWidth = icon ? (size === "small" ? 16 : 24) + 8 : 0;
     const buttonStyles = _generateStyles(buttonColor, kind, light, iconWidth, size);
     const disabled = spinner || disabledProp;
-    const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, icon && sharedStyles.withIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
+    const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, icon && sharedStyles.withIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), kind === "tertiary" && !pressed && focused && [buttonStyles.focus, disabled && buttonStyles.disabledFocus], size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
     const commonProps = _extends({
       "data-test-id": testId,
       id: id,
@@ -106,19 +105,22 @@ class ButtonCore extends React__namespace.Component {
     const Label = size === "small" ? wonderBlocksTypography.LabelSmall : wonderBlocksTypography.LabelLarge;
     const iconSize = size === "small" ? "small" : "medium";
     const label = React__namespace.createElement(Label, {
-      style: [sharedStyles.text, size === "large" && sharedStyles.largeText, icon && sharedStyles.textWithIcon, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, kind === "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), kind === "tertiary" && disabled && focused && [buttonStyles.focus, buttonStyles.disabledFocus]]
-    }, icon && React__namespace.createElement(Icon__default["default"], {
-      size: iconSize,
-      color: "currentColor",
-      icon: icon,
-      style: sharedStyles.icon
-    }), children);
+      style: [sharedStyles.text, size === "large" && sharedStyles.largeText, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, kind === "tertiary" && !disabled && (pressed ? [buttonStyles.hover, buttonStyles.active] : hovered && buttonStyles.hover)],
+      testId: testId ? `${testId}-inner-label` : undefined
+    }, children);
     const sizeMapping = {
       medium: "small",
       small: "xsmall",
       large: "medium"
     };
-    const contents = React__namespace.createElement(React__namespace.Fragment, null, label, spinner && React__namespace.createElement(wonderBlocksProgressSpinner.CircularSpinner, {
+    const contents = React__namespace.createElement(React__namespace.Fragment, null, icon && React__namespace.createElement(Icon__default["default"], {
+      size: iconSize,
+      color: "currentColor",
+      icon: icon,
+      style: sharedStyles.icon,
+      "aria-hidden": "true",
+      testId: testId ? `${testId}-icon` : undefined
+    }), label, spinner && React__namespace.createElement(wonderBlocksProgressSpinner.CircularSpinner, {
       style: sharedStyles.spinner,
       size: sizeMapping[size],
       light: kind === "primary",
@@ -126,22 +128,23 @@ class ButtonCore extends React__namespace.Component {
     }));
     if (href && !disabled) {
       return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends({}, commonProps, {
-        to: href
+        to: href,
+        ref: ref
       }), contents) : React__namespace.createElement(StyledAnchor, _extends({}, commonProps, {
-        href: href
+        href: href,
+        ref: ref
       }), contents);
     } else {
       return React__namespace.createElement(StyledButton, _extends({
         type: type || "button"
       }, commonProps, {
-        "aria-disabled": disabled
+        "aria-disabled": disabled,
+        ref: ref
       }), contents);
     }
-  }
-  render() {
-    return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderInner(router));
-  }
-}
+  };
+  return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => renderInner(router));
+});
 const sharedStyles = aphrodite.StyleSheet.create({
   shared: {
     position: "relative",
@@ -191,9 +194,6 @@ const sharedStyles = aphrodite.StyleSheet.create({
     fontSize: 18,
     lineHeight: "20px"
   },
-  textWithIcon: {
-    display: "flex"
-  },
   textWithFocus: {
     position: "relative"
   },
@@ -258,14 +258,14 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
         borderColor: light ? white50 : offBlack50,
         borderStyle: "solid",
         borderWidth: 1,
-        paddingLeft: iconWidth ? padding - 4 : padding,
+        paddingLeft: padding,
         paddingRight: padding
       },
       focus: {
         background: light ? "transparent" : white,
         borderColor: light ? white : color,
         borderWidth: 2,
-        paddingLeft: iconWidth ? padding - 5 : padding - 1,
+        paddingLeft: padding - 1,
         paddingRight: padding - 1
       },
       active: {
@@ -273,7 +273,7 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
         color: light ? fadedColor : activeColor,
         borderColor: light ? fadedColor : activeColor,
         borderWidth: 2,
-        paddingLeft: iconWidth ? padding - 5 : padding - 1,
+        paddingLeft: padding - 1,
         paddingRight: padding - 1
       },
       disabled: {
@@ -283,7 +283,7 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
         ":focus": {
           borderColor: light ? white50 : offBlack32,
           borderWidth: 2,
-          paddingLeft: iconWidth ? padding - 5 : padding - 1,
+          paddingLeft: padding - 1,
           paddingRight: padding - 1
         }
       }
@@ -296,29 +296,35 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
         paddingLeft: 0,
         paddingRight: 0
       },
-      focus: {
+      hover: {
         ":after": {
           content: "''",
           position: "absolute",
           height: 2,
-          width: `calc(100% - ${iconWidth}px)`,
+          width: "100%",
           right: 0,
           bottom: 0,
           background: light ? white : color,
           borderRadius: 2
         }
       },
-      active: {
-        color: light ? fadedColor : activeColor,
+      focus: {
         ":after": {
           content: "''",
           position: "absolute",
-          height: 2,
-          width: `calc(100% - ${iconWidth}px)`,
-          right: 0,
-          bottom: -1,
-          background: light ? fadedColor : activeColor,
-          borderRadius: 2
+          width: `calc(100% + ${Spacing__default["default"].xxxSmall_4}px)`,
+          height: `calc(100% - ${Spacing__default["default"].xxxSmall_4}px)`,
+          borderStyle: "solid",
+          borderColor: light ? white : color,
+          borderWidth: Spacing__default["default"].xxxxSmall_2,
+          borderRadius: Spacing__default["default"].xxxSmall_4
+        }
+      },
+      active: {
+        color: light ? fadedColor : activeColor,
+        ":after": {
+          height: 1,
+          background: light ? fadedColor : activeColor
         }
       },
       disabled: {
@@ -327,7 +333,7 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
       },
       disabledFocus: {
         ":after": {
-          background: light ? white : offBlack32
+          borderColor: light ? white50 : offBlack32
         }
       }
     };
@@ -338,35 +344,43 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
   return styles[buttonType];
 };
 
-const _excluded = ["href", "type", "children", "skipClientNav", "spinner", "disabled", "onClick", "beforeNav", "safeWithNav", "tabIndex", "target", "rel"];
-class Button extends React__namespace.Component {
-  renderClickableBehavior(router) {
-    const _this$props = this.props,
-      {
-        href = undefined,
-        type = undefined,
-        children,
-        skipClientNav,
-        spinner,
-        disabled,
-        onClick,
-        beforeNav = undefined,
-        safeWithNav = undefined,
-        tabIndex,
-        target,
-        rel
-      } = _this$props,
-      sharedButtonCoreProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+const _excluded = ["href", "type", "children", "skipClientNav", "onClick", "beforeNav", "safeWithNav", "tabIndex", "target", "rel", "color", "kind", "light", "size", "disabled", "spinner"];
+const Button = React__namespace.forwardRef((props, ref) => {
+  const {
+      href = undefined,
+      type = undefined,
+      children,
+      skipClientNav,
+      onClick,
+      beforeNav = undefined,
+      safeWithNav = undefined,
+      tabIndex,
+      target,
+      rel,
+      color = "default",
+      kind = "primary",
+      light = false,
+      size = "medium",
+      disabled = false,
+      spinner = false
+    } = props,
+    sharedButtonCoreProps = _objectWithoutPropertiesLoose(props, _excluded);
+  const renderClickableBehavior = router => {
     const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(href, skipClientNav, router);
     const renderProp = (state, restChildProps) => {
       return React__namespace.createElement(ButtonCore, _extends({}, sharedButtonCoreProps, state, restChildProps, {
         disabled: disabled,
         spinner: spinner || state.waiting,
+        color: color,
+        kind: kind,
+        light: light,
+        size: size,
         skipClientNav: skipClientNav,
         href: href,
         target: target,
         type: type,
-        tabIndex: tabIndex
+        tabIndex: tabIndex,
+        ref: ref
       }), children);
     };
     if (beforeNav) {
@@ -392,18 +406,8 @@ class Button extends React__namespace.Component {
         rel: rel
       }, renderProp);
     }
-  }
-  render() {
-    return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
-  }
-}
-Button.defaultProps = {
-  color: "default",
-  kind: "primary",
-  light: false,
-  size: "medium",
-  disabled: false,
-  spinner: false
-};
+  };
+  return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => renderClickableBehavior(router));
+});
 
 module.exports = Button;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-button",
-  "version": "4.0.13",
+  "version": "4.1.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,13 +16,13 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^3.0.13",
+    "@khanacademy/wonder-blocks-clickable": "^3.1.1",
     "@khanacademy/wonder-blocks-color": "^2.0.1",
-    "@khanacademy/wonder-blocks-core": "^5.2.3",
-    "@khanacademy/wonder-blocks-icon": "^2.0.13",
-    "@khanacademy/wonder-blocks-progress-spinner": "^2.0.13",
+    "@khanacademy/wonder-blocks-core": "^5.3.0",
+    "@khanacademy/wonder-blocks-icon": "^2.0.14",
+    "@khanacademy/wonder-blocks-progress-spinner": "^2.0.14",
     "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-    "@khanacademy/wonder-blocks-typography": "^2.0.13"
+    "@khanacademy/wonder-blocks-typography": "^2.1.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",