@khanacademy/wonder-blocks-button 2.11.3 → 2.11.6

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @khanacademy/wonder-blocks-button
 
+## 2.11.6
+
+### Patch Changes
+
+-   Updated dependencies [5f4a4297]
+-   Updated dependencies [2b96fd59]
+    -   @khanacademy/wonder-blocks-core@4.3.2
+    -   @khanacademy/wonder-blocks-clickable@2.2.7
+    -   @khanacademy/wonder-blocks-icon@1.2.28
+    -   @khanacademy/wonder-blocks-progress-spinner@1.1.32
+    -   @khanacademy/wonder-blocks-typography@1.1.32
+
+## 2.11.5
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-clickable@2.2.6
+-   @khanacademy/wonder-blocks-core@4.3.1
+-   @khanacademy/wonder-blocks-icon@1.2.27
+-   @khanacademy/wonder-blocks-progress-spinner@1.1.31
+-   @khanacademy/wonder-blocks-typography@1.1.31
+
+## 2.11.4
+
+### Patch Changes
+
+-   Updated dependencies [246a921d]
+    -   @khanacademy/wonder-blocks-core@4.3.0
+    -   @khanacademy/wonder-blocks-clickable@2.2.5
+    -   @khanacademy/wonder-blocks-icon@1.2.26
+    -   @khanacademy/wonder-blocks-progress-spinner@1.1.30
+    -   @khanacademy/wonder-blocks-typography@1.1.30
+
 ## 2.11.3
 
 ### Patch Changes

package/dist/es/index.js

@@ -46,8 +46,7 @@ class ButtonCore extends React.Component {
     const buttonStyles = _generateStyles(buttonColor, kind, light, iconWidth, size);
 
     const disabled = spinner || disabledProp;
-    const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, icon && sharedStyles.withIcon, buttonStyles.default, disabled && buttonStyles.disabled, // apply focus effect only to default and secondary buttons
-    kind !== "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), size === "small" && sharedStyles.small, size === "xlarge" && sharedStyles.xlarge];
+    const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, icon && sharedStyles.withIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), size === "small" && sharedStyles.small, size === "xlarge" && sharedStyles.xlarge];
 
     const commonProps = _extends({
       "data-test-id": testId,
@@ -57,16 +56,15 @@ class ButtonCore extends React.Component {
     }, restProps);
 
     const Label = size === "small" ? LabelSmall : LabelLarge;
-    const label = /*#__PURE__*/React.createElement(Label, {
-      style: [sharedStyles.text, size === "xlarge" && sharedStyles.xlargeText, icon && sharedStyles.textWithIcon, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, // apply focus effect on the label instead
-      kind === "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)]
-    }, icon && /*#__PURE__*/React.createElement(Icon, {
+    const label = React.createElement(Label, {
+      style: [sharedStyles.text, size === "xlarge" && sharedStyles.xlargeText, icon && sharedStyles.textWithIcon, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, kind === "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)]
+    }, icon && React.createElement(Icon, {
       size: size,
       color: "currentColor",
       icon: icon,
       style: sharedStyles.icon
     }), children);
-    const contents = /*#__PURE__*/React.createElement(React.Fragment, null, label, spinner && /*#__PURE__*/React.createElement(CircularSpinner, {
+    const contents = React.createElement(React.Fragment, null, label, spinner && React.createElement(CircularSpinner, {
       style: sharedStyles.spinner,
       size: {
         medium: "small",
@@ -77,13 +75,13 @@ class ButtonCore extends React.Component {
     }));
 
     if (href && !disabled) {
-      return router && !skipClientNav && isClientSideUrl(href) ? /*#__PURE__*/React.createElement(StyledLink, _extends({}, commonProps, {
+      return router && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, {
         to: href
-      }), contents) : /*#__PURE__*/React.createElement(StyledAnchor, _extends({}, commonProps, {
+      }), contents) : React.createElement(StyledAnchor, _extends({}, commonProps, {
         href: href
       }), contents);
     } else {
-      return /*#__PURE__*/React.createElement(StyledButton, _extends({
+      return React.createElement(StyledButton, _extends({
         type: type || "button"
       }, commonProps, {
         "aria-disabled": disabled
@@ -92,7 +90,7 @@ class ButtonCore extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderInner(router));
+    return React.createElement(__RouterContext.Consumer, null, router => this.renderInner(router));
   }
 
 }
@@ -113,17 +111,13 @@ const sharedStyles = StyleSheet.create({
     outline: "none",
     textDecoration: "none",
     boxSizing: "border-box",
-    // This removes the 300ms click delay on mobile browsers by indicating that
-    // "double-tap to zoom" shouldn't be used on this element.
     touchAction: "manipulation",
     userSelect: "none",
     ":focus": {
-      // Mobile: Removes a blue highlight style shown when the user clicks a button
       WebkitTapHighlightColor: "rgba(0,0,0,0)"
     }
   },
   withIcon: {
-    // The left padding for the button with icon should have 4px less padding
     paddingLeft: 12
   },
   disabled: {
@@ -142,21 +136,17 @@ const sharedStyles = StyleSheet.create({
     overflow: "hidden",
     textOverflow: "ellipsis",
     display: "inline-block",
-    // allows the button text to truncate
-    pointerEvents: "none" // fix Safari bug where the browser was eating mouse events
-
+    pointerEvents: "none"
   },
   xlargeText: {
     fontSize: 18,
     lineHeight: "20px"
   },
   textWithIcon: {
-    display: "flex" // allows the text and icon to sit nicely together
-
+    display: "flex"
   },
   textWithFocus: {
-    position: "relative" // allows the tertiary button border to use the label width
-
+    position: "relative"
   },
   hiddenText: {
     visibility: "hidden"
@@ -199,10 +189,6 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
         paddingRight: padding
       },
       focus: {
-        // This assumes a background of white for the regular button and
-        // a background of darkBlue for the light version. The inner
-        // box shadow/ring is also small enough for a slight variation
-        // in the background color not to matter too much.
         boxShadow: `0 0 0 1px ${light ? darkBlue : white}, 0 0 0 3px ${light ? white : color}`
       },
       active: {
@@ -234,8 +220,6 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
         background: light ? "transparent" : white,
         borderColor: light ? white : color,
         borderWidth: 2,
-        // The left padding for the button with icon should have 4px
-        // less padding
         paddingLeft: iconWidth ? padding - 5 : padding - 1,
         paddingRight: padding - 1
       },
@@ -244,10 +228,6 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
         color: light ? fadedColor : activeColor,
         borderColor: light ? fadedColor : activeColor,
         borderWidth: 2,
-        // We need to reduce padding to offset the difference
-        // caused by the border becoming thicker on focus.
-        // The left padding for the button with icon should have 4px
-        // less padding
         paddingLeft: iconWidth ? padding - 5 : padding - 1,
         paddingRight: padding - 1
       },
@@ -258,17 +238,12 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
         ":focus": {
           borderColor: light ? white50 : offBlack32,
           borderWidth: 2,
-          // We need to reduce padding to offset the difference
-          // caused by the border becoming thicker on focus.
-          // The left padding for the button with icon should have 4px
-          // less padding
           paddingLeft: iconWidth ? padding - 5 : padding - 1,
           paddingRight: padding - 1
         }
       }
     };
   } else if (kind === "tertiary") {
-    // TODO(FEI-4229): Make tertiary buttons focusable
     newStyles = {
       default: {
         background: "none",
@@ -316,27 +291,6 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
 
 const _excluded = ["href", "type", "children", "skipClientNav", "spinner", "disabled", "onClick", "beforeNav", "safeWithNav", "tabIndex", "target", "rel"],
       _excluded2 = ["tabIndex"];
-
-/**
- * Reusable button component.
- *
- * Consisting of a [`ClickableBehavior`](#clickablebehavior) surrounding a
- * `ButtonCore`. `ClickableBehavior` handles interactions and state changes.
- * `ButtonCore` is a stateless component which displays the different states
- * the `Button` can take.
- *
- * ### Usage
- *
- * ```jsx
- * import Button from "@khanacademy/wonder-blocks-button";
- *
- * <Button
- *     onClick={(e) => console.log("Hello, world!")}
- * >
- *     Hello, world!
- * </Button>
- * ```
- */
 class Button extends React.Component {
   renderClickableBehavior(router) {
     const _this$props = this.props,
@@ -364,22 +318,19 @@ class Button extends React.Component {
       } = _ref,
           restChildProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
 
-      return /*#__PURE__*/React.createElement(ButtonCore, _extends({}, sharedButtonCoreProps, state, restChildProps, {
+      return React.createElement(ButtonCore, _extends({}, sharedButtonCoreProps, state, restChildProps, {
         disabled: disabled,
         spinner: spinner || state.waiting,
         skipClientNav: skipClientNav,
         href: href,
         target: target,
-        type: type // If tabIndex is provide to the component we allow
-        // it to override the tabIndex provide to use by
-        // ClickableBehavior.
-        ,
+        type: type,
         tabIndex: tabIndex || clickableTabIndex
       }), children);
     };
 
     if (beforeNav) {
-      return /*#__PURE__*/React.createElement(ClickableBehavior, {
+      return React.createElement(ClickableBehavior, {
         disabled: spinner || disabled,
         href: href,
         role: "button",
@@ -390,7 +341,7 @@ class Button extends React.Component {
         rel: rel
       }, renderProp);
     } else {
-      return /*#__PURE__*/React.createElement(ClickableBehavior, {
+      return React.createElement(ClickableBehavior, {
         disabled: spinner || disabled,
         href: href,
         role: "button",
@@ -404,7 +355,7 @@ class Button extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+    return React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
   }
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-button",
-  "version": "2.11.3",
+  "version": "2.11.6",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,13 +16,13 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-clickable": "^2.2.4",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.7",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
-    "@khanacademy/wonder-blocks-core": "^4.2.1",
-    "@khanacademy/wonder-blocks-icon": "^1.2.25",
-    "@khanacademy/wonder-blocks-progress-spinner": "^1.1.29",
+    "@khanacademy/wonder-blocks-core": "^4.3.2",
+    "@khanacademy/wonder-blocks-icon": "^1.2.28",
+    "@khanacademy/wonder-blocks-progress-spinner": "^1.1.32",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.29"
+    "@khanacademy/wonder-blocks-typography": "^1.1.32"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -31,6 +31,6 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.3.0"
+    "wb-dev-build-settings": "^0.4.0"
   }
 }

package/src/components/button.js

@@ -90,6 +90,8 @@ export type SharedProps = {|
     /**
      * A target destination window for a link to open in. Should only be used
      * when `href` is specified.
+     *
+     * TODO(WB-1262): only allow this prop when `href` is also set.t
      */
     target?: "_blank",