@khanacademy/wonder-blocks-button 3.0.7 → 3.0.9

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @khanacademy/wonder-blocks-button
 
+## 3.0.9
+
+### Patch Changes
+
+-   Updated dependencies [4c682709]
+    -   @khanacademy/wonder-blocks-clickable@2.4.1
+
+## 3.0.8
+
+### Patch Changes
+
+-   8e3d9439: Fix tertiary button styles (pressed and disabled+focused)
+
 ## 3.0.7
 
 ### Patch Changes

package/dist/es/index.js

@@ -274,14 +274,26 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
           height: 2,
           width: `calc(100% - ${iconWidth}px)`,
           right: 0,
-          bottom: "calc(50% - 11px)",
+          bottom: -1,
           background: light ? fadedColor : activeColor,
           borderRadius: 2
         }
       },
       disabled: {
         color: light ? fadedColor : offBlack32,
-        cursor: "default"
+        cursor: "default",
+        ":focus": {
+          ":after": {
+            content: "''",
+            position: "absolute",
+            height: 2,
+            width: `calc(100% - ${iconWidth}px)`,
+            right: 0,
+            bottom: `calc(50% - 11px)`,
+            background: light ? white : offBlack32,
+            borderRadius: 2
+          }
+        }
       }
     };
   } else {

package/dist/index.js

@@ -105,19 +105,16 @@ function _extends() {
   module.exports = _extends = Object.assign ? Object.assign.bind() : 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;
   }, module.exports.__esModule = true, module.exports["default"] = module.exports;
   return _extends.apply(this, arguments);
 }
-
 module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
 
 /***/ }),
@@ -568,7 +565,6 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
       }
     };
   } else if (kind === "tertiary") {
-    // TODO(FEI-4229): Make tertiary buttons focusable
     newStyles = {
       default: {
         background: "none",
@@ -596,14 +592,33 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
           height: 2,
           width: `calc(100% - ${iconWidth}px)`,
           right: 0,
-          bottom: "calc(50% - 11px)",
+          bottom: -1,
           background: light ? fadedColor : activeColor,
           borderRadius: 2
         }
       },
       disabled: {
         color: light ? fadedColor : offBlack32,
-        cursor: "default"
+        cursor: "default",
+        ":focus": {
+          ":after": {
+            content: "''",
+            position: "absolute",
+            height: 2,
+            width: `calc(100% - ${iconWidth}px)`,
+            right: 0,
+
+            /**
+             * For tertiary buttons, underline is applied to the
+             * internal `span` element, So we need to calculate the
+             * offset to center the line in the button (right after
+             * the span).
+             */
+            bottom: `calc(50% - 11px)`,
+            background: light ? white : offBlack32,
+            borderRadius: 2
+          }
+        }
       }
     };
   } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-button",
-  "version": "3.0.7",
+  "version": "3.0.9",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,7 +16,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^2.4.0",
+    "@khanacademy/wonder-blocks-clickable": "^2.4.1",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
     "@khanacademy/wonder-blocks-core": "^4.5.0",
     "@khanacademy/wonder-blocks-icon": "^1.2.32",