@khanacademy/wonder-blocks-button 6.0.1 → 6.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-button
 
+## 6.1.0
+
+### Minor Changes
+
+-   d73f6988: Add Khanmigo theming support to buttons with icons
+
 ## 6.0.1
 
 ### Patch Changes

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

@@ -2,6 +2,8 @@ import * as React from "react";
 import { Link } from "react-router-dom";
 import type { ChildrenProps, ClickableState } from "@khanacademy/wonder-blocks-clickable";
 import type { SharedProps } from "./button";
+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;

package/dist/es/index.js

@@ -4,7 +4,7 @@ import { isClientSideUrl, getClickableBehavior } from '@khanacademy/wonder-block
 import { StyleSheet } from 'aphrodite';
 import { Link } from 'react-router-dom';
 import { LabelSmall, LabelLarge } from '@khanacademy/wonder-blocks-typography';
-import { addStyle } from '@khanacademy/wonder-blocks-core';
+import { addStyle, View } from '@khanacademy/wonder-blocks-core';
 import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
 import { tokens, mergeTheme, createThemeContext, ThemeSwitcherContext, useScopedTheme, useStyles } from '@khanacademy/wonder-blocks-theming';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
@@ -66,6 +66,9 @@ const theme$1 = {
       },
       tertiary: {
         hover: tokens.color.white
+      },
+      icon: {
+        secondaryHover: "transparent"
       }
     },
     text: {
@@ -76,6 +79,9 @@ const theme$1 = {
       },
       secondary: {
         inverse: tokens.color.white50
+      },
+      icon: {
+        secondaryHover: tokens.color.blue
       }
     },
     border: {
@@ -103,7 +109,8 @@ const theme$1 = {
       default: tokens.border.radius.medium_4,
       tertiary: tokens.border.radius.xSmall_2,
       small: tokens.border.radius.medium_4,
-      large: tokens.border.radius.large_6
+      large: tokens.border.radius.large_6,
+      icon: tokens.border.radius.full
     }
   },
   size: {
@@ -114,8 +121,14 @@ const theme$1 = {
       large: 56
     }
   },
+  margin: {
+    icon: {
+      offset: -tokens.spacing.xxxxSmall_2
+    }
+  },
   padding: {
-    small: tokens.spacing.xSmall_8,
+    xsmall: tokens.spacing.xxxxSmall_2,
+    small: tokens.spacing.xxSmall_6,
     medium: tokens.spacing.small_12,
     large: tokens.spacing.medium_16,
     xLarge: tokens.spacing.xLarge_32
@@ -143,6 +156,9 @@ const theme = mergeTheme(theme$1, {
           critical: tokens.color.fadedRed8
         },
         focus: tokens.color.offWhite
+      },
+      icon: {
+        secondaryHover: tokens.color.fadedBlue16
       }
     },
     border: {
@@ -150,6 +166,11 @@ const theme = mergeTheme(theme$1, {
         action: tokens.color.fadedBlue,
         critical: tokens.color.fadedRed
       }
+    },
+    text: {
+      icon: {
+        secondaryHover: tokens.color.blue
+      }
     }
   },
   border: {
@@ -162,6 +183,11 @@ const theme = mergeTheme(theme$1, {
       focused: tokens.border.width.hairline
     }
   },
+  margin: {
+    icon: {
+      offset: -tokens.spacing.xSmall_8
+    }
+  },
   font: {
     weight: {
       default: tokens.font.weight.regular
@@ -261,22 +287,26 @@ const ButtonCore = React.forwardRef(function ButtonCore(props, ref) {
       large: "medium"
     };
     const iconSize = size === "small" ? "small" : "medium";
-    const contents = React.createElement(React.Fragment, null, startIcon && React.createElement(ButtonIcon, {
+    const contents = React.createElement(React.Fragment, null, startIcon && React.createElement(View, {
+      style: sharedStyles.iconWrapper
+    }, React.createElement(ButtonIcon, {
       size: iconSize,
       icon: startIcon,
-      style: sharedStyles.startIcon,
+      style: [sharedStyles.startIcon, kind === "tertiary" && sharedStyles.tertiaryStartIcon],
       testId: testId ? `${testId}-start-icon` : undefined
-    }), label, spinner && React.createElement(CircularSpinner, {
+    })), label, spinner && React.createElement(CircularSpinner, {
       style: sharedStyles.spinner,
       size: sizeMapping[size],
       light: kind === "primary",
       testId: `${testId || "button"}-spinner`
-    }), endIcon && React.createElement(ButtonIcon, {
+    }), 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" && sharedStyles.iconWrapperSecondaryHovered]
+    }, React.createElement(ButtonIcon, {
       size: iconSize,
       icon: endIcon,
-      style: sharedStyles.endIcon,
       testId: testId ? `${testId}-end-icon` : undefined
-    }));
+    })));
     if (href && !disabled) {
       return router && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, {
         to: href,
@@ -319,9 +349,6 @@ const themedSharedStyles = theme => ({
       WebkitTapHighlightColor: "rgba(0,0,0,0)"
     }
   },
-  withIcon: {
-    paddingLeft: theme.padding.medium
-  },
   disabled: {
     cursor: "auto"
   },
@@ -344,7 +371,7 @@ const themedSharedStyles = theme => ({
   },
   largeText: {
     fontSize: theme.font.size.large,
-    lineHeight: theme.font.lineHeight.large
+    lineHeight: `${theme.font.lineHeight.large}px`
   },
   textWithFocus: {
     position: "relative"
@@ -356,10 +383,30 @@ const themedSharedStyles = theme => ({
     position: "absolute"
   },
   startIcon: {
-    marginInlineEnd: theme.padding.small
+    marginRight: theme.padding.small,
+    marginLeft: theme.margin.icon.offset
+  },
+  tertiaryStartIcon: {
+    marginLeft: 0
   },
   endIcon: {
-    marginInlineStart: theme.padding.small
+    marginLeft: theme.padding.small
+  },
+  iconWrapper: {
+    borderRadius: theme.border.radius.icon,
+    padding: theme.padding.xsmall,
+    minWidth: "auto"
+  },
+  iconWrapperSecondaryHovered: {
+    backgroundColor: theme.color.bg.icon.secondaryHover,
+    color: theme.color.text.icon.secondaryHover
+  },
+  endIconWrapper: {
+    marginLeft: theme.padding.small,
+    marginRight: theme.margin.icon.offset
+  },
+  endIconWrapperTertiary: {
+    marginRight: 0
   }
 });
 const styles = {};

package/dist/index.js

@@ -88,6 +88,9 @@ const theme$1 = {
       },
       tertiary: {
         hover: wonderBlocksTheming.tokens.color.white
+      },
+      icon: {
+        secondaryHover: "transparent"
       }
     },
     text: {
@@ -98,6 +101,9 @@ const theme$1 = {
       },
       secondary: {
         inverse: wonderBlocksTheming.tokens.color.white50
+      },
+      icon: {
+        secondaryHover: wonderBlocksTheming.tokens.color.blue
       }
     },
     border: {
@@ -125,7 +131,8 @@ const theme$1 = {
       default: wonderBlocksTheming.tokens.border.radius.medium_4,
       tertiary: wonderBlocksTheming.tokens.border.radius.xSmall_2,
       small: wonderBlocksTheming.tokens.border.radius.medium_4,
-      large: wonderBlocksTheming.tokens.border.radius.large_6
+      large: wonderBlocksTheming.tokens.border.radius.large_6,
+      icon: wonderBlocksTheming.tokens.border.radius.full
     }
   },
   size: {
@@ -136,8 +143,14 @@ const theme$1 = {
       large: 56
     }
   },
+  margin: {
+    icon: {
+      offset: -wonderBlocksTheming.tokens.spacing.xxxxSmall_2
+    }
+  },
   padding: {
-    small: wonderBlocksTheming.tokens.spacing.xSmall_8,
+    xsmall: wonderBlocksTheming.tokens.spacing.xxxxSmall_2,
+    small: wonderBlocksTheming.tokens.spacing.xxSmall_6,
     medium: wonderBlocksTheming.tokens.spacing.small_12,
     large: wonderBlocksTheming.tokens.spacing.medium_16,
     xLarge: wonderBlocksTheming.tokens.spacing.xLarge_32
@@ -165,6 +178,9 @@ const theme = wonderBlocksTheming.mergeTheme(theme$1, {
           critical: wonderBlocksTheming.tokens.color.fadedRed8
         },
         focus: wonderBlocksTheming.tokens.color.offWhite
+      },
+      icon: {
+        secondaryHover: wonderBlocksTheming.tokens.color.fadedBlue16
       }
     },
     border: {
@@ -172,6 +188,11 @@ const theme = wonderBlocksTheming.mergeTheme(theme$1, {
         action: wonderBlocksTheming.tokens.color.fadedBlue,
         critical: wonderBlocksTheming.tokens.color.fadedRed
       }
+    },
+    text: {
+      icon: {
+        secondaryHover: wonderBlocksTheming.tokens.color.blue
+      }
     }
   },
   border: {
@@ -184,6 +205,11 @@ const theme = wonderBlocksTheming.mergeTheme(theme$1, {
       focused: wonderBlocksTheming.tokens.border.width.hairline
     }
   },
+  margin: {
+    icon: {
+      offset: -wonderBlocksTheming.tokens.spacing.xSmall_8
+    }
+  },
   font: {
     weight: {
       default: wonderBlocksTheming.tokens.font.weight.regular
@@ -283,22 +309,26 @@ const ButtonCore = React__namespace.forwardRef(function ButtonCore(props, ref) {
       large: "medium"
     };
     const iconSize = size === "small" ? "small" : "medium";
-    const contents = React__namespace.createElement(React__namespace.Fragment, null, startIcon && React__namespace.createElement(ButtonIcon, {
+    const contents = React__namespace.createElement(React__namespace.Fragment, null, startIcon && React__namespace.createElement(wonderBlocksCore.View, {
+      style: sharedStyles.iconWrapper
+    }, React__namespace.createElement(ButtonIcon, {
       size: iconSize,
       icon: startIcon,
-      style: sharedStyles.startIcon,
+      style: [sharedStyles.startIcon, kind === "tertiary" && sharedStyles.tertiaryStartIcon],
       testId: testId ? `${testId}-start-icon` : undefined
-    }), label, spinner && React__namespace.createElement(wonderBlocksProgressSpinner.CircularSpinner, {
+    })), label, spinner && React__namespace.createElement(wonderBlocksProgressSpinner.CircularSpinner, {
       style: sharedStyles.spinner,
       size: sizeMapping[size],
       light: kind === "primary",
       testId: `${testId || "button"}-spinner`
-    }), endIcon && React__namespace.createElement(ButtonIcon, {
+    }), endIcon && React__namespace.createElement(wonderBlocksCore.View, {
+      testId: testId ? `${testId}-end-icon-wrapper` : undefined,
+      style: [styles.endIcon, sharedStyles.iconWrapper, sharedStyles.endIconWrapper, kind === "tertiary" && sharedStyles.endIconWrapperTertiary, (focused || hovered) && kind !== "primary" && sharedStyles.iconWrapperSecondaryHovered]
+    }, React__namespace.createElement(ButtonIcon, {
       size: iconSize,
       icon: endIcon,
-      style: sharedStyles.endIcon,
       testId: testId ? `${testId}-end-icon` : undefined
-    }));
+    })));
     if (href && !disabled) {
       return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends({}, commonProps, {
         to: href,
@@ -341,9 +371,6 @@ const themedSharedStyles = theme => ({
       WebkitTapHighlightColor: "rgba(0,0,0,0)"
     }
   },
-  withIcon: {
-    paddingLeft: theme.padding.medium
-  },
   disabled: {
     cursor: "auto"
   },
@@ -366,7 +393,7 @@ const themedSharedStyles = theme => ({
   },
   largeText: {
     fontSize: theme.font.size.large,
-    lineHeight: theme.font.lineHeight.large
+    lineHeight: `${theme.font.lineHeight.large}px`
   },
   textWithFocus: {
     position: "relative"
@@ -378,10 +405,30 @@ const themedSharedStyles = theme => ({
     position: "absolute"
   },
   startIcon: {
-    marginInlineEnd: theme.padding.small
+    marginRight: theme.padding.small,
+    marginLeft: theme.margin.icon.offset
+  },
+  tertiaryStartIcon: {
+    marginLeft: 0
   },
   endIcon: {
-    marginInlineStart: theme.padding.small
+    marginLeft: theme.padding.small
+  },
+  iconWrapper: {
+    borderRadius: theme.border.radius.icon,
+    padding: theme.padding.xsmall,
+    minWidth: "auto"
+  },
+  iconWrapperSecondaryHovered: {
+    backgroundColor: theme.color.bg.icon.secondaryHover,
+    color: theme.color.text.icon.secondaryHover
+  },
+  endIconWrapper: {
+    marginLeft: theme.padding.small,
+    marginRight: theme.margin.icon.offset
+  },
+  endIconWrapperTertiary: {
+    marginRight: 0
   }
 });
 const styles = {};

package/dist/themes/default.d.ts

@@ -34,6 +34,12 @@ declare const theme: {
             tertiary: {
                 hover: string;
             };
+            /**
+             * Icons
+             */
+            icon: {
+                secondaryHover: string;
+            };
         };
         text: {
             /**
@@ -50,6 +56,12 @@ declare const theme: {
             secondary: {
                 inverse: string;
             };
+            /**
+             * Icons
+             */
+            icon: {
+                secondaryHover: string;
+            };
         };
         border: {
             /**
@@ -83,6 +95,10 @@ declare const theme: {
             tertiary: number;
             small: number;
             large: number;
+            /**
+             * Icons
+             */
+            icon: string;
         };
     };
     size: {
@@ -93,8 +109,14 @@ declare const theme: {
             large: number;
         };
     };
+    margin: {
+        icon: {
+            offset: number;
+        };
+    };
     padding: {
-        small: 8;
+        xsmall: 2;
+        small: 6;
         medium: 12;
         large: 16;
         xLarge: 32;

package/dist/themes/khanmigo.d.ts

@@ -31,6 +31,9 @@ declare const theme: {
             tertiary: {
                 hover: string;
             };
+            icon: {
+                secondaryHover: string;
+            };
         };
         text: {
             disabled: string;
@@ -41,6 +44,9 @@ declare const theme: {
             secondary: {
                 inverse: string;
             };
+            icon: {
+                secondaryHover: string;
+            };
         };
         border: {
             disabled: string;
@@ -68,6 +74,7 @@ declare const theme: {
             tertiary: number;
             small: number;
             large: number;
+            icon: string;
         };
     };
     size: {
@@ -78,8 +85,14 @@ declare const theme: {
             large: number;
         };
     };
+    margin: {
+        icon: {
+            offset: number;
+        };
+    };
     padding: {
-        small: 8;
+        xsmall: 2;
+        small: 6;
         medium: 12;
         large: 16;
         xLarge: 32;

package/dist/themes/themed-button.d.ts

@@ -38,6 +38,9 @@ export declare const ButtonThemeContext: React.Context<{
             tertiary: {
                 hover: string;
             };
+            icon: {
+                secondaryHover: string;
+            };
         };
         text: {
             disabled: string;
@@ -48,6 +51,9 @@ export declare const ButtonThemeContext: React.Context<{
             secondary: {
                 inverse: string;
             };
+            icon: {
+                secondaryHover: string;
+            };
         };
         border: {
             disabled: string;
@@ -75,6 +81,7 @@ export declare const ButtonThemeContext: React.Context<{
             tertiary: number;
             small: number;
             large: number;
+            icon: string;
         };
     };
     size: {
@@ -85,8 +92,14 @@ export declare const ButtonThemeContext: React.Context<{
             large: number;
         };
     };
+    margin: {
+        icon: {
+            offset: number;
+        };
+    };
     padding: {
-        small: 8;
+        xsmall: 2;
+        small: 6;
         medium: 12;
         large: 16;
         xLarge: 32;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-button",
-  "version": "6.0.1",
+  "version": "6.1.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"