@khanacademy/wonder-blocks-button 4.0.13 → 4.1.0

package/src/components/__tests__/button.test.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import {MemoryRouter, Route, Switch} from "react-router-dom";
 import {render, screen, waitFor} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import {icons} from "@khanacademy/wonder-blocks-icon";
 
 import Button from "../button";
 
@@ -827,4 +828,22 @@ describe("Button", () => {
             }).not.toThrow();
         });
     });
+
+    describe("button with icon", () => {
+        test("icon is displayed when button contains icon", () => {
+            // Arrange
+            render(
+                <Button testId={"button-focus-test"} icon={icons.add}>
+                    Label
+                </Button>,
+            );
+
+            // Act
+            const icon = screen.getByTestId("button-focus-test-icon");
+
+            // Assert
+            expect(icon).toBeDefined();
+            expect(icon).toHaveAttribute("aria-hidden", "true");
+        });
+    });
 });

package/src/components/button-core.tsx

@@ -27,8 +27,14 @@ const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
 
-export default class ButtonCore extends React.Component<Props> {
-    renderInner(router: any): React.ReactNode {
+const ButtonCore: React.ForwardRefExoticComponent<
+    Props &
+        React.RefAttributes<typeof Link | HTMLButtonElement | HTMLAnchorElement>
+> = React.forwardRef<
+    typeof Link | HTMLButtonElement | HTMLAnchorElement,
+    Props
+>((props: Props, ref) => {
+    const renderInner = (router: any): React.ReactNode => {
         const {
             children,
             skipClientNav,
@@ -37,10 +43,10 @@ export default class ButtonCore extends React.Component<Props> {
             focused,
             hovered,
             href = undefined,
-            kind,
-            light,
+            kind = "primary",
+            light = false,
             pressed,
-            size,
+            size = "medium",
             style,
             testId,
             type = undefined,
@@ -49,7 +55,7 @@ export default class ButtonCore extends React.Component<Props> {
             id,
             waiting: _,
             ...restProps
-        } = this.props;
+        } = props;
 
         const buttonColor =
             color === "destructive"
@@ -79,6 +85,12 @@ export default class ButtonCore extends React.Component<Props> {
                 (pressed
                     ? buttonStyles.active
                     : (hovered || focused) && buttonStyles.focus),
+            kind === "tertiary" &&
+                !pressed &&
+                focused && [
+                    buttonStyles.focus,
+                    disabled && buttonStyles.disabledFocus,
+                ],
             size === "small" && sharedStyles.small,
             size === "large" && sharedStyles.large,
         ];
@@ -102,31 +114,17 @@ export default class ButtonCore extends React.Component<Props> {
                 style={[
                     sharedStyles.text,
                     size === "large" && sharedStyles.largeText,
-                    icon && sharedStyles.textWithIcon,
                     spinner && sharedStyles.hiddenText,
                     kind === "tertiary" && sharedStyles.textWithFocus,
-                    // apply focus effect on the label instead
+                    // apply press/hover effects on the label
                     kind === "tertiary" &&
                         !disabled &&
                         (pressed
-                            ? buttonStyles.active
-                            : (hovered || focused) && buttonStyles.focus),
-                    kind === "tertiary" &&
-                        disabled &&
-                        focused && [
-                            buttonStyles.focus,
-                            buttonStyles.disabledFocus,
-                        ],
+                            ? [buttonStyles.hover, buttonStyles.active]
+                            : hovered && buttonStyles.hover),
                 ]}
+                testId={testId ? `${testId}-inner-label` : undefined}
             >
-                {icon && (
-                    <Icon
-                        size={iconSize}
-                        color="currentColor"
-                        icon={icon}
-                        style={sharedStyles.icon}
-                    />
-                )}
                 {children}
             </Label>
         );
@@ -139,6 +137,16 @@ export default class ButtonCore extends React.Component<Props> {
 
         const contents = (
             <React.Fragment>
+                {icon && (
+                    <Icon
+                        size={iconSize}
+                        color="currentColor"
+                        icon={icon}
+                        style={sharedStyles.icon}
+                        aria-hidden="true"
+                        testId={testId ? `${testId}-icon` : undefined}
+                    />
+                )}
                 {label}
                 {spinner && (
                     <CircularSpinner
@@ -153,11 +161,19 @@ export default class ButtonCore extends React.Component<Props> {
 
         if (href && !disabled) {
             return router && !skipClientNav && isClientSideUrl(href) ? (
-                <StyledLink {...commonProps} to={href}>
+                <StyledLink
+                    {...commonProps}
+                    to={href}
+                    ref={ref as React.Ref<typeof Link>}
+                >
                     {contents}
                 </StyledLink>
             ) : (
-                <StyledAnchor {...commonProps} href={href}>
+                <StyledAnchor
+                    {...commonProps}
+                    href={href}
+                    ref={ref as React.Ref<HTMLAnchorElement>}
+                >
                     {contents}
                 </StyledAnchor>
             );
@@ -167,21 +183,22 @@ export default class ButtonCore extends React.Component<Props> {
                     type={type || "button"}
                     {...commonProps}
                     aria-disabled={disabled}
+                    ref={ref as React.Ref<HTMLButtonElement>}
                 >
                     {contents}
                 </StyledButton>
             );
         }
-    }
+    };
 
-    render(): React.ReactNode {
-        return (
-            <__RouterContext.Consumer>
-                {(router) => this.renderInner(router)}
-            </__RouterContext.Consumer>
-        );
-    }
-}
+    return (
+        <__RouterContext.Consumer>
+            {(router) => renderInner(router)}
+        </__RouterContext.Consumer>
+    );
+});
+
+export default ButtonCore;
 
 const sharedStyles = StyleSheet.create({
     shared: {
@@ -236,9 +253,6 @@ const sharedStyles = StyleSheet.create({
         fontSize: 18,
         lineHeight: "20px",
     },
-    textWithIcon: {
-        display: "flex", // allows the text and icon to sit nicely together
-    },
     textWithFocus: {
         position: "relative", // allows the tertiary button border to use the label width
     },
@@ -317,16 +331,14 @@ const _generateStyles = (
                 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,
-                // The left padding for the button with icon should have 4px
-                // less padding
-                paddingLeft: iconWidth ? padding - 5 : padding - 1,
+                paddingLeft: padding - 1,
                 paddingRight: padding - 1,
             },
             active: {
@@ -336,9 +348,7 @@ const _generateStyles = (
                 borderWidth: 2,
                 // We need to reduce padding to offset the difference
                 // caused by the border becoming thicker on focus.
-                // The left padding for the button with icon should have 4px
-                // less padding
-                paddingLeft: iconWidth ? padding - 5 : padding - 1,
+                paddingLeft: padding - 1,
                 paddingRight: padding - 1,
             },
             disabled: {
@@ -350,9 +360,7 @@ const _generateStyles = (
                     borderWidth: 2,
                     // We need to reduce padding to offset the difference
                     // caused by the border becoming thicker on focus.
-                    // The left padding for the button with icon should have 4px
-                    // less padding
-                    paddingLeft: iconWidth ? padding - 5 : padding - 1,
+                    paddingLeft: padding - 1,
                     paddingRight: padding - 1,
                 },
             },
@@ -365,29 +373,38 @@ const _generateStyles = (
                 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: "''",
+                    // Since we are using a pseudo element, we need to manually
+                    // calculate the width/height and use absolute position to
+                    // prevent other elements from being shifted around.
                     position: "absolute",
-                    height: 2,
-                    width: `calc(100% - ${iconWidth}px)`,
-                    right: 0,
-                    bottom: -1,
+                    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,
-                    borderRadius: 2,
                 },
             },
             disabled: {
@@ -396,7 +413,7 @@ const _generateStyles = (
             },
             disabledFocus: {
                 ":after": {
-                    background: light ? white : offBlack32,
+                    borderColor: light ? white50 : offBlack32,
                 },
             },
         };

package/src/components/button.tsx

@@ -8,6 +8,7 @@ import type {
 } from "@khanacademy/wonder-blocks-clickable";
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
+import {Link} from "react-router-dom";
 import ButtonCore from "./button-core";
 
 export type SharedProps =
@@ -32,11 +33,11 @@ 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.
          *
@@ -46,23 +47,23 @@ 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.
          *
          * 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.
          */
@@ -171,15 +172,6 @@ export type SharedProps =
 
 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.
  *
@@ -200,33 +192,34 @@ type DefaultProps = {
  * </Button>
  * ```
  */
-export default class Button extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        color: "default",
-        kind: "primary",
-        light: false,
-        size: "medium",
-        disabled: false,
-        spinner: false,
-    };
-
-    renderClickableBehavior(router: any): React.ReactNode {
-        const {
-            href = undefined,
-            type = undefined,
-            children,
-            skipClientNav,
-            spinner,
-            disabled,
-            onClick,
-            beforeNav = undefined,
-            safeWithNav = undefined,
-            tabIndex,
-            target,
-            rel,
-            ...sharedButtonCoreProps
-        } = this.props;
+const Button: React.ForwardRefExoticComponent<
+    Props &
+        React.RefAttributes<typeof Link | HTMLButtonElement | HTMLAnchorElement>
+> = React.forwardRef<
+    typeof Link | HTMLButtonElement | HTMLAnchorElement,
+    Props
+>((props: 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,
+        ...sharedButtonCoreProps
+    } = props;
 
+    const renderClickableBehavior = (router: any): React.ReactNode => {
         const ClickableBehavior = getClickableBehavior(
             href,
             skipClientNav,
@@ -244,11 +237,16 @@ export default class Button extends React.Component<Props> {
                     {...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}
+                    ref={ref}
                 >
                     {children}
                 </ButtonCore>
@@ -286,13 +284,13 @@ export default class Button extends React.Component<Props> {
                 </ClickableBehavior>
             );
         }
-    }
+    };
 
-    render(): React.ReactNode {
-        return (
-            <__RouterContext.Consumer>
-                {(router) => this.renderClickableBehavior(router)}
-            </__RouterContext.Consumer>
-        );
-    }
-}
+    return (
+        <__RouterContext.Consumer>
+            {(router) => renderClickableBehavior(router)}
+        </__RouterContext.Consumer>
+    );
+});
+
+export default Button;