@khanacademy/wonder-blocks-button 8.0.3 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-button
 
+## 9.0.0
+
+### Major Changes
+
+- 0b47477: Removes the `light` prop as it is no longer maintained. Simplifes pseudo-states (e.g. `:hover`, `:active`).
+
 ## 8.0.3
 
 ### Patch Changes

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

@@ -6,4 +6,4 @@ import { ButtonThemeContract } from "../themes/themed-button";
 type Props = SharedProps & ChildrenProps & ClickableState;
 declare const ButtonCore: React.ForwardRefExoticComponent<Props & React.RefAttributes<typeof Link | HTMLButtonElement | HTMLAnchorElement>>;
 export default ButtonCore;
-export declare const _generateStyles: (buttonColor: string | undefined, kind: "primary" | "secondary" | "tertiary", light: boolean, size: "large" | "medium" | "small", theme: ButtonThemeContract, themeName: string) => any;
+export declare const _generateStyles: (buttonColor: string | undefined, kind: "primary" | "secondary" | "tertiary", size: "large" | "medium" | "small", theme: ButtonThemeContract, themeName: string) => any;

package/dist/components/button.d.ts

@@ -27,8 +27,6 @@ Partial<Omit<AriaProps, "aria-disabled">> & {
      * If true, replaces the contents with a spinner.
      *
      * Note: setting this prop to `true` will disable the button.
-     *
-     * TODO(kevinb): support spinner + light once we have designs
      */
     spinner?: boolean;
     /**
@@ -45,13 +43,6 @@ Partial<Omit<AriaProps, "aria-disabled">> & {
      * - Tertiary buttons have no background or border
      */
     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;
     /**
      * The size of the button. "medium" = height: 40; "small" = height: 32;
      * "large" = height: 56;

package/dist/es/index.js

@@ -18,184 +18,42 @@ const textUnderlineOffset = tokens.spacing.xxxSmall_4;
 const focusOutline = {
   border: semanticColor.focus.outer
 };
-const focusOutlineLight = {
-  border: semanticColor.border.inverse
-};
 const theme$1 = {
   color: {
     primary: {
       progressive: _extends({}, semanticColor.action.primary.progressive, {
-        focus: focusOutline,
-        disabled: {
-          background: semanticColor.action.primary.disabled.background,
-          foreground: semanticColor.action.primary.disabled.foreground
-        }
-      }),
-      progressiveLight: _extends({}, semanticColor.action.secondary.progressive, {
-        default: _extends({}, semanticColor.action.secondary.progressive.default, {
-          background: semanticColor.surface.primary
-        }),
-        focus: focusOutlineLight,
-        hover: _extends({}, semanticColor.action.secondary.progressive.hover, {
-          border: semanticColor.border.inverse,
-          backgrond: semanticColor.surface.primary
-        }),
-        press: _extends({}, semanticColor.action.secondary.progressive.press, {
-          border: semanticColor.action.secondary.progressive.press.background
-        }),
-        disabled: {
-          background: semanticColor.action.secondary.progressive.press.background,
-          foreground: semanticColor.action.secondary.progressive.default.foreground
-        }
+        focus: focusOutline
       }),
       destructive: _extends({}, semanticColor.action.primary.destructive, {
-        focus: focusOutline,
-        disabled: {
-          background: semanticColor.action.primary.disabled.background,
-          foreground: semanticColor.action.primary.disabled.foreground
-        }
+        focus: focusOutline
       }),
-      destructiveLight: _extends({}, semanticColor.action.secondary.destructive, {
-        default: _extends({}, semanticColor.action.secondary.destructive.default, {
-          background: semanticColor.surface.primary
-        }),
-        focus: focusOutlineLight,
-        hover: _extends({}, semanticColor.action.secondary.progressive.hover, {
-          border: semanticColor.border.inverse,
-          background: semanticColor.surface.primary
-        }),
-        press: _extends({}, semanticColor.action.secondary.destructive.press, {
-          border: semanticColor.action.secondary.destructive.press.background
-        }),
-        disabled: {
-          background: semanticColor.action.secondary.destructive.press.background,
-          foreground: semanticColor.action.secondary.destructive.default.foreground
-        }
-      })
+      disabled: semanticColor.action.primary.disabled
     },
     secondary: {
       progressive: _extends({}, semanticColor.action.secondary.progressive, {
         focus: focusOutline,
         hover: _extends({}, semanticColor.action.secondary.progressive.hover, {
           icon: "transparent"
-        }),
-        disabled: {
-          border: semanticColor.action.primary.disabled.border,
-          foreground: semanticColor.action.secondary.disabled.foreground
-        }
+        })
       }),
-      progressiveLight: {
-        default: {
-          border: tokens.color.white64,
-          background: "transparent",
-          foreground: semanticColor.text.inverse
-        },
-        focus: focusOutlineLight,
-        hover: {
-          border: semanticColor.border.inverse,
-          background: "transparent",
-          foreground: semanticColor.text.inverse,
-          icon: "transparent"
-        },
-        press: {
-          border: tokens.color.fadedBlue,
-          background: semanticColor.action.primary.progressive.press.background,
-          foreground: semanticColor.text.inverse
-        },
-        disabled: {
-          border: semanticColor.action.secondary.progressive.press.background,
-          background: semanticColor.action.secondary.progressive.press.background,
-          foreground: tokens.color.white50
-        }
-      },
       destructive: _extends({}, semanticColor.action.secondary.destructive, {
         focus: focusOutline,
         hover: _extends({}, semanticColor.action.secondary.destructive.hover, {
           icon: "transparent"
-        }),
-        disabled: {
-          border: semanticColor.action.primary.disabled.border,
-          foreground: semanticColor.action.secondary.disabled.foreground
-        }
+        })
       }),
-      destructiveLight: {
-        default: {
-          border: tokens.color.white64,
-          background: "transparent",
-          foreground: semanticColor.text.inverse
-        },
-        focus: focusOutlineLight,
-        hover: {
-          border: semanticColor.border.inverse,
-          background: "transparent",
-          foreground: semanticColor.text.inverse,
-          icon: "transparent"
-        },
-        press: {
-          border: tokens.color.fadedRed,
-          background: semanticColor.action.primary.destructive.press.background,
-          foreground: semanticColor.text.inverse
-        },
-        disabled: {
-          border: semanticColor.action.secondary.destructive.press.background,
-          background: semanticColor.action.secondary.destructive.press.background,
-          foreground: tokens.color.white50
-        }
-      }
+      disabled: _extends({}, semanticColor.action.secondary.disabled, {
+        border: semanticColor.action.primary.disabled.border
+      })
     },
     tertiary: {
       progressive: _extends({}, semanticColor.action.tertiary.progressive, {
-        focus: focusOutline,
-        disabled: {
-          foreground: semanticColor.action.tertiary.disabled.foreground
-        }
+        focus: focusOutline
       }),
-      progressiveLight: {
-        default: {
-          border: tokens.color.white64,
-          background: "transparent",
-          foreground: semanticColor.text.inverse
-        },
-        focus: focusOutlineLight,
-        hover: {
-          border: semanticColor.border.inverse,
-          background: "transparent",
-          foreground: semanticColor.text.inverse
-        },
-        press: {
-          border: semanticColor.border.inverse,
-          foreground: tokens.color.fadedBlue
-        },
-        disabled: {
-          foreground: tokens.color.white50
-        }
-      },
       destructive: _extends({}, semanticColor.action.tertiary.destructive, {
-        focus: focusOutline,
-        disabled: {
-          foreground: semanticColor.action.tertiary.disabled.foreground
-        }
+        focus: focusOutline
       }),
-      destructiveLight: {
-        default: {
-          border: tokens.color.white64,
-          background: "transparent",
-          foreground: semanticColor.text.inverse
-        },
-        focus: focusOutlineLight,
-        hover: {
-          border: semanticColor.border.inverse,
-          background: "transparent",
-          foreground: semanticColor.text.inverse
-        },
-        press: {
-          border: semanticColor.border.inverse,
-          foreground: tokens.color.fadedRed
-        },
-        disabled: {
-          foreground: tokens.color.white50
-        }
-      }
+      disabled: semanticColor.action.tertiary.disabled
     }
   },
   border: {
@@ -352,7 +210,7 @@ function ButtonIcon({
   }
 }
 
-const _excluded$1 = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "labelStyle", "light", "pressed", "size", "style", "testId", "type", "spinner", "startIcon", "endIcon", "id", "waiting"];
+const _excluded$1 = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "labelStyle", "pressed", "size", "style", "testId", "type", "spinner", "startIcon", "endIcon", "id", "waiting"];
 const StyledA = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
@@ -373,7 +231,6 @@ const ButtonCore = React.forwardRef(function ButtonCore(props, ref) {
       href = undefined,
       kind = "primary",
       labelStyle,
-      light = false,
       pressed,
       size = "medium",
       style,
@@ -385,9 +242,9 @@ const ButtonCore = React.forwardRef(function ButtonCore(props, ref) {
       id
     } = props,
     restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-  const buttonStyles = _generateStyles(color, kind, light, size, theme, themeName);
+  const buttonStyles = _generateStyles(color, kind, size, theme, themeName);
   const disabled = spinner || disabledProp;
-  const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, startIcon && sharedStyles.withStartIcon, endIcon && sharedStyles.withEndIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.pressed : focused && buttonStyles.focused), kind === "tertiary" && !pressed && focused && [buttonStyles.focused, disabled && buttonStyles.disabledFocus], size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
+  const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, startIcon && sharedStyles.withStartIcon, endIcon && sharedStyles.withEndIcon, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && (pressed ? buttonStyles.pressed : focused && buttonStyles.focused), size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
   const commonProps = _extends({
     "data-testid": testId,
     id: id,
@@ -419,7 +276,7 @@ const ButtonCore = React.forwardRef(function ButtonCore(props, ref) {
     testId: `${testId || "button"}-spinner`
   }), endIcon && React.createElement(View, {
     testId: testId ? `${testId}-end-icon-wrapper` : undefined,
-    style: [styles.endIcon, sharedStyles.iconWrapper, sharedStyles.endIconWrapper, kind === "tertiary" && sharedStyles.endIconWrapperTertiary, (focused || hovered) && kind !== "primary" && buttonStyles.iconWrapperHovered]
+    style: [styles.endIcon, sharedStyles.iconWrapper, sharedStyles.endIconWrapper, kind === "tertiary" && sharedStyles.endIconWrapperTertiary, !disabled && (focused || hovered) && kind !== "primary" && buttonStyles.iconWrapperHovered]
   }, React.createElement(ButtonIcon, {
     size: iconSize,
     icon: endIcon,
@@ -526,13 +383,19 @@ const themedSharedStyles = theme => ({
   }
 });
 const styles = {};
-const _generateStyles = (buttonColor = "default", kind, light, size, theme, themeName) => {
-  const buttonType = `${buttonColor}-${kind}-${light}-${size}-${themeName}`;
+const _generateStyles = (buttonColor = "default", kind, size, theme, themeName) => {
+  const buttonType = `${buttonColor}-${kind}-${size}-${themeName}`;
   if (styles[buttonType]) {
     return styles[buttonType];
   }
   const padding = size === "large" ? theme.padding.xLarge : theme.padding.large;
-  const colorToAction = light ? buttonColor === "destructive" ? "destructiveLight" : "progressiveLight" : buttonColor === "destructive" ? "destructive" : "progressive";
+  const colorToAction = buttonColor === "destructive" ? "destructive" : "progressive";
+  const disabledState = theme.color[kind].disabled;
+  const disabledStateStyles = {
+    borderColor: disabledState.border,
+    background: disabledState.background,
+    color: disabledState.foreground
+  };
   let newStyles = {};
   if (kind === "primary") {
     const themeColorAction = theme.color.primary[colorToAction];
@@ -559,18 +422,22 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
         background: themeColorAction.default.background,
         color: themeColorAction.default.foreground,
         paddingInline: padding,
-        [":hover:not([aria-disabled=true])"]: hoverStyling,
-        [":focus-visible:not([aria-disabled=true])"]: focusStyling,
-        [":active:not([aria-disabled=true])"]: activePressedStyling
+        ":hover": hoverStyling,
+        ":focus-visible": focusStyling,
+        ":active": activePressedStyling
       },
       focused: focusStyling,
       pressed: activePressedStyling,
-      disabled: {
-        background: themeColorAction.disabled.background,
-        color: themeColorAction.disabled.foreground,
-        cursor: "default",
+      disabled: _extends({}, disabledStateStyles, {
+        cursor: "not-allowed",
+        ":hover": _extends({}, disabledStateStyles, {
+          outline: "none"
+        }),
+        ":active": _extends({}, disabledStateStyles, {
+          outline: "none"
+        }),
         ":focus-visible": focusStyling
-      }
+      })
     };
   } else if (kind === "secondary") {
     const themeColorAction = theme.color.secondary[colorToAction];
@@ -584,7 +451,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
       outlineColor: themeColorAction.focus.border
     });
     const hoverStyling = _extends({}, sharedFocusHoverStyling, {
-      outlineColor: themeColorAction.hover.border
+      borderColor: themeColorAction.hover.border
     });
     const activePressedStyling = {
       background: themeColorAction.press.background,
@@ -601,18 +468,22 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
         borderStyle: "solid",
         borderWidth: theme.border.width.secondary,
         paddingInline: padding,
-        [":hover:not([aria-disabled=true])"]: hoverStyling,
-        [":focus-visible:not([aria-disabled=true])"]: focusStyling,
-        [":active:not([aria-disabled=true])"]: activePressedStyling
+        ":hover": hoverStyling,
+        ":focus-visible": focusStyling,
+        ":active": activePressedStyling
       },
       focused: focusStyling,
       pressed: activePressedStyling,
-      disabled: {
-        color: themeColorAction.disabled.foreground,
-        borderColor: themeColorAction.disabled.border,
-        cursor: "default",
+      disabled: _extends({}, disabledStateStyles, {
+        cursor: "not-allowed",
+        ":hover": _extends({}, disabledStateStyles, {
+          outline: "none"
+        }),
+        ":active": _extends({}, disabledStateStyles, {
+          outline: "none"
+        }),
         ":focus-visible": focusStyling
-      },
+      }),
       iconWrapperHovered: {
         backgroundColor: themeColorAction.hover.icon,
         color: themeColorAction.hover.foreground
@@ -633,27 +504,33 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
       textDecorationThickness: theme.size.underline.active,
       textUnderlineOffset: theme.font.offset.default
     };
+    const sharedDisabledStyling = _extends({}, disabledStateStyles, {
+      textDecoration: "none",
+      textDecorationThickness: "unset",
+      textUnderlineOffset: "unset",
+      outline: "none"
+    });
     newStyles = {
       default: {
         background: themeColorAction.default.background,
         color: themeColorAction.default.foreground,
         paddingInline: 0,
-        [":hover:not([aria-disabled=true])"]: {
+        ":hover": {
           textUnderlineOffset: theme.font.offset.default,
           textDecoration: "underline",
           textDecorationThickness: theme.size.underline.hover
         },
-        [":focus-visible:not([aria-disabled=true])"]: focusStyling,
-        [":active:not([aria-disabled=true])"]: activePressedStyling
+        ":focus-visible": focusStyling,
+        ":active": activePressedStyling
       },
       focused: focusStyling,
       pressed: activePressedStyling,
-      disabled: {
-        color: themeColorAction.disabled.foreground,
-        cursor: "default",
+      disabled: _extends({}, disabledStateStyles, {
+        cursor: "not-allowed",
+        ":hover": sharedDisabledStyling,
+        ":active": sharedDisabledStyling,
         ":focus-visible": focusStyling
-      },
-      disabledFocus: focusStyling
+      })
     };
   } else {
     throw new Error("Button kind not recognized");
@@ -662,7 +539,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
   return styles[buttonType];
 };
 
-const _excluded = ["href", "type", "children", "skipClientNav", "onClick", "beforeNav", "safeWithNav", "tabIndex", "target", "rel", "color", "kind", "light", "size", "disabled", "spinner"];
+const _excluded = ["href", "type", "children", "skipClientNav", "onClick", "beforeNav", "safeWithNav", "tabIndex", "target", "rel", "color", "kind", "size", "disabled", "spinner"];
 const Button = React.forwardRef(function Button(props, ref) {
   const {
       href = undefined,
@@ -677,7 +554,6 @@ const Button = React.forwardRef(function Button(props, ref) {
       rel,
       color = "default",
       kind = "primary",
-      light = false,
       size = "medium",
       disabled = false,
       spinner = false
@@ -691,7 +567,6 @@ const Button = React.forwardRef(function Button(props, ref) {
       spinner: spinner || state.waiting,
       color: color,
       kind: kind,
-      light: light,
       size: size,
       skipClientNav: skipClientNav,
       href: href,