@storybook/design-system - npm Package Compare versions

Comparing version 7.14.1-canary.295c1bf.0 to 7.15.0

dist/components/ButtonAction.d.ts

@@ -8,3 +8,4 @@ import { FC } from 'react';
     isLoading?: boolean;
-    loadingText?: string;
+    loadingText?: string | null;
+    tooltip?: string;
 }
@@ -11,0 +12,0 @@ export declare const ButtonAction: FC<ButtonActionProps>;

dist/components/ButtonAction.js

@@ -24,3 +24,10 @@ "use strict";
 
-var _excluded = ["children", "icon", "isActive", "isLoading", "loadingText"];
+var _Spinner = require("./Spinner");
+
+var _TooltipNote = require("./tooltip/TooltipNote");
+
+var _WithTooltip = _interopRequireDefault(require("./tooltip/WithTooltip"));
+
+var _excluded = ["children", "icon", "isActive", "isLoading", "loadingText", "tooltip"],
+    _excluded2 = ["children", "icon", "isActive", "isLoading", "loadingText", "tooltip"];
 var StyledButton = (0, _theming.styled)("button", process.env.NODE_ENV === "production" ? {
@@ -31,4 +38,4 @@ target: "ezw767d0"
   label: "StyledButton"
-})("border:0;border-radius:5px;cursor:pointer;display:flex;gap:6px;align-items:center;overflow:hidden;padding:7px;position:relative;text-align:center;text-decoration:none;transition:all 150ms ease-out;transform:translate3d(0, 0, 0);will-change:transform;vertical-align:top;white-space:nowrap;user-select:none;opacity:1;margin:0;background-color:transparent;font-size:", _styles.typography.size.s2, "px;font-weight:", _styles.typography.weight.regular, ";color:", _styles.color.mediumdark, ";", function (props) {
-  return props.isActive && "\n      background-color: ".concat((0, _polished.transparentize)(0.7, _styles.color.secondary), ";\n      color: ").concat(_styles.color.secondary, ";\n    ");
+})("border:0;border-radius:5px;cursor:pointer;display:flex;gap:6px;align-items:center;overflow:hidden;padding:7px;position:relative;text-align:center;text-decoration:none;transition:all 150ms ease-out;vertical-align:top;white-space:nowrap;user-select:none;opacity:1;margin:0;background-color:transparent;font-size:", _styles.typography.size.s2, "px;line-height:14px;font-weight:", _styles.typography.weight.regular, ";color:", _styles.color.mediumdark, ";", function (props) {
+  return (props.isActive || props.isLoading) && "\n      background-color: ".concat((0, _polished.transparentize)(0.7, _styles.color.secondary), ";\n      color: ").concat(_styles.color.secondary, ";\n    ");
 }, " &:hover{color:", _styles.color.secondary, ";background-color:", (0, _polished.transparentize)(0.54, _styles.color.secondary), ";}");
@@ -44,12 +51,51 @@
       _ref$loadingText = _ref.loadingText,
-      loadingText = _ref$loadingText === void 0 ? 'Loading' : _ref$loadingText,
+      loadingText = _ref$loadingText === void 0 ? null : _ref$loadingText,
+      tooltip = _ref.tooltip,
       rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(StyledButton, (0, _extends2["default"])({
-    isActive: isActive
-  }, rest), icon && /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
-    icon: icon
-  }), children && !isLoading && children, isLoading && loadingText);
+  if (tooltip) return /*#__PURE__*/_react["default"].createElement(_WithTooltip["default"], {
+    tooltip: /*#__PURE__*/_react["default"].createElement(_TooltipNote.TooltipNote, {
+      note: tooltip
+    }),
+    hasChrome: false
+  }, /*#__PURE__*/_react["default"].createElement(InsideButtonAction, (0, _extends2["default"])({
+    icon: icon,
+    isActive: isActive,
+    isLoading: isLoading,
+    loadingText: loadingText
+  }, rest), children));
+  return /*#__PURE__*/_react["default"].createElement(InsideButtonAction, (0, _extends2["default"])({
+    icon: icon,
+    isActive: isActive,
+    isLoading: isLoading,
+    loadingText: loadingText
+  }, rest), children);
 };
 
 exports.ButtonAction = ButtonAction;
-ButtonAction.displayName = 'ButtonAction';
+
+var InsideButtonAction = function InsideButtonAction(_ref2) {
+  var children = _ref2.children,
+      icon = _ref2.icon,
+      _ref2$isActive = _ref2.isActive,
+      isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
+      _ref2$isLoading = _ref2.isLoading,
+      isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
+      _ref2$loadingText = _ref2.loadingText,
+      loadingText = _ref2$loadingText === void 0 ? null : _ref2$loadingText,
+      tooltip = _ref2.tooltip,
+      rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+  return /*#__PURE__*/_react["default"].createElement(StyledButton, (0, _extends2["default"])({
+    isActive: isActive,
+    isLoading: isLoading
+  }, rest), icon && !isLoading && /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    icon: icon
+  }), isLoading && /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: 'relative',
+      width: 14,
+      height: 14
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Spinner.Spinner, {
+    inForm: true
+  })), children && !isLoading && children, isLoading && loadingText);
+};

package.json

 {
   "name": "@storybook/design-system",
-  "version": "7.14.1-canary.295c1bf.0",
+  "version": "7.15.0",
   "description": "Storybook design system",
@@ -5,0 +5,0 @@ "repository": {

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

856403

increased by0.21%

Lines of code

13200

increased by0.33%

Number of low quality alerts

1

decreased by-50%

No dependency changes