@khanacademy/wonder-blocks-button - npm Package Compare versions

Comparing version 2.4.5 to 2.4.6

components/button-core.js

@@ -101,2 +101,3 @@ // @flow
                     sharedStyles.text,
+                    icon && sharedStyles.textWithIcon,
                     spinner && sharedStyles.hiddenText,
@@ -198,3 +199,2 @@ kind === "tertiary" && sharedStyles.textWithFocus,
     text: {
-        display: "flex",
         alignItems: "center",
@@ -205,4 +205,8 @@ fontWeight: "bold",
         textOverflow: "ellipsis",
+        display: "inline-block", // allows the button text to truncate
         pointerEvents: "none", // fix Safari bug where the browser was eating mouse events
     },
+    textWithIcon: {
+        display: "flex", // allows the text and icon to sit nicely together
+    },
     textWithFocus: {
@@ -209,0 +213,0 @@ position: "relative", // allows the tertiary button border to use the label width

components/button.md

@@ -491,4 +491,3 @@ #### Example: kind
 of 144px. The one on the right is wider but it accommodates the full string
-instead of wrapping it. Note that if the parent container of the button doesn't
-have enough room to accommodate the width of the button, the text will truncate.
+instead of wrapping it.
 ```jsx
@@ -527,2 +526,39 @@ import Button from "@khanacademy/wonder-blocks-button";
 
+If the parent container of the button doesn't have enough room to accommodate
+the width of the button, the text will truncate. This should ideally never
+happen, but it's sometimes a necessary fallback.
+```jsx
+import Button from "@khanacademy/wonder-blocks-button";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {StyleSheet} from "aphrodite";
+
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: "row",
+        width: 300,
+    },
+    gap: {
+        height: 16,
+    },
+    button: {
+        marginRight: 10,
+        minWidth: 144,
+    },
+});
+
+<View style={styles.row}>
+    <Button
+        style={styles.button}
+        kind="secondary"
+    >
+        label
+    </Button>
+    <Button
+        style={styles.button}
+    >
+        label too long for the parent container
+    </Button>
+</View>
+```
+
 Only one button in a layout should be `primary`.
@@ -529,0 +565,0 @@ ```jsx

dist/es/index.js

@@ -86,3 +86,3 @@ import { createElement, Fragment, Component } from 'react';
     if (i % 2) {
-      ownKeys(source, true).forEach(function (key) {
+      ownKeys(Object(source), true).forEach(function (key) {
         _defineProperty(target, key, source[key]);
@@ -93,3 +93,3 @@ });
     } else {
-      ownKeys(source).forEach(function (key) {
+      ownKeys(Object(source)).forEach(function (key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
@@ -240,3 +240,3 @@ });
       var label = createElement(Label, {
-        style: [sharedStyles.text, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, // apply focus effect on the label instead
+        style: [sharedStyles.text, 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)]
@@ -317,3 +317,2 @@ }, icon && createElement(Icon, {
   text: {
-    display: "flex",
     alignItems: "center",
@@ -324,5 +323,11 @@ fontWeight: "bold",
     textOverflow: "ellipsis",
+    display: "inline-block",
+    // allows the button text to truncate
     pointerEvents: "none" // fix Safari bug where the browser was eating mouse events
 
   },
+  textWithIcon: {
+    display: "flex" // allows the text and icon to sit nicely together
+
+  },
   textWithFocus: {
@@ -329,0 +334,0 @@ position: "relative" // allows the tertiary button border to use the label width

dist/index.js

@@ -196,3 +196,3 @@ module.exports =
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -285,3 +285,3 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
       var label = external_react_["createElement"](Label, {
-        style: [sharedStyles.text, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, // apply focus effect on the label instead
+        style: [sharedStyles.text, 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)]
@@ -364,3 +364,2 @@ }, icon && external_react_["createElement"](wonder_blocks_icon_default.a, {
   text: {
-    display: "flex",
     alignItems: "center",
@@ -371,5 +370,11 @@ fontWeight: "bold",
     textOverflow: "ellipsis",
+    display: "inline-block",
+    // allows the button text to truncate
     pointerEvents: "none" // fix Safari bug where the browser was eating mouse events
 
   },
+  textWithIcon: {
+    display: "flex" // allows the text and icon to sit nicely together
+
+  },
   textWithFocus: {
@@ -376,0 +381,0 @@ position: "relative" // allows the tertiary button border to use the label width

generated-snapshot.test.js

@@ -460,8 +460,36 @@ // This file is auto-generated by gen-snapshot-tests.js
                 flexDirection: "row",
+                width: 300,
             },
+            gap: {
+                height: 16,
+            },
             button: {
                 marginRight: 10,
+                minWidth: 144,
             },
         });
         const example = (
+            <View style={styles.row}>
+                <Button style={styles.button} kind="secondary">
+                    label
+                </Button>
+                <Button style={styles.button}>
+                    label too long for the parent container
+                </Button>
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 14", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
+            button: {
+                marginRight: 10,
+            },
+        });
+        const example = (
             <View>
@@ -480,3 +508,3 @@ <View style={styles.row}>
 
-    it("example 14", () => {
+    it("example 15", () => {
         const styles = StyleSheet.create({
@@ -483,0 +511,0 @@ row: {

package.json

 {
   "name": "@khanacademy/wonder-blocks-button",
-  "version": "2.4.5",
+  "version": "2.4.6",
   "design": "v1",
@@ -34,3 +34,3 @@ "publishConfig": {
   },
-  "gitHead": "be0b1f6e2cd428289f5c3e54e6a2370de2019d27"
+  "gitHead": "13a111a5a0cebd1e669cc3c63b7f6a38c272ca9a"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

404080

increased by1.89%

Lines of code

2269

increased by1.75%

No dependency changes