@khanacademy/wonder-blocks-button 2.9.14 → 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,7 +1,7 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
-import { Component, createElement, Fragment } from 'react';
-import { any } from 'prop-types';
+import * as React from 'react';
+import { __RouterContext } from 'react-router';
 import { isClientSideUrl, getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
 import { StyleSheet } from 'aphrodite';
 import { Link } from 'react-router-dom';
@@ -12,12 +12,12 @@ 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 {
-  render() {
+class ButtonCore extends React.Component {
+  renderInner(router) {
     const _this$props = this.props,
           {
       children,
@@ -38,11 +38,8 @@ class ButtonCore extends Component {
       icon,
       id
     } = _this$props,
-          restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+          restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
 
-    const {
-      router
-    } = this.context;
     const buttonColor = color === "destructive" ? SemanticColor.controlDestructive : SemanticColor.controlDefault;
     const iconWidth = icon ? (size === "small" ? 16 : 24) + 8 : 0;
 
@@ -60,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",
@@ -80,24 +77,25 @@ 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__*/React.createElement(__RouterContext.Consumer, null, router => this.renderInner(router));
+  }
+
 }
-ButtonCore.contextTypes = {
-  router: any
-};
 const sharedStyles = StyleSheet.create({
   shared: {
     position: "relative",
@@ -215,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") {
@@ -243,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,
@@ -251,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",
@@ -300,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"];
 
 /**
@@ -311,17 +325,20 @@ 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 {
-  render() {
+class Button extends React.Component {
+  renderClickableBehavior(router) {
     const _this$props = this.props,
           {
       href = undefined,
@@ -337,9 +354,9 @@ class Button extends Component {
       target,
       rel
     } = _this$props,
-          sharedButtonCoreProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
+          sharedButtonCoreProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
-    const ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
+    const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
 
     const renderProp = (state, _ref) => {
       let {
@@ -347,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,
@@ -362,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",
@@ -373,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",
@@ -386,10 +403,11 @@ class Button extends Component {
     }
   }
 
+  render() {
+    return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
 }
-Button.contextTypes = {
-  router: any
-};
 Button.defaultProps = {
   color: "default",
   kind: "primary",
@@ -399,4 +417,4 @@ Button.defaultProps = {
   spinner: false
 };
 
-export default Button;
+export { Button as default };

package/dist/index.js

@@ -101,7 +101,7 @@ module.exports = require("@khanacademy/wonder-blocks-color");
 /* 2 */
 /***/ (function(module, exports) {
 
-module.exports = require("prop-types");
+module.exports = require("react-router");
 
 /***/ }),
 /* 3 */
@@ -141,8 +141,8 @@ module.exports = require("@khanacademy/wonder-blocks-typography");
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Button; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
 /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _button_core_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
@@ -161,17 +161,20 @@ 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>
  * ```
  */
 class Button extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  render() {
+  renderClickableBehavior(router) {
     const {
       href = undefined,
       type = undefined,
@@ -187,7 +190,7 @@ class Button extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       rel,
       ...sharedButtonCoreProps
     } = this.props;
-    const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__["getClickableBehavior"])(href, skipClientNav, this.context.router);
+    const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__["getClickableBehavior"])(href, skipClientNav, router);
 
     const renderProp = (state, {
       tabIndex: clickableTabIndex,
@@ -232,10 +235,11 @@ class Button extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     }
   }
 
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_1__["__RouterContext"].Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
 }
-Button.contextTypes = {
-  router: prop_types__WEBPACK_IMPORTED_MODULE_1__["any"]
-};
 Button.defaultProps = {
   color: "default",
   kind: "primary",
@@ -257,8 +261,8 @@ Button.defaultProps = {
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
 /* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7);
 /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(1);
@@ -290,7 +294,7 @@ const StyledAnchor = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MO
 const StyledButton = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__["addStyle"])("button");
 const StyledLink = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__["addStyle"])(react_router_dom__WEBPACK_IMPORTED_MODULE_2__["Link"]);
 class ButtonCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  render() {
+  renderInner(router) {
     const {
       children,
       skipClientNav,
@@ -312,9 +316,6 @@ class ButtonCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       waiting: _,
       ...restProps
     } = this.props;
-    const {
-      router
-    } = this.context;
     const buttonColor = color === "destructive" ? _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["SemanticColor"].controlDestructive : _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["SemanticColor"].controlDefault;
     const iconWidth = icon ? (size === "small" ? 16 : 24) + 8 : 0;
 
@@ -360,15 +361,16 @@ 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);
     }
   }
 
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_3__["__RouterContext"].Consumer, null, router => this.renderInner(router));
+  }
+
 }
-ButtonCore.contextTypes = {
-  router: prop_types__WEBPACK_IMPORTED_MODULE_3__["any"]
-};
 const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   shared: {
     position: "relative",
@@ -486,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") {
@@ -514,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,
@@ -522,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.9.14",
+  "version": "2.11.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -15,23 +15,22 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@khanacademy/wonder-blocks-clickable": "^2.1.3",
-    "@khanacademy/wonder-blocks-color": "^1.1.19",
-    "@khanacademy/wonder-blocks-core": "^3.1.5",
-    "@khanacademy/wonder-blocks-icon": "^1.2.22",
-    "@khanacademy/wonder-blocks-progress-spinner": "^1.1.26",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.4",
-    "@khanacademy/wonder-blocks-typography": "^1.1.26"
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.1",
+    "@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",
-    "prop-types": "^15.6.2",
-    "react": "^16.4.1",
-    "react-router-dom": "^4.2.2"
+    "react": "16.14.0",
+    "react-router": "5.2.1",
+    "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.1.2"
-  },
-  "gitHead": "9a9cc04bf2bbfb425f991a347b4f8b0d0d56e120"
+    "wb-dev-build-settings": "^0.2.0"
+  }
 }