@storybook/design-system - npm Package Compare versions

Comparing version 7.15.6 to 7.15.7

dist/components/ButtonAction.d.ts

@@ -1,22 +0,10 @@
-import React, { ComponentProps, ReactNode } from 'react';
 import { IconType } from './Icon';
 interface ButtonActionProps {
     icon: IconType;
-    children?: ReactNode;
+    children?: string;
     isActive?: boolean;
-    isLoading?: boolean;
-    loadingText?: string | null;
     tooltip?: string;
 }
-interface ButtonStylingProps {
-    isActive?: boolean;
-    isLoading?: boolean;
-}
-declare const StyledButton: import("@storybook/theming").StyledComponent<{
-    theme?: import("@storybook/theming").Theme;
-    as?: React.ElementType<any>;
-} & ButtonStylingProps, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const ButtonAction: ({ children, icon, isActive, isLoading, loadingText, tooltip, ...rest }: ButtonActionProps & ComponentProps<typeof InsideButtonAction>) => JSX.Element;
-declare const InsideButtonAction: ({ children, icon, isActive, isLoading, loadingText, tooltip, ...rest }: ButtonActionProps & ComponentProps<typeof StyledButton>) => JSX.Element;
+export declare const ButtonAction: ({ children, icon, isActive, tooltip, ...rest }: ButtonActionProps) => JSX.Element;
 export {};
 //# sourceMappingURL=ButtonAction.d.ts.map

dist/components/ButtonAction.js

@@ -24,4 +24,2 @@ "use strict";
 
-var _Spinner = require("./Spinner");
-
 var _TooltipNote = require("./tooltip/TooltipNote");
@@ -31,4 +29,3 @@
 
-var _excluded = ["children", "icon", "isActive", "isLoading", "loadingText", "tooltip"],
-    _excluded2 = ["children", "icon", "isActive", "isLoading", "loadingText", "tooltip"];
+var _excluded = ["children", "icon", "isActive", "tooltip"];
 var StyledButton = (0, _theming.styled)("button", process.env.NODE_ENV === "production" ? {
@@ -40,4 +37,4 @@ target: "ezw767d0"
 })("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), ";}");
+  return props.isActive && "\n      background-color: ".concat((0, _polished.transparentize)(0.93, _styles.color.secondary), ";\n      color: ").concat(_styles.color.secondary, ";\n    ");
+}, " &:hover{color:", _styles.color.secondary, ";background-color:", (0, _polished.transparentize)(0.86, _styles.color.secondary), ";}");
 
@@ -49,9 +46,5 @@ var ButtonAction = function ButtonAction(_ref) {
       isActive = _ref$isActive === void 0 ? false : _ref$isActive,
-      _ref$isLoading = _ref.isLoading,
-      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-      _ref$loadingText = _ref.loadingText,
-      loadingText = _ref$loadingText === void 0 ? null : _ref$loadingText,
       tooltip = _ref.tooltip,
       rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  if (tooltip) return /*#__PURE__*/_react["default"].createElement(_WithTooltip["default"], {
+  if (tooltip) return /*#__PURE__*/_react["default"].createElement(_WithTooltip["default"], (0, _extends2["default"])({
     tooltip: /*#__PURE__*/_react["default"].createElement(_TooltipNote.TooltipNote, {
@@ -61,44 +54,16 @@ note: tooltip
     hasChrome: false,
-    tagName: "span"
-  }, /*#__PURE__*/_react["default"].createElement(InsideButtonAction, (0, _extends2["default"])({
-    icon: icon,
+    delayShow: 600
+  }, rest), /*#__PURE__*/_react["default"].createElement(StyledButton, {
     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);
+    as: "div"
+  }, icon && /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    icon: icon
+  }), children));
+  return /*#__PURE__*/_react["default"].createElement(StyledButton, (0, _extends2["default"])({
+    isActive: isActive
+  }, rest), icon && /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    icon: icon
+  }), children);
 };
 
-exports.ButtonAction = 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);
-};
+exports.ButtonAction = ButtonAction;

dist/components/tooltip/WithTooltip.d.ts

@@ -15,2 +15,3 @@ import React, { ReactNode, ComponentProps } from 'react';
     delayHide?: number;
+    delayShow?: number;
     onVisibilityChange?: Function;
@@ -20,4 +21,4 @@ portalContainer?: ComponentProps<typeof TooltipTrigger>['portalContainer'];
 }
-declare const WithTooltip: ({ children, closeOnClick, delayHide, hasChrome, modifiers, onVisibilityChange, placement, portalContainer, startOpen, tagName, tooltip, tooltipZIndex, trigger, ...props }: WithTooltipProps & ComponentProps<typeof AsComponent>) => JSX.Element;
+declare const WithTooltip: ({ children, closeOnClick, delayHide, delayShow, hasChrome, modifiers, onVisibilityChange, placement, portalContainer, startOpen, tagName, tooltip, tooltipZIndex, trigger, ...props }: WithTooltipProps & ComponentProps<typeof AsComponent>) => JSX.Element;
 export default WithTooltip;
 //# sourceMappingURL=WithTooltip.d.ts.map

dist/components/tooltip/WithTooltip.js

@@ -31,3 +31,3 @@ "use strict";
 var _excluded = ["tabIndex", "tagName", "onClick", "onMouseEnter", "onMouseLeave"],
-    _excluded2 = ["children", "closeOnClick", "delayHide", "hasChrome", "modifiers", "onVisibilityChange", "placement", "portalContainer", "startOpen", "tagName", "tooltip", "tooltipZIndex", "trigger"];
+    _excluded2 = ["children", "closeOnClick", "delayHide", "delayShow", "hasChrome", "modifiers", "onVisibilityChange", "placement", "portalContainer", "startOpen", "tagName", "tooltip", "tooltipZIndex", "trigger"];
 
@@ -122,2 +122,4 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
       delayHide = _ref2$delayHide === void 0 ? 100 : _ref2$delayHide,
+      _ref2$delayShow = _ref2.delayShow,
+      delayShow = _ref2$delayShow === void 0 ? 0 : _ref2$delayShow,
       _ref2$hasChrome = _ref2.hasChrome,
@@ -179,2 +181,3 @@ hasChrome = _ref2$hasChrome === void 0 ? true : _ref2$hasChrome,
     delayHide: delayHide,
+    delayShow: delayShow,
     placement: placement,
@@ -181,0 +184,0 @@ trigger: trigger,

package.json

 {
   "name": "@storybook/design-system",
-  "version": "7.15.6",
+  "version": "7.15.7",
   "description": "Storybook design system",
@@ -5,0 +5,0 @@ "repository": {

No alert changes

Worsened metrics

Total package byte prevSize

861747

-0.27%

Lines of code

13209

-0.31%

No dependency changes