@khanacademy/wonder-blocks-icon-button 6.1.3 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @khanacademy/wonder-blocks-icon-button
 
+## 7.0.0
+
+### Major Changes
+
+- 61f7837: Remove `light` variant, and replace it with `actionStyles.inverse` for one-off cases
+- 3cacbe7: Rename `color` prop to `actionType`. Also rename the `default` value to `progressive`.
+
+### Patch Changes
+
+- 86e1901: Update IconButton to use `box-shadow` instead of `outline`. Also removed the negative margins around the icon button.
+- 4887c59: Use `focus` styles from `wonder-blocks-styles` to match the global focus outline.
+- Updated dependencies [aace76a]
+- Updated dependencies [61f7837]
+    - @khanacademy/wonder-blocks-styles@0.2.0
+
+## 6.1.4
+
+### Patch Changes
+
+- 999101f: Fix IconButton theme to use semanticColor.icon tokens
+- 1d7be37: Use pnpm catalog to pin dependency versions across packages
+- Updated dependencies [1d7be37]
+- Updated dependencies [999101f]
+    - @khanacademy/wonder-blocks-clickable@6.1.4
+    - @khanacademy/wonder-blocks-theming@3.2.1
+    - @khanacademy/wonder-blocks-core@12.2.1
+    - @khanacademy/wonder-blocks-icon@5.1.3
+    - @khanacademy/wonder-blocks-tokens@5.1.1
+
 ## 6.1.3
 
 ### Patch Changes

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

@@ -3,6 +3,7 @@ import type { PhosphorIconAsset } from "@khanacademy/wonder-blocks-icon";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import { Link } from "react-router-dom";
 export type IconButtonSize = "xsmall" | "small" | "medium" | "large";
+export type IconButtonActionType = "progressive" | "destructive";
 export type SharedProps = Partial<Omit<AriaProps, "aria-disabled">> & {
     /**
      * A unique identifier for the IconButton.
@@ -13,9 +14,15 @@ export type SharedProps = Partial<Omit<AriaProps, "aria-disabled">> & {
      */
     icon: PhosphorIconAsset;
     /**
-     * The color of the icon button, either blue or red.
+     * The action type/category of the icon button.
+     *
+     * - `progressive` is used for actions that move the user forward in a flow.
+     * - `destructive` is used for actions that have a negative impact on the
+     *   user.
+     *
+     * Defaults to `progressive`.
      */
-    color?: "default" | "destructive";
+    actionType?: IconButtonActionType;
     /**
      * The kind of the icon button, either primary, secondary, or tertiary.
      *
@@ -27,10 +34,6 @@ export type SharedProps = Partial<Omit<AriaProps, "aria-disabled">> & {
      * In the hover/focus/press states, all variants have a border.
      */
     kind?: "primary" | "secondary" | "tertiary";
-    /**
-     * Whether the icon button is on a dark/colored background.
-     */
-    light?: boolean;
     /**
      * Whether the icon button is disabled.
      */

package/dist/es/index.js

@@ -8,7 +8,8 @@ import { addStyle } from '@khanacademy/wonder-blocks-core';
 import { isClientSideUrl } from '@khanacademy/wonder-blocks-clickable';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import { mergeTheme, createThemeContext, ThemeSwitcherContext, useScopedTheme } from '@khanacademy/wonder-blocks-theming';
-import { semanticColor, color, border } from '@khanacademy/wonder-blocks-tokens';
+import { focusStyles } from '@khanacademy/wonder-blocks-styles';
+import { semanticColor, border } from '@khanacademy/wonder-blocks-tokens';
 
 const iconSizeForButtonSize = size => {
   switch (size) {
@@ -34,24 +35,15 @@ const disabledStates = {
   background: "transparent",
   foreground: semanticColor.action.secondary.disabled.foreground
 };
-const disabledLightStates = {
-  border: color.white50,
-  background: "transparent",
-  foreground: color.white50
-};
-const focusOutline = {
-  border: semanticColor.focus.outer
-};
-const focusOutlineLight = {
-  border: semanticColor.border.inverse
-};
 const baseColorStates = _extends({}, semanticColor.action.secondary, {
   progressive: _extends({}, semanticColor.action.secondary.progressive, {
     default: _extends({}, semanticColor.action.secondary.progressive.default, {
       border: "transparent",
       background: "transparent"
     }),
-    focus: focusOutline,
+    hover: _extends({}, semanticColor.action.secondary.progressive.hover, {
+      background: "transparent"
+    }),
     press: {
       border: semanticColor.action.secondary.progressive.press.border,
       background: "transparent",
@@ -63,7 +55,9 @@ const baseColorStates = _extends({}, semanticColor.action.secondary, {
       border: "transparent",
       background: "transparent"
     }),
-    focus: focusOutline,
+    hover: _extends({}, semanticColor.action.secondary.destructive.hover, {
+      background: "transparent"
+    }),
     press: {
       border: semanticColor.action.secondary.destructive.press.border,
       background: "transparent",
@@ -72,57 +66,13 @@ const baseColorStates = _extends({}, semanticColor.action.secondary, {
   }),
   disabled: {
     default: disabledStates,
-    focus: focusOutline,
     hover: disabledStates,
     press: disabledStates
-  },
-  disabledLight: {
-    default: disabledLightStates,
-    focus: focusOutlineLight,
-    hover: disabledLightStates,
-    press: disabledLightStates
   }
 });
 const theme$1 = {
   color: {
-    primary: _extends({}, baseColorStates, {
-      progressiveLight: {
-        default: {
-          border: semanticColor.border.inverse,
-          background: "transparent",
-          foreground: semanticColor.text.inverse
-        },
-        hover: {
-          border: semanticColor.border.inverse,
-          background: "transparent",
-          foreground: semanticColor.text.inverse
-        },
-        focus: focusOutlineLight,
-        press: {
-          border: color.fadedBlue,
-          background: "transparent",
-          foreground: color.fadedBlue
-        }
-      },
-      destructiveLight: {
-        default: {
-          border: semanticColor.border.inverse,
-          background: "transparent",
-          foreground: semanticColor.text.inverse
-        },
-        hover: {
-          border: semanticColor.border.inverse,
-          background: "transparent",
-          foreground: semanticColor.text.inverse
-        },
-        focus: focusOutlineLight,
-        press: {
-          border: color.fadedRed,
-          background: "transparent",
-          foreground: color.fadedRed
-        }
-      }
-    }),
+    primary: baseColorStates,
     secondary: _extends({}, baseColorStates, {
       progressive: _extends({}, baseColorStates.progressive, {
         default: _extends({}, baseColorStates.progressive.default, {
@@ -131,29 +81,27 @@ const theme$1 = {
       }),
       destructive: _extends({}, baseColorStates.destructive, {
         default: _extends({}, baseColorStates.destructive.default, {
-          foreground: semanticColor.text.primary
+          foreground: semanticColor.icon.secondary
         })
       })
     }),
     tertiary: _extends({}, baseColorStates, {
       progressive: _extends({}, baseColorStates.progressive, {
         default: _extends({}, baseColorStates.progressive.default, {
-          foreground: semanticColor.text.secondary
+          foreground: semanticColor.icon.primary
         })
       }),
       destructive: _extends({}, baseColorStates.destructive, {
         default: _extends({}, baseColorStates.destructive.default, {
-          foreground: semanticColor.text.secondary
+          foreground: semanticColor.icon.primary
         })
       })
     })
   },
   border: {
     width: {
-      default: border.width.thin,
-      active: border.width.none,
-      hovered: border.width.thin,
-      hoveredInverse: border.width.thin
+      hover: border.width.thin,
+      press: border.width.thin
     },
     radius: {
       default: border.radius.medium_4
@@ -166,25 +114,12 @@ const primaryState = {
     foreground: semanticColor.khanmigo.primary
   }
 };
-const primaryLightState = {
-  hover: {
-    background: semanticColor.surface.primary,
-    foreground: semanticColor.khanmigo.primary
-  },
-  press: {
-    border: "transparent",
-    background: color.white64,
-    foreground: semanticColor.khanmigo.primary
-  }
-};
 const actionType = semanticColor.action.primary;
 const theme = mergeTheme(theme$1, {
   color: {
     primary: {
       progressive: primaryState,
-      destructive: primaryState,
-      progressiveLight: primaryLightState,
-      destructiveLight: primaryLightState
+      destructive: primaryState
     },
     secondary: {
       progressive: {
@@ -209,8 +144,7 @@ const theme = mergeTheme(theme$1, {
   },
   border: {
     width: {
-      hovered: border.width.none,
-      hoveredInverse: border.width.none
+      hover: border.width.none
     }
   }
 });
@@ -229,7 +163,7 @@ function ThemedIconButton(props) {
   }, props.children);
 }
 
-const _excluded$1 = ["color", "disabled", "href", "icon", "kind", "light", "size", "skipClientNav", "style", "testId", "type"];
+const _excluded$1 = ["actionType", "disabled", "href", "icon", "kind", "size", "skipClientNav", "style", "testId", "type"];
 function IconChooser({
   icon,
   size
@@ -256,12 +190,11 @@ const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
 const IconButtonCore = React.forwardRef(function IconButtonCore(props, ref) {
   const {
-      color,
+      actionType,
       disabled,
       href,
       icon,
       kind = "primary",
-      light = false,
       size = "medium",
       skipClientNav,
       style,
@@ -274,7 +207,7 @@ const IconButtonCore = React.forwardRef(function IconButtonCore(props, ref) {
     themeName
   } = useScopedTheme(IconButtonThemeContext);
   const renderInner = router => {
-    const buttonStyles = _generateStyles(color, !!disabled, kind, light, size, theme, themeName);
+    const buttonStyles = _generateStyles(actionType, !!disabled, kind, size, theme, themeName);
     const defaultStyle = [sharedStyles.shared, buttonStyles.default, disabled && buttonStyles.disabled];
     const child = React.createElement(IconChooser, {
       size: size,
@@ -317,58 +250,44 @@ const sharedStyles = StyleSheet.create({
     outline: "none",
     textDecoration: "none",
     background: "none",
-    margin: -8,
+    margin: 0,
     touchAction: "manipulation"
   }
 });
 const styles = {};
-function getActionType(buttonColor, disabled) {
-  const actionType = buttonColor === "destructive" ? "destructive" : "progressive";
-  if (disabled) {
-    return "disabled";
-  }
-  return actionType;
-}
-function getStylesByKind(buttonColor, disabled, kind, light, theme) {
-  let actionType = getActionType(buttonColor, disabled);
-  const themeVariant = theme.color[kind][actionType];
+function getStylesByKind(actionType = "progressive", disabled, kind, theme) {
+  const actionTypeOrDisabled = disabled ? "disabled" : actionType;
+  const themeVariant = theme.color[kind][actionTypeOrDisabled];
   if (kind === "primary") {
-    if (light) {
-      actionType = `${actionType}Light`;
-    }
-    const _themeVariant = theme.color[kind][actionType];
-    return {
+    return _extends({
       default: {
-        borderColor: _themeVariant.default.border,
-        background: _themeVariant.default.background,
-        color: _themeVariant.default.foreground
+        borderColor: themeVariant.default.border,
+        background: themeVariant.default.background,
+        color: themeVariant.default.foreground
       },
       ":hover": {
-        background: _themeVariant.hover.background,
-        color: _themeVariant.hover.foreground,
-        outlineColor: _themeVariant.hover.border,
-        outlineOffset: 1,
-        outlineStyle: "solid",
-        outlineWidth: light ? theme.border.width.hoveredInverse : theme.border.width.hovered
-      },
-      ":focus-visible": {
-        outlineColor: _themeVariant.focus.border
-      },
+        background: themeVariant.hover.background,
+        color: themeVariant.hover.foreground,
+        borderColor: themeVariant.hover.border,
+        borderStyle: "solid",
+        borderWidth: theme.border.width.hover
+      }
+    }, focusStyles.focus, {
       ":active": {
-        borderColor: _themeVariant.press.border,
-        background: _themeVariant.press.background,
-        color: _themeVariant.press.foreground,
-        outlineColor: _themeVariant.press.border
+        borderColor: themeVariant.press.border,
+        borderStyle: "solid",
+        borderWidth: theme.border.width.press,
+        background: themeVariant.press.background,
+        color: themeVariant.press.foreground
       },
       disabled: {
-        background: _themeVariant.default.background,
-        color: _themeVariant.default.foreground,
-        outlineColor: _themeVariant.focus.border
+        background: themeVariant.default.background,
+        color: themeVariant.default.foreground
       }
-    };
+    });
   }
   if (kind === "secondary" || kind === "tertiary") {
-    return {
+    return _extends({
       default: {
         borderColor: themeVariant.default.border,
         background: themeVariant.default.background,
@@ -377,25 +296,19 @@ function getStylesByKind(buttonColor, disabled, kind, light, theme) {
       ":hover": {
         borderColor: themeVariant.hover.border,
         background: themeVariant.hover.background,
-        color: themeVariant.hover.foreground,
-        outlineWidth: theme.border.width.active
-      },
-      ":focus-visible": {
-        outlineColor: themeVariant.focus.border
-      },
+        color: themeVariant.hover.foreground
+      }
+    }, focusStyles.focus, {
       ":active": {
         borderColor: themeVariant.press.border,
         background: themeVariant.press.background,
-        color: themeVariant.press.foreground,
-        outlineColor: themeVariant.press.border,
-        outlineWidth: theme.border.width.active
+        color: themeVariant.press.foreground
       },
       disabled: {
         background: themeVariant.default.background,
-        color: themeVariant.default.foreground,
-        outlineColor: themeVariant.focus.border
+        color: themeVariant.default.foreground
       }
-    };
+    });
   }
   return {
     default: {},
@@ -405,16 +318,13 @@ function getStylesByKind(buttonColor, disabled, kind, light, theme) {
     disabled: {}
   };
 }
-const _generateStyles = (buttonColor = "default", disabled, kind, light, size, theme, themeName) => {
-  const buttonType = `${buttonColor}-d_${disabled}-${kind}-l_${light}-${size}-${themeName}`;
+const _generateStyles = (actionType = "progressive", disabled, kind, size, theme, themeName) => {
+  const buttonType = `${actionType}-d_${disabled}-${kind}-${size}-${themeName}`;
   if (styles[buttonType]) {
     return styles[buttonType];
   }
-  if (light && kind !== "primary") {
-    throw new Error("Light is only supported for primary IconButtons");
-  }
   const pixelsForSize = targetPixelsForSize(size);
-  const kindOverrides = getStylesByKind(buttonColor, disabled, kind, light, theme);
+  const kindOverrides = getStylesByKind(actionType, disabled, kind, theme);
   const disabledStatesStyles = kindOverrides.disabled;
   const newStyles = {
     default: _extends({
@@ -423,28 +333,18 @@ const _generateStyles = (buttonColor = "default", disabled, kind, light, size, t
       borderRadius: theme.border.radius.default
     }, kindOverrides.default, {
       ":hover": _extends({
-        boxShadow: "none",
-        borderRadius: theme.border.radius.default,
-        outlineWidth: theme.border.width.default
+        borderRadius: theme.border.radius.default
       }, kindOverrides[":hover"]),
       ["@media not (hover: hover)"]: {
         ":hover": {
-          boxShadow: "none",
           borderRadius: theme.border.radius.default,
-          outline: "none",
           backgroundColor: "transparent"
         }
       },
       ":focus-visible": _extends({
-        outlineWidth: theme.border.width.default,
-        outlineOffset: 1,
-        outlineStyle: "solid",
         borderRadius: theme.border.radius.default
       }, kindOverrides[":focus-visible"]),
       ":active": _extends({
-        outlineWidth: theme.border.width.default,
-        outlineOffset: 1,
-        outlineStyle: "solid",
         borderRadius: theme.border.radius.default
       }, kindOverrides[":active"])
     }),
@@ -452,10 +352,10 @@ const _generateStyles = (buttonColor = "default", disabled, kind, light, size, t
       cursor: "not-allowed"
     }, disabledStatesStyles, {
       ":hover": _extends({}, disabledStatesStyles, {
-        outline: "none"
+        border: "none"
       }),
       ":active": _extends({}, disabledStatesStyles, {
-        outline: "none"
+        border: "none"
       }),
       ":focus-visible": disabledStatesStyles
     })
@@ -464,14 +364,13 @@ const _generateStyles = (buttonColor = "default", disabled, kind, light, size, t
   return styles[buttonType];
 };
 
-const _excluded = ["color", "disabled", "href", "kind", "light", "size", "skipClientNav", "tabIndex", "target", "type"];
+const _excluded = ["actionType", "disabled", "href", "kind", "size", "skipClientNav", "tabIndex", "target", "type"];
 const IconButton = React.forwardRef(function IconButton(props, ref) {
   const {
-      color = "default",
+      actionType = "progressive",
       disabled = false,
       href,
       kind = "primary",
-      light = false,
       size = "medium",
       skipClientNav,
       tabIndex,
@@ -494,11 +393,10 @@ const IconButton = React.forwardRef(function IconButton(props, ref) {
     }
   }
   return React.createElement(ThemedIconButton, null, React.createElement(IconButtonCore, _extends({}, sharedProps, {
-    color: color,
+    actionType: actionType,
     disabled: disabled,
     href: href,
     kind: kind,
-    light: light,
     ref: ref,
     skipClientNav: skipClientNav,
     size: size,