@khanacademy/wonder-blocks-button 4.0.13 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @khanacademy/wonder-blocks-button
 
+## 4.1.0
+
+### Minor Changes
+
+-   0992ff2b: Add ref forwarding to Button and IconButton
+
+### Patch Changes
+
+-   Updated dependencies [0423a440]
+-   Updated dependencies [c37b99aa]
+-   Updated dependencies [afd5a801]
+-   Updated dependencies [13c48aa0]
+-   Updated dependencies [cade62f3]
+-   Updated dependencies [c4cef3e6]
+-   Updated dependencies [4c900085]
+    -   @khanacademy/wonder-blocks-typography@2.1.0
+    -   @khanacademy/wonder-blocks-core@5.3.0
+    -   @khanacademy/wonder-blocks-clickable@3.1.1
+    -   @khanacademy/wonder-blocks-icon@2.0.14
+    -   @khanacademy/wonder-blocks-progress-spinner@2.0.14
+
+## 4.0.14
+
+### Patch Changes
+
+-   e0265198: Updated focus state for tertiary button to a border instead of underline
+-   0f21caaa: Truncate text for buttons with icons
+-   Updated dependencies [ad8beb23]
+    -   @khanacademy/wonder-blocks-clickable@3.1.0
+
 ## 4.0.13
 
 ### Patch Changes

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

@@ -1,9 +1,7 @@
 import * as React from "react";
+import { Link } from "react-router-dom";
 import type { ChildrenProps, ClickableState } from "@khanacademy/wonder-blocks-clickable";
 import type { SharedProps } from "./button";
 type Props = SharedProps & ChildrenProps & ClickableState;
-export default class ButtonCore extends React.Component<Props> {
-    renderInner(router: any): React.ReactNode;
-    render(): React.ReactNode;
-}
-export {};
+declare const ButtonCore: React.ForwardRefExoticComponent<Props & React.RefAttributes<typeof Link | HTMLButtonElement | HTMLAnchorElement>>;
+export default ButtonCore;

package/dist/components/button-core.js.flow

@@ -5,13 +5,15 @@
  * @flow
  */
 import * as React from "react";
+import { Link } from "react-router-dom";
 import type {
   ChildrenProps,
   ClickableState,
 } from "@khanacademy/wonder-blocks-clickable";
 import type { SharedProps } from "./button";
 declare type Props = {| ...SharedProps, ...ChildrenProps, ...ClickableState |};
-declare export default class ButtonCore extends React.Component<Props> {
-  renderInner(router: any): React.Node;
-  render(): React.Node;
-}
+declare var ButtonCore: React.AbstractComponent<
+  Props,
+  typeof Link | HTMLButtonElement | HTMLAnchorElement
+>;
+declare export default typeof ButtonCore;

package/dist/components/button.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import type { IconAsset } from "@khanacademy/wonder-blocks-icon";
+import { Link } from "react-router-dom";
 export type SharedProps = 
 /**
  * aria-label should be used when `spinner={true}` to let people using screen
@@ -23,11 +24,11 @@ Partial<Omit<AriaProps, "aria-disabled">> & {
      *
      * TODO(kevinb): support spinner + light once we have designs
      */
-    spinner: boolean;
+    spinner?: boolean;
     /**
      * The color of the button, either blue or red.
      */
-    color: "default" | "destructive";
+    color?: "default" | "destructive";
     /**
      * The kind of the button, either primary, secondary, or tertiary.
      *
@@ -37,23 +38,23 @@ Partial<Omit<AriaProps, "aria-disabled">> & {
      * - Secondary buttons have a border and no background color
      * - Tertiary buttons have no background or border
      */
-    kind: "primary" | "secondary" | "tertiary";
+    kind?: "primary" | "secondary" | "tertiary";
     /**
      * Whether the button is on a dark/colored background.
      *
      * Sets primary button background color to white, and secondary and
      * tertiary button title to color.
      */
-    light: boolean;
+    light?: boolean;
     /**
      * The size of the button. "medium" = height: 40; "small" = height: 32;
      * "large" = height: 56;
      */
-    size: "medium" | "small" | "large";
+    size?: "medium" | "small" | "large";
     /**
      * Whether the button is disabled.
      */
-    disabled: boolean;
+    disabled?: boolean;
     /**
      * An optional id attribute.
      */
@@ -142,14 +143,6 @@ Partial<Omit<AriaProps, "aria-disabled">> & {
     safeWithNav?: () => Promise<unknown>;
 };
 type Props = SharedProps;
-type DefaultProps = {
-    color: Props["color"];
-    kind: Props["kind"];
-    light: Props["light"];
-    size: Props["size"];
-    disabled: Props["disabled"];
-    spinner: Props["spinner"];
-};
 /**
  * Reusable button component.
  *
@@ -170,9 +163,5 @@ type DefaultProps = {
  * </Button>
  * ```
  */
-export default class Button extends React.Component<Props> {
-    static defaultProps: DefaultProps;
-    renderClickableBehavior(router: any): React.ReactNode;
-    render(): React.ReactNode;
-}
-export {};
+declare const Button: React.ForwardRefExoticComponent<Props & React.RefAttributes<typeof Link | HTMLButtonElement | HTMLAnchorElement>>;
+export default Button;

package/dist/components/button.js.flow

@@ -7,6 +7,7 @@
 import * as React from "react";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import type { IconAsset } from "@khanacademy/wonder-blocks-icon";
+import { Link } from "react-router-dom";
 export type SharedProps = {|
   ...$Rest<$Diff<AriaProps, { "aria-disabled": any }>, {}>,
   ...{|
@@ -27,12 +28,12 @@ export type SharedProps = {|
      *
      * TODO(kevinb): support spinner + light once we have designs
      */
-    spinner: boolean,
+    spinner?: boolean,
 
     /**
      * The color of the button, either blue or red.
      */
-    color: "default" | "destructive",
+    color?: "default" | "destructive",
 
     /**
      * The kind of the button, either primary, secondary, or tertiary.
@@ -43,7 +44,7 @@ export type SharedProps = {|
      * - Secondary buttons have a border and no background color
      * - Tertiary buttons have no background or border
      */
-    kind: "primary" | "secondary" | "tertiary",
+    kind?: "primary" | "secondary" | "tertiary",
 
     /**
      * Whether the button is on a dark/colored background.
@@ -51,18 +52,18 @@ export type SharedProps = {|
      * Sets primary button background color to white, and secondary and
      * tertiary button title to color.
      */
-    light: boolean,
+    light?: boolean,
 
     /**
      * The size of the button. "medium" = height: 40; "small" = height: 32;
      * "large" = height: 56;
      */
-    size: "medium" | "small" | "large",
+    size?: "medium" | "small" | "large",
 
     /**
      * Whether the button is disabled.
      */
-    disabled: boolean,
+    disabled?: boolean,
 
     /**
      * An optional id attribute.
@@ -165,14 +166,6 @@ export type SharedProps = {|
   |},
 |};
 declare type Props = SharedProps;
-declare type DefaultProps = {|
-  color: $PropertyType<Props, "color">,
-  kind: $PropertyType<Props, "kind">,
-  light: $PropertyType<Props, "light">,
-  size: $PropertyType<Props, "size">,
-  disabled: $PropertyType<Props, "disabled">,
-  spinner: $PropertyType<Props, "spinner">,
-|};
 /**
  * Reusable button component.
  *
@@ -193,8 +186,8 @@ declare type DefaultProps = {|
  * </Button>
  * ```
  */
-declare export default class Button extends React.Component<Props> {
-  static defaultProps: DefaultProps;
-  renderClickableBehavior(router: any): React.Node;
-  render(): React.Node;
-}
+declare var Button: React.AbstractComponent<
+  Props,
+  typeof Link | HTMLButtonElement | HTMLAnchorElement
+>;
+declare export default typeof Button;

package/dist/es/index.js

@@ -42,10 +42,9 @@ const _excluded$1 = ["children", "skipClientNav", "color", "disabled", "focused"
 const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
-class ButtonCore extends React.Component {
-  renderInner(router) {
-    const _this$props = this.props,
-      {
+const ButtonCore = React.forwardRef((props, ref) => {
+  const renderInner = router => {
+    const {
         children,
         skipClientNav,
         color,
@@ -53,23 +52,23 @@ class ButtonCore extends React.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" ? SemanticColor.controlDestructive : 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,
@@ -79,19 +78,22 @@ class ButtonCore extends React.Component {
     const Label = size === "small" ? LabelSmall : LabelLarge;
     const iconSize = size === "small" ? "small" : "medium";
     const label = React.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.createElement(Icon, {
-      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.createElement(React.Fragment, null, label, spinner && React.createElement(CircularSpinner, {
+    const contents = React.createElement(React.Fragment, null, icon && React.createElement(Icon, {
+      size: iconSize,
+      color: "currentColor",
+      icon: icon,
+      style: sharedStyles.icon,
+      "aria-hidden": "true",
+      testId: testId ? `${testId}-icon` : undefined
+    }), label, spinner && React.createElement(CircularSpinner, {
       style: sharedStyles.spinner,
       size: sizeMapping[size],
       light: kind === "primary",
@@ -99,22 +101,23 @@ class ButtonCore extends React.Component {
     }));
     if (href && !disabled) {
       return router && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, {
-        to: href
+        to: href,
+        ref: ref
       }), contents) : React.createElement(StyledAnchor, _extends({}, commonProps, {
-        href: href
+        href: href,
+        ref: ref
       }), contents);
     } else {
       return React.createElement(StyledButton, _extends({
         type: type || "button"
       }, commonProps, {
-        "aria-disabled": disabled
+        "aria-disabled": disabled,
+        ref: ref
       }), contents);
     }
-  }
-  render() {
-    return React.createElement(__RouterContext.Consumer, null, router => this.renderInner(router));
-  }
-}
+  };
+  return React.createElement(__RouterContext.Consumer, null, router => renderInner(router));
+});
 const sharedStyles = StyleSheet.create({
   shared: {
     position: "relative",
@@ -164,9 +167,6 @@ const sharedStyles = StyleSheet.create({
     fontSize: 18,
     lineHeight: "20px"
   },
-  textWithIcon: {
-    display: "flex"
-  },
   textWithFocus: {
     position: "relative"
   },
@@ -231,14 +231,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: {
@@ -246,7 +246,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: {
@@ -256,7 +256,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
         }
       }
@@ -269,29 +269,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.xxxSmall_4}px)`,
+          height: `calc(100% - ${Spacing.xxxSmall_4}px)`,
+          borderStyle: "solid",
+          borderColor: light ? white : color,
+          borderWidth: Spacing.xxxxSmall_2,
+          borderRadius: Spacing.xxxSmall_4
+        }
+      },
+      active: {
+        color: light ? fadedColor : activeColor,
+        ":after": {
+          height: 1,
+          background: light ? fadedColor : activeColor
         }
       },
       disabled: {
@@ -300,7 +306,7 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
       },
       disabledFocus: {
         ":after": {
-          background: light ? white : offBlack32
+          borderColor: light ? white50 : offBlack32
         }
       }
     };
@@ -311,35 +317,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.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.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 = getClickableBehavior(href, skipClientNav, router);
     const renderProp = (state, restChildProps) => {
       return React.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) {
@@ -365,18 +379,8 @@ class Button extends React.Component {
         rel: rel
       }, renderProp);
     }
-  }
-  render() {
-    return React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
-  }
-}
-Button.defaultProps = {
-  color: "default",
-  kind: "primary",
-  light: false,
-  size: "medium",
-  disabled: false,
-  spinner: false
-};
+  };
+  return React.createElement(__RouterContext.Consumer, null, router => renderClickableBehavior(router));
+});
 
 export { Button as default };