@khanacademy/wonder-blocks-button 2.10.2 → 2.11.0

package/CHANGELOG.md

@@ -0,0 +1,6 @@
+# @khanacademy/wonder-blocks-button
+
+## 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"];
 
 /**
@@ -321,7 +337,7 @@ const _excluded$1 = ["href", "type", "children", "skipClientNav", "spinner", "di
  * </Button>
  * ```
  */
-class Button extends Component {
+class Button extends React.Component {
   renderClickableBehavior(router) {
     const _this$props = this.props,
           {
@@ -338,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);
 
@@ -348,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,
@@ -363,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",
@@ -374,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",
@@ -388,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));
   }
 
 }
@@ -401,4 +417,4 @@ Button.defaultProps = {
   spinner: false
 };
 
-export default Button;
+export { Button as default };

package/dist/index.js

@@ -361,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);
     }
   }
@@ -488,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") {
@@ -516,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,
@@ -524,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.2",
+  "version": "2.11.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -32,6 +32,5 @@
   },
   "devDependencies": {
     "wb-dev-build-settings": "^0.2.0"
-  },
-  "gitHead": "9ebea88533e702011165072f090a377e02fa3f0f"
+  }
 }