@khanacademy/wonder-blocks-button 2.10.0 → 2.11.1

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# @khanacademy/wonder-blocks-button
+
+## 2.11.1
+
+### Patch Changes
+
+-   Updated dependencies [901bfe82]
+    -   @khanacademy/wonder-blocks-clickable@2.2.2
+
+## 2.11.0
+
+### Minor Changes
+
+-   02c1a142: Make disabled buttons focusable

package/dist/es/index.js

@@ -1,6 +1,6 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
-import { Component, createElement, Fragment } from 'react';
+import * as React from 'react';
 import { __RouterContext } from 'react-router';
 import { isClientSideUrl, getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
 import { StyleSheet } from 'aphrodite';
@@ -12,11 +12,11 @@ import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
 import Icon from '@khanacademy/wonder-blocks-icon';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
 
-const _excluded = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "light", "pressed", "size", "style", "testId", "type", "spinner", "icon", "id", "waiting"];
+const _excluded$1 = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "light", "pressed", "size", "style", "testId", "type", "spinner", "icon", "id", "waiting"];
 const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
-class ButtonCore extends Component {
+class ButtonCore extends React.Component {
   renderInner(router) {
     const _this$props = this.props,
           {
@@ -38,7 +38,7 @@ class ButtonCore extends Component {
       icon,
       id
     } = _this$props,
-          restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+          restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
 
     const buttonColor = color === "destructive" ? SemanticColor.controlDestructive : SemanticColor.controlDefault;
     const iconWidth = icon ? (size === "small" ? 16 : 24) + 8 : 0;
@@ -57,16 +57,16 @@ class ButtonCore extends Component {
     }, restProps);
 
     const Label = size === "small" ? LabelSmall : LabelLarge;
-    const label = /*#__PURE__*/createElement(Label, {
+    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__*/createElement(Icon, {
+    }, icon && /*#__PURE__*/React.createElement(Icon, {
       size: size,
       color: "currentColor",
       icon: icon,
       style: sharedStyles.icon
     }), children);
-    const contents = /*#__PURE__*/createElement(Fragment, null, label, spinner && /*#__PURE__*/createElement(CircularSpinner, {
+    const contents = /*#__PURE__*/React.createElement(React.Fragment, null, label, spinner && /*#__PURE__*/React.createElement(CircularSpinner, {
       style: sharedStyles.spinner,
       size: {
         medium: "small",
@@ -77,22 +77,22 @@ class ButtonCore extends Component {
     }));
 
     if (href && !disabled) {
-      return router && !skipClientNav && isClientSideUrl(href) ? /*#__PURE__*/createElement(StyledLink, _extends({}, commonProps, {
+      return router && !skipClientNav && isClientSideUrl(href) ? /*#__PURE__*/React.createElement(StyledLink, _extends({}, commonProps, {
         to: href
-      }), contents) : /*#__PURE__*/createElement(StyledAnchor, _extends({}, commonProps, {
+      }), contents) : /*#__PURE__*/React.createElement(StyledAnchor, _extends({}, commonProps, {
         href: href
       }), contents);
     } else {
-      return /*#__PURE__*/createElement(StyledButton, _extends({
+      return /*#__PURE__*/React.createElement(StyledButton, _extends({
         type: type || "button"
       }, commonProps, {
-        disabled: disabled
+        "aria-disabled": disabled
       }), contents);
     }
   }
 
   render() {
-    return /*#__PURE__*/createElement(__RouterContext.Consumer, null, router => this.renderInner(router));
+    return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderInner(router));
   }
 
 }
@@ -213,7 +213,10 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
       disabled: {
         background: light ? fadedColor : offBlack32,
         color: light ? color : white64,
-        cursor: "default"
+        cursor: "default",
+        ":focus": {
+          boxShadow: `0 0 0 1px ${light ? offBlack32 : white}, 0 0 0 3px ${light ? fadedColor : offBlack32}`
+        }
       }
     };
   } else if (kind === "secondary") {
@@ -241,6 +244,8 @@ 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,
@@ -249,10 +254,21 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
       disabled: {
         color: light ? white50 : offBlack32,
         borderColor: light ? fadedColor : offBlack32,
-        cursor: "default"
+        cursor: "default",
+        ":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",
@@ -298,7 +314,7 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
   return styles[buttonType];
 };
 
-const _excluded$1 = ["href", "type", "children", "skipClientNav", "spinner", "disabled", "onClick", "beforeNav", "safeWithNav", "tabIndex", "target", "rel"],
+const _excluded = ["href", "type", "children", "skipClientNav", "spinner", "disabled", "onClick", "beforeNav", "safeWithNav", "tabIndex", "target", "rel"],
       _excluded2 = ["tabIndex"];
 
 /**
@@ -309,16 +325,19 @@ const _excluded$1 = ["href", "type", "children", "skipClientNav", "spinner", "di
  * `ButtonCore` is a stateless component which displays the different states
  * the `Button` can take.
  *
- * Example usage:
- * ```
+ * ### Usage
+ *
+ * ```jsx
+ * import Button from "@khanacademy/wonder-blocks-button";
+ *
  * <Button
  *     onClick={(e) => console.log("Hello, world!")}
  * >
- *     Label
+ *     Hello, world!
  * </Button>
  * ```
  */
-class Button extends Component {
+class Button extends React.Component {
   renderClickableBehavior(router) {
     const _this$props = this.props,
           {
@@ -335,7 +354,7 @@ class Button extends Component {
       target,
       rel
     } = _this$props,
-          sharedButtonCoreProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
+          sharedButtonCoreProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
     const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
 
@@ -345,7 +364,7 @@ class Button extends Component {
       } = _ref,
           restChildProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
 
-      return /*#__PURE__*/createElement(ButtonCore, _extends({}, sharedButtonCoreProps, state, restChildProps, {
+      return /*#__PURE__*/React.createElement(ButtonCore, _extends({}, sharedButtonCoreProps, state, restChildProps, {
         disabled: disabled,
         spinner: spinner || state.waiting,
         skipClientNav: skipClientNav,
@@ -360,7 +379,7 @@ class Button extends Component {
     };
 
     if (beforeNav) {
-      return /*#__PURE__*/createElement(ClickableBehavior, {
+      return /*#__PURE__*/React.createElement(ClickableBehavior, {
         disabled: spinner || disabled,
         href: href,
         role: "button",
@@ -371,7 +390,7 @@ class Button extends Component {
         rel: rel
       }, renderProp);
     } else {
-      return /*#__PURE__*/createElement(ClickableBehavior, {
+      return /*#__PURE__*/React.createElement(ClickableBehavior, {
         disabled: spinner || disabled,
         href: href,
         role: "button",
@@ -385,7 +404,7 @@ class Button extends Component {
   }
 
   render() {
-    return /*#__PURE__*/createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+    return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
   }
 
 }
@@ -398,4 +417,4 @@ Button.defaultProps = {
   spinner: false
 };
 
-export default Button;
+export { Button as default };

package/dist/index.js

@@ -161,12 +161,15 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  * `ButtonCore` is a stateless component which displays the different states
  * the `Button` can take.
  *
- * Example usage:
- * ```
+ * ### Usage
+ *
+ * ```jsx
+ * import Button from "@khanacademy/wonder-blocks-button";
+ *
  * <Button
  *     onClick={(e) => console.log("Hello, world!")}
  * >
- *     Label
+ *     Hello, world!
  * </Button>
  * ```
  */
@@ -358,7 +361,7 @@ class ButtonCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledButton, _extends({
         type: type || "button"
       }, commonProps, {
-        disabled: disabled
+        "aria-disabled": disabled
       }), contents);
     }
   }
@@ -485,7 +488,10 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
       disabled: {
         background: light ? fadedColor : offBlack32,
         color: light ? color : white64,
-        cursor: "default"
+        cursor: "default",
+        ":focus": {
+          boxShadow: `0 0 0 1px ${light ? offBlack32 : white}, 0 0 0 3px ${light ? fadedColor : offBlack32}`
+        }
       }
     };
   } else if (kind === "secondary") {
@@ -513,6 +519,8 @@ 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,
@@ -521,10 +529,21 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
       disabled: {
         color: light ? white50 : offBlack32,
         borderColor: light ? fadedColor : offBlack32,
-        cursor: "default"
+        cursor: "default",
+        ":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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-button",
-  "version": "2.10.0",
+  "version": "2.11.1",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -15,14 +15,14 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@khanacademy/wonder-blocks-clickable": "^2.2.0",
-    "@khanacademy/wonder-blocks-color": "^1.1.19",
-    "@khanacademy/wonder-blocks-core": "^3.2.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.23",
-    "@khanacademy/wonder-blocks-progress-spinner": "^1.1.27",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.4",
-    "@khanacademy/wonder-blocks-typography": "^1.1.27"
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.2",
+    "@khanacademy/wonder-blocks-color": "^1.1.20",
+    "@khanacademy/wonder-blocks-core": "^4.0.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.24",
+    "@khanacademy/wonder-blocks-progress-spinner": "^1.1.28",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
+    "@khanacademy/wonder-blocks-typography": "^1.1.28"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -31,7 +31,6 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.1.2"
-  },
-  "gitHead": "b6193f70c73e70fbaf76bc688dc69a47fb1d0ef3"
+    "wb-dev-build-settings": "^0.2.0"
+  }
 }