@khanacademy/wonder-blocks-button 6.1.0 → 6.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @khanacademy/wonder-blocks-button
 
+## 6.2.0
+
+### Minor Changes
+
+-   a70a929b: Add `labelStyle` to override the styles of the internal label
+
+### Patch Changes
+
+-   Updated dependencies [7b24db93]
+    -   @khanacademy/wonder-blocks-clickable@4.0.10
+
 ## 6.1.0
 
 ### Minor Changes

package/dist/components/button.d.ts

@@ -100,6 +100,10 @@ Partial<Omit<AriaProps, "aria-disabled">> & {
      * page reload.
      */
     skipClientNav?: boolean;
+    /**
+     * Optional custom styles for the inner label.
+     */
+    labelStyle?: StyleType;
     /**
      * Optional custom styles.
      */

package/dist/es/index.js

@@ -235,7 +235,7 @@ function ButtonIcon({
   }
 }
 
-const _excluded$1 = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "light", "pressed", "size", "style", "testId", "type", "spinner", "startIcon", "endIcon", "id", "waiting"];
+const _excluded$1 = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "labelStyle", "light", "pressed", "size", "style", "testId", "type", "spinner", "startIcon", "endIcon", "id", "waiting"];
 const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
@@ -255,6 +255,7 @@ const ButtonCore = React.forwardRef(function ButtonCore(props, ref) {
         hovered,
         href = undefined,
         kind = "primary",
+        labelStyle,
         light = false,
         pressed,
         size = "medium",
@@ -278,7 +279,7 @@ const ButtonCore = React.forwardRef(function ButtonCore(props, ref) {
     }, restProps);
     const Label = size === "small" ? LabelSmall : LabelLarge;
     const label = React.createElement(Label, {
-      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)],
+      style: [sharedStyles.text, size === "large" && sharedStyles.largeText, labelStyle, 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 = {
@@ -447,43 +448,37 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
       }
     };
   } else if (kind === "secondary") {
-    const horizontalPadding = padding - (theme.border.width.focused - 1);
     const secondaryBorderColor = buttonColor === "destructive" ? theme.color.border.secondary.critical : theme.color.border.secondary.action;
     const secondaryActiveColor = buttonColor === "destructive" ? theme.color.bg.secondary.active.critical : theme.color.bg.secondary.active.action;
     newStyles = {
       default: {
         background: light ? theme.color.bg.secondary.inverse : theme.color.bg.secondary.default,
         color: light ? theme.color.text.inverse : color,
-        borderColor: light ? theme.color.border.secondary.inverse : secondaryBorderColor,
-        borderStyle: "solid",
-        borderWidth: theme.border.width.secondary,
+        outlineColor: light ? theme.color.border.secondary.inverse : secondaryBorderColor,
+        outlineStyle: "solid",
+        outlineWidth: theme.border.width.secondary,
+        outlineOffset: 1,
         paddingLeft: padding,
         paddingRight: padding
       },
       focus: {
         background: light ? theme.color.bg.secondary.inverse : theme.color.bg.secondary.focus,
-        borderColor: light ? theme.color.border.primary.inverse : color,
-        borderWidth: theme.border.width.focused,
-        paddingLeft: horizontalPadding,
-        paddingRight: horizontalPadding
+        outlineColor: light ? theme.color.border.primary.inverse : color,
+        outlineWidth: theme.border.width.focused
       },
       active: {
         background: light ? activeColor : secondaryActiveColor,
         color: light ? fadedColor : activeColor,
-        borderColor: light ? fadedColor : activeColor,
-        borderWidth: theme.border.width.focused,
-        paddingLeft: horizontalPadding,
-        paddingRight: horizontalPadding
+        outlineColor: light ? fadedColor : activeColor,
+        outlineWidth: theme.border.width.focused
       },
       disabled: {
         color: light ? theme.color.text.secondary.inverse : theme.color.text.disabled,
-        borderColor: light ? fadedColor : theme.color.border.disabled,
+        outlineColor: light ? fadedColor : theme.color.border.disabled,
         cursor: "default",
         ":focus": {
-          borderColor: light ? theme.color.border.secondary.inverse : theme.color.border.disabled,
-          borderWidth: theme.border.width.disabled,
-          paddingLeft: padding - 1,
-          paddingRight: padding - 1
+          outlineColor: light ? theme.color.border.secondary.inverse : theme.color.border.disabled,
+          outlineWidth: theme.border.width.disabled
         }
       }
     };
@@ -508,16 +503,10 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
         }
       },
       focus: {
-        ":after": {
-          content: "''",
-          position: "absolute",
-          width: `calc(100% + ${theme.border.width.focused * 2}px)`,
-          height: `calc(100% - ${theme.border.width.focused * 2}px)`,
-          borderStyle: "solid",
-          borderColor: light ? theme.color.border.tertiary.inverse : color,
-          borderWidth: theme.border.width.focused,
-          borderRadius: theme.border.radius.default
-        }
+        outlineStyle: "solid",
+        outlineColor: light ? theme.color.border.tertiary.inverse : color,
+        outlineWidth: theme.border.width.focused,
+        borderRadius: theme.border.radius.default
       },
       active: {
         color: light ? fadedColor : activeColor,
@@ -531,9 +520,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
         cursor: "default"
       },
       disabledFocus: {
-        ":after": {
-          borderColor: light ? theme.color.border.tertiary.inverse : theme.color.border.disabled
-        }
+        outlineColor: light ? theme.color.border.tertiary.inverse : theme.color.border.disabled
       }
     };
   } else {

package/dist/index.js

@@ -257,7 +257,7 @@ function ButtonIcon({
   }
 }
 
-const _excluded$1 = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "light", "pressed", "size", "style", "testId", "type", "spinner", "startIcon", "endIcon", "id", "waiting"];
+const _excluded$1 = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "labelStyle", "light", "pressed", "size", "style", "testId", "type", "spinner", "startIcon", "endIcon", "id", "waiting"];
 const StyledAnchor = wonderBlocksCore.addStyle("a");
 const StyledButton = wonderBlocksCore.addStyle("button");
 const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
@@ -277,6 +277,7 @@ const ButtonCore = React__namespace.forwardRef(function ButtonCore(props, ref) {
         hovered,
         href = undefined,
         kind = "primary",
+        labelStyle,
         light = false,
         pressed,
         size = "medium",
@@ -300,7 +301,7 @@ const ButtonCore = React__namespace.forwardRef(function ButtonCore(props, ref) {
     }, restProps);
     const Label = size === "small" ? wonderBlocksTypography.LabelSmall : wonderBlocksTypography.LabelLarge;
     const label = React__namespace.createElement(Label, {
-      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)],
+      style: [sharedStyles.text, size === "large" && sharedStyles.largeText, labelStyle, 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 = {
@@ -469,43 +470,37 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
       }
     };
   } else if (kind === "secondary") {
-    const horizontalPadding = padding - (theme.border.width.focused - 1);
     const secondaryBorderColor = buttonColor === "destructive" ? theme.color.border.secondary.critical : theme.color.border.secondary.action;
     const secondaryActiveColor = buttonColor === "destructive" ? theme.color.bg.secondary.active.critical : theme.color.bg.secondary.active.action;
     newStyles = {
       default: {
         background: light ? theme.color.bg.secondary.inverse : theme.color.bg.secondary.default,
         color: light ? theme.color.text.inverse : color,
-        borderColor: light ? theme.color.border.secondary.inverse : secondaryBorderColor,
-        borderStyle: "solid",
-        borderWidth: theme.border.width.secondary,
+        outlineColor: light ? theme.color.border.secondary.inverse : secondaryBorderColor,
+        outlineStyle: "solid",
+        outlineWidth: theme.border.width.secondary,
+        outlineOffset: 1,
         paddingLeft: padding,
         paddingRight: padding
       },
       focus: {
         background: light ? theme.color.bg.secondary.inverse : theme.color.bg.secondary.focus,
-        borderColor: light ? theme.color.border.primary.inverse : color,
-        borderWidth: theme.border.width.focused,
-        paddingLeft: horizontalPadding,
-        paddingRight: horizontalPadding
+        outlineColor: light ? theme.color.border.primary.inverse : color,
+        outlineWidth: theme.border.width.focused
       },
       active: {
         background: light ? activeColor : secondaryActiveColor,
         color: light ? fadedColor : activeColor,
-        borderColor: light ? fadedColor : activeColor,
-        borderWidth: theme.border.width.focused,
-        paddingLeft: horizontalPadding,
-        paddingRight: horizontalPadding
+        outlineColor: light ? fadedColor : activeColor,
+        outlineWidth: theme.border.width.focused
       },
       disabled: {
         color: light ? theme.color.text.secondary.inverse : theme.color.text.disabled,
-        borderColor: light ? fadedColor : theme.color.border.disabled,
+        outlineColor: light ? fadedColor : theme.color.border.disabled,
         cursor: "default",
         ":focus": {
-          borderColor: light ? theme.color.border.secondary.inverse : theme.color.border.disabled,
-          borderWidth: theme.border.width.disabled,
-          paddingLeft: padding - 1,
-          paddingRight: padding - 1
+          outlineColor: light ? theme.color.border.secondary.inverse : theme.color.border.disabled,
+          outlineWidth: theme.border.width.disabled
         }
       }
     };
@@ -530,16 +525,10 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
         }
       },
       focus: {
-        ":after": {
-          content: "''",
-          position: "absolute",
-          width: `calc(100% + ${theme.border.width.focused * 2}px)`,
-          height: `calc(100% - ${theme.border.width.focused * 2}px)`,
-          borderStyle: "solid",
-          borderColor: light ? theme.color.border.tertiary.inverse : color,
-          borderWidth: theme.border.width.focused,
-          borderRadius: theme.border.radius.default
-        }
+        outlineStyle: "solid",
+        outlineColor: light ? theme.color.border.tertiary.inverse : color,
+        outlineWidth: theme.border.width.focused,
+        borderRadius: theme.border.radius.default
       },
       active: {
         color: light ? fadedColor : activeColor,
@@ -553,9 +542,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
         cursor: "default"
       },
       disabledFocus: {
-        ":after": {
-          borderColor: light ? theme.color.border.tertiary.inverse : theme.color.border.disabled
-        }
+        outlineColor: light ? theme.color.border.tertiary.inverse : theme.color.border.disabled
       }
     };
   } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-button",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,7 +16,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^4.0.9",
+    "@khanacademy/wonder-blocks-clickable": "^4.0.10",
     "@khanacademy/wonder-blocks-color": "^3.0.0",
     "@khanacademy/wonder-blocks-core": "^6.3.0",
     "@khanacademy/wonder-blocks-icon": "^2.2.1",