@khanacademy/wonder-blocks-icon-button 6.1.4 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @khanacademy/wonder-blocks-icon-button
 
+## 8.0.0
+
+### Major Changes
+
+- 4846e9c: - Updated to match `Button` styles.
+    - Reworked `kind` styles.
+    - Removed `secondary` style.
+    - Removed `khanmigo` theme to have a more consistent experience in the current site (OG).
+
+### Minor Changes
+
+- 4846e9c: Add `neutral` value to `actionType` prop.
+
+### Patch Changes
+
+- Updated dependencies [3dc5dac]
+    - @khanacademy/wonder-blocks-tokens@5.2.0
+    - @khanacademy/wonder-blocks-clickable@6.1.5
+    - @khanacademy/wonder-blocks-styles@0.2.1
+
+## 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

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" | "neutral";
 export type SharedProps = Partial<Omit<AriaProps, "aria-disabled">> & {
     /**
      * A unique identifier for the IconButton.
@@ -13,9 +14,16 @@ 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.
+     * - `neutral` is used for actions that are neither positive nor negative.
+     *
+     * Defaults to `progressive`.
      */
-    color?: "default" | "destructive";
+    actionType?: IconButtonActionType;
     /**
      * The kind of the icon button, either primary, secondary, or tertiary.
      *
@@ -27,10 +35,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

@@ -7,8 +7,9 @@ import { __RouterContext } from 'react-router';
 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 { createThemeContext, ThemeSwitcherContext, useScopedTheme } from '@khanacademy/wonder-blocks-theming';
+import { focusStyles } from '@khanacademy/wonder-blocks-styles';
+import { semanticColor, border } from '@khanacademy/wonder-blocks-tokens';
 
 const iconSizeForButtonSize = size => {
   switch (size) {
@@ -29,137 +30,30 @@ const targetPixelsForSize = size => ({
   large: 48
 })[size];
 
-const disabledStates = {
-  border: semanticColor.action.primary.disabled.border,
-  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,
-    press: {
-      border: semanticColor.action.secondary.progressive.press.border,
-      background: "transparent",
-      foreground: semanticColor.action.secondary.progressive.press.foreground
-    }
-  }),
-  destructive: _extends({}, semanticColor.action.secondary.destructive, {
-    default: _extends({}, semanticColor.action.secondary.destructive.default, {
-      border: "transparent",
-      background: "transparent"
-    }),
-    focus: focusOutline,
-    press: {
-      border: semanticColor.action.secondary.destructive.press.border,
-      background: "transparent",
-      foreground: semanticColor.action.secondary.destructive.press.foreground
-    }
-  }),
-  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
-        }
-      }
-    }),
-    secondary: _extends({}, baseColorStates, {
-      progressive: _extends({}, baseColorStates.progressive, {
-        default: _extends({}, baseColorStates.progressive.default, {
-          foreground: semanticColor.text.primary
-        })
-      }),
-      destructive: _extends({}, baseColorStates.destructive, {
-        default: _extends({}, baseColorStates.destructive.default, {
-          foreground: semanticColor.icon.secondary
-        })
-      })
-    }),
-    tertiary: _extends({}, baseColorStates, {
-      progressive: _extends({}, baseColorStates.progressive, {
-        default: _extends({}, baseColorStates.progressive.default, {
-          foreground: semanticColor.icon.primary
-        }),
-        hover: _extends({}, baseColorStates.progressive.hover, {
-          background: "transparent"
-        })
-      }),
-      destructive: _extends({}, baseColorStates.destructive, {
-        default: _extends({}, baseColorStates.destructive.default, {
-          foreground: semanticColor.icon.primary
-        }),
-        hover: _extends({}, baseColorStates.destructive.hover, {
-          background: "transparent"
-        })
-      })
-    })
-  },
+const theme = {
+  color: semanticColor.action,
   border: {
+    offset: {
+      primary: border.width.thin,
+      secondary: -border.width.thin,
+      tertiary: -border.width.thin
+    },
     width: {
-      default: border.width.thin,
-      active: border.width.none,
-      hovered: border.width.thin,
-      hoveredInverse: border.width.thin
+      primary: {
+        default: border.width.none,
+        hover: border.width.thin,
+        press: border.width.thin
+      },
+      secondary: {
+        default: border.width.hairline,
+        hover: border.width.thin,
+        press: border.width.thin
+      },
+      tertiary: {
+        default: border.width.none,
+        hover: border.width.thin,
+        press: border.width.thin
+      }
     },
     radius: {
       default: border.radius.medium_4
@@ -167,75 +61,20 @@ const theme$1 = {
   }
 };
 
-const primaryState = {
-  hover: {
-    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
-    },
-    secondary: {
-      progressive: {
-        hover: actionType.progressive.hover,
-        press: actionType.progressive.press
-      },
-      destructive: {
-        hover: actionType.destructive.hover,
-        press: actionType.destructive.press
-      }
-    },
-    tertiary: {
-      progressive: {
-        hover: actionType.progressive.hover,
-        press: actionType.progressive.press
-      },
-      destructive: {
-        hover: actionType.destructive.hover,
-        press: actionType.destructive.press
-      }
-    }
-  },
-  border: {
-    width: {
-      hovered: border.width.none,
-      hoveredInverse: border.width.none
-    }
-  }
-});
-
 const themes = {
-  default: theme$1,
-  khanmigo: theme
+  default: theme
 };
-const IconButtonThemeContext = createThemeContext(theme$1);
+const IconButtonThemeContext = createThemeContext(theme);
 function ThemedIconButton(props) {
   var _themes$currentTheme;
   const currentTheme = React.useContext(ThemeSwitcherContext);
-  const theme = (_themes$currentTheme = themes[currentTheme]) != null ? _themes$currentTheme : theme$1;
+  const theme$1 = (_themes$currentTheme = themes[currentTheme]) != null ? _themes$currentTheme : theme;
   return React.createElement(IconButtonThemeContext.Provider, {
-    value: theme
+    value: theme$1
   }, 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
@@ -262,12 +101,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,
@@ -280,7 +118,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,
@@ -323,136 +161,55 @@ 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];
-  if (kind === "primary") {
-    if (light) {
-      actionType = `${actionType}Light`;
-    }
-    const _themeVariant = theme.color[kind][actionType];
-    return {
-      default: {
-        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
-      },
-      ":active": {
-        borderColor: _themeVariant.press.border,
-        background: _themeVariant.press.background,
-        color: _themeVariant.press.foreground,
-        outlineColor: _themeVariant.press.border
-      },
-      disabled: {
-        background: _themeVariant.default.background,
-        color: _themeVariant.default.foreground,
-        outlineColor: _themeVariant.focus.border
-      }
-    };
-  }
-  if (kind === "secondary" || kind === "tertiary") {
-    return {
-      default: {
-        borderColor: themeVariant.default.border,
-        background: themeVariant.default.background,
-        color: themeVariant.default.foreground
-      },
-      ":hover": {
-        borderColor: themeVariant.hover.border,
-        background: themeVariant.hover.background,
-        color: themeVariant.hover.foreground,
-        outlineWidth: theme.border.width.active
-      },
-      ":focus-visible": {
-        outlineColor: themeVariant.focus.border
-      },
-      ":active": {
-        borderColor: themeVariant.press.border,
-        background: themeVariant.press.background,
-        color: themeVariant.press.foreground,
-        outlineColor: themeVariant.press.border,
-        outlineWidth: theme.border.width.active
-      },
-      disabled: {
-        background: themeVariant.default.background,
-        color: themeVariant.default.foreground,
-        outlineColor: themeVariant.focus.border
-      }
-    };
-  }
-  return {
-    default: {},
-    ":hover": {},
-    ":focus-visible": {},
-    ":active": {},
-    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 disabledStatesStyles = kindOverrides.disabled;
+  const borderWidthKind = theme.border.width[kind];
+  const outlineOffsetKind = theme.border.offset[kind];
+  const themeVariant = theme.color[kind][actionType];
+  const disabledState = theme.color[kind].disabled;
+  const disabledStatesStyles = {
+    borderColor: disabledState.border,
+    background: disabledState.background,
+    color: disabledState.foreground
+  };
   const newStyles = {
     default: _extends({
       height: pixelsForSize,
       width: pixelsForSize,
-      borderRadius: theme.border.radius.default
-    }, kindOverrides.default, {
-      ":hover": _extends({
-        boxShadow: "none",
-        borderRadius: theme.border.radius.default,
-        outlineWidth: theme.border.width.default
-      }, kindOverrides[":hover"]),
+      borderRadius: theme.border.radius.default,
+      borderStyle: "solid",
+      borderWidth: borderWidthKind.default,
+      borderColor: themeVariant.default.border,
+      background: themeVariant.default.background,
+      color: themeVariant.default.foreground,
+      ":hover:not([aria-disabled=true])": {
+        background: themeVariant.hover.background,
+        color: themeVariant.hover.foreground,
+        outline: kind === "primary" ? `${borderWidthKind.hover}px solid ${themeVariant.hover.border}` : undefined,
+        outlineOffset: kind === "primary" ? outlineOffsetKind : undefined,
+        border: kind !== "primary" ? `${borderWidthKind.hover}px solid ${themeVariant.hover.border}` : undefined
+      },
       ["@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"])
+      }
+    }, focusStyles.focus, {
+      ":active:not([aria-disabled=true])": {
+        outlineColor: kind === "primary" ? themeVariant.press.border : "undefined",
+        border: kind !== "primary" ? `${borderWidthKind.hover}px solid ${themeVariant.press.border}` : undefined,
+        background: themeVariant.press.background,
+        color: themeVariant.press.foreground
+      }
     }),
     disabled: _extends({
       cursor: "not-allowed"
@@ -470,14 +227,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,
@@ -500,11 +256,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,