@khanacademy/wonder-blocks-button 2.11.5 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @khanacademy/wonder-blocks-button
 
+## 3.0.0
+
+### Major Changes
+
+-   85c31780: Changed size prop value: From `xlarge` to `large`
+
+## 2.11.7
+
+### Patch Changes
+
+-   Updated dependencies [83486dba]
+    -   @khanacademy/wonder-blocks-icon@1.2.29
+    -   @khanacademy/wonder-blocks-progress-spinner@1.1.33
+
+## 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

package/dist/es/index.js

@@ -46,7 +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, 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 === "large" && sharedStyles.large];
 
     const commonProps = _extends({
       "data-test-id": testId,
@@ -56,10 +56,11 @@ class ButtonCore extends React.Component {
     }, restProps);
 
     const Label = size === "small" ? LabelSmall : LabelLarge;
+    const iconSize = size === "small" ? "small" : "medium";
     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)]
+      style: [sharedStyles.text, size === "large" && sharedStyles.largeText, 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,
+      size: iconSize,
       color: "currentColor",
       icon: icon,
       style: sharedStyles.icon
@@ -69,9 +70,10 @@ class ButtonCore extends React.Component {
       size: {
         medium: "small",
         small: "xsmall",
-        xlarge: "medium"
+        large: "medium"
       }[size],
-      light: kind === "primary"
+      light: kind === "primary",
+      testId: `${testId || "button"}-spinner`
     }));
 
     if (href && !disabled) {
@@ -126,8 +128,9 @@ const sharedStyles = StyleSheet.create({
   small: {
     height: 32
   },
-  xlarge: {
-    height: 60
+  large: {
+    borderRadius: Spacing.xxSmall_6,
+    height: 56
   },
   text: {
     alignItems: "center",
@@ -138,7 +141,7 @@ const sharedStyles = StyleSheet.create({
     display: "inline-block",
     pointerEvents: "none"
   },
-  xlargeText: {
+  largeText: {
     fontSize: 18,
     lineHeight: "20px"
   },
@@ -177,7 +180,7 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
   } = Color;
   const fadedColor = mix(fade(color, 0.32), white);
   const activeColor = mix(offBlack32, color);
-  const padding = size === "xlarge" ? Spacing.xLarge_32 : Spacing.medium_16;
+  const padding = size === "large" ? Spacing.xLarge_32 : Spacing.medium_16;
   let newStyles = {};
 
   if (kind === "primary") {

package/dist/index.js

@@ -101,25 +101,25 @@ module.exports = require("@khanacademy/wonder-blocks-color");
 /* 2 */
 /***/ (function(module, exports) {
 
-module.exports = require("react-router");
+module.exports = require("@khanacademy/wonder-blocks-spacing");
 
 /***/ }),
 /* 3 */
 /***/ (function(module, exports) {
 
-module.exports = require("@khanacademy/wonder-blocks-clickable");
+module.exports = require("react-router");
 
 /***/ }),
 /* 4 */
 /***/ (function(module, exports) {
 
-module.exports = require("@khanacademy/wonder-blocks-core");
+module.exports = require("@khanacademy/wonder-blocks-clickable");
 
 /***/ }),
 /* 5 */
 /***/ (function(module, exports) {
 
-module.exports = require("@khanacademy/wonder-blocks-spacing");
+module.exports = require("@khanacademy/wonder-blocks-core");
 
 /***/ }),
 /* 6 */
@@ -141,9 +141,9 @@ 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 react_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
 /* 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__ = __webpack_require__(4);
 /* 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);
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -261,21 +261,21 @@ 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 react_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
 /* 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);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(5);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__);
 /* harmony import */ var _khanacademy_wonder_blocks_progress_spinner__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(11);
 /* harmony import */ var _khanacademy_wonder_blocks_progress_spinner__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_progress_spinner__WEBPACK_IMPORTED_MODULE_7__);
 /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(12);
 /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_8__);
-/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(5);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_9__);
-/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(4);
 /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_10__);
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -323,7 +323,7 @@ class ButtonCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 
     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];
+    kind !== "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
     const commonProps = {
       "data-test-id": testId,
       id: id,
@@ -331,12 +331,15 @@ class ButtonCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       style: [defaultStyle, style],
       ...restProps
     };
-    const Label = size === "small" ? _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelSmall"] : _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelLarge"];
+    const Label = size === "small" ? _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelSmall"] : _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelLarge"]; // We have to use `medium` for both md and lg buttons so we can fit the
+    // icons in large buttons.
+
+    const iconSize = size === "small" ? "small" : "medium";
     const label = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["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
+      style: [sharedStyles.text, size === "large" && sharedStyles.largeText, 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__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_8___default.a, {
-      size: size,
+      size: iconSize,
       color: "currentColor",
       icon: icon,
       style: sharedStyles.icon
@@ -346,9 +349,10 @@ class ButtonCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       size: {
         medium: "small",
         small: "xsmall",
-        xlarge: "medium"
+        large: "medium"
       }[size],
-      light: kind === "primary"
+      light: kind === "primary",
+      testId: `${testId || "button"}-spinner`
     }));
 
     if (href && !disabled) {
@@ -407,8 +411,9 @@ const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create
   small: {
     height: 32
   },
-  xlarge: {
-    height: 60
+  large: {
+    borderRadius: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_9___default.a.xxSmall_6,
+    height: 56
   },
   text: {
     alignItems: "center",
@@ -421,7 +426,7 @@ const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create
     pointerEvents: "none" // fix Safari bug where the browser was eating mouse events
 
   },
-  xlargeText: {
+  largeText: {
     fontSize: 18,
     lineHeight: "20px"
   },
@@ -462,7 +467,7 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
   } = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a;
   const fadedColor = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["fade"])(color, 0.32), white);
   const activeColor = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["mix"])(offBlack32, color);
-  const padding = size === "xlarge" ? _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_9___default.a.xLarge_32 : _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_9___default.a.medium_16;
+  const padding = size === "large" ? _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_9___default.a.xLarge_32 : _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_9___default.a.medium_16;
   let newStyles = {};
 
   if (kind === "primary") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-button",
-  "version": "2.11.5",
+  "version": "3.0.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,13 +16,13 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-clickable": "^2.2.6",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.7",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
-    "@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-core": "^4.3.2",
+    "@khanacademy/wonder-blocks-icon": "^1.2.29",
+    "@khanacademy/wonder-blocks-progress-spinner": "^1.1.33",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.31"
+    "@khanacademy/wonder-blocks-typography": "^1.1.32"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",