Merge pull request #414 from storybookjs/button-action-updates

ButtonAction updates
storybookjs · Mar 24, 2023 · 2a367b5 · 2a367b5
2 parents 1c3d79f + 8fe1927
commit 2a367b5
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 67 deletions.
diff --git a/src/components/ButtonAction.stories.tsx b/src/components/ButtonAction.stories.tsx
@@ -11,58 +11,51 @@ const meta: Meta<typeof ButtonAction> = {
 export default meta;
 type Story = StoryObj<typeof ButtonAction>;
 
-export const Default: Story = {
+export const IconOnly: Story = {
   args: {
     children: '',
     icon: 'starhollow',
     isActive: false,
-    isLoading: false,
   },
 };
 
-export const WithLabel: Story = {
+export const IconOnlyActive: Story = {
   args: {
-    children: 'Hello World',
+    children: '',
     icon: 'starhollow',
-    isActive: false,
-    isLoading: false,
+    isActive: true,
   },
 };
 
-export const WithTooltip: Story = {
+export const WithLabel: Story = {
   args: {
     children: 'Hello World',
     icon: 'starhollow',
     isActive: false,
-    isLoading: false,
-    tooltip: "I'm a tooltip",
   },
 };
 
-export const Active: Story = {
+export const WithLabelActive: Story = {
   args: {
     children: 'Hello World',
     icon: 'starhollow',
     isActive: true,
-    isLoading: false,
   },
 };
 
-export const Loading: Story = {
+export const IconOnlyWithTooltip: Story = {
   args: {
-    children: 'Hello World',
     icon: 'starhollow',
     isActive: false,
-    isLoading: true,
+    tooltip: "I'm a tooltip",
   },
 };
 
-export const LoadingWithText: Story = {
+export const WithLabelWithTooltip: Story = {
   args: {
     children: 'Hello World',
     icon: 'starhollow',
     isActive: false,
-    isLoading: true,
-    loadingText: 'Loading',
+    tooltip: "I'm a tooltip",
   },
 };
diff --git a/src/components/ButtonAction.tsx b/src/components/ButtonAction.tsx
@@ -1,24 +1,20 @@
-import React, { ComponentProps, ReactNode } from 'react';
+import React from 'react';
 import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 import { typography, color } from './shared/styles';
 import { Icon, IconType } from './Icon';
-import { Spinner } from './Spinner';
 import { TooltipNote } from './tooltip/TooltipNote';
 import WithTooltip from './tooltip/WithTooltip';
 
 interface ButtonActionProps {
   icon: IconType;
-  children?: ReactNode;
+  children?: string;
   isActive?: boolean;
-  isLoading?: boolean;
-  loadingText?: string | null;
   tooltip?: string;
 }
 
 interface ButtonStylingProps {
   isActive?: boolean;
-  isLoading?: boolean;
 }
 
 const StyledButton = styled.button<ButtonStylingProps>`
@@ -46,71 +42,43 @@ const StyledButton = styled.button<ButtonStylingProps>`
   color: ${color.mediumdark};
 
   ${(props) =>
-    (props.isActive || props.isLoading) &&
+    props.isActive &&
     `
-      background-color: ${transparentize(0.7, color.secondary)};
+      background-color: ${transparentize(0.93, color.secondary)};
       color: ${color.secondary};
     `}
 
   &:hover {
     color: ${color.secondary};
-    background-color: ${transparentize(0.54, color.secondary)};
+    background-color: ${transparentize(0.86, color.secondary)};
   }
 `;
 
 export const ButtonAction = ({
   children,
   icon,
   isActive = false,
-  isLoading = false,
-  loadingText = null,
   tooltip,
   ...rest
-}: ButtonActionProps & ComponentProps<typeof InsideButtonAction>) => {
+}: ButtonActionProps) => {
   if (tooltip)
     return (
-      <WithTooltip tooltip={<TooltipNote note={tooltip} />} hasChrome={false} tagName="span">
-        <InsideButtonAction
-          icon={icon}
-          isActive={isActive}
-          isLoading={isLoading}
-          loadingText={loadingText}
-          {...rest}
-        >
+      <WithTooltip
+        tooltip={<TooltipNote note={tooltip} />}
+        hasChrome={false}
+        delayShow={600}
+        {...rest}
+      >
+        <StyledButton isActive={isActive} as="div">
+          {icon && <Icon icon={icon} />}
           {children}
-        </InsideButtonAction>
+        </StyledButton>
       </WithTooltip>
     );
   return (
-    <InsideButtonAction
-      icon={icon}
-      isActive={isActive}
-      isLoading={isLoading}
-      loadingText={loadingText}
-      {...rest}
-    >
+    <StyledButton isActive={isActive} {...rest}>
+      {icon && <Icon icon={icon} />}
       {children}
-    </InsideButtonAction>
+    </StyledButton>
   );
 };
-
-const InsideButtonAction = ({
-  children,
-  icon,
-  isActive = false,
-  isLoading = false,
-  loadingText = null,
-  tooltip,
-  ...rest
-}: ButtonActionProps & ComponentProps<typeof StyledButton>) => (
-  <StyledButton isActive={isActive} isLoading={isLoading} {...rest}>
-    {icon && !isLoading && <Icon icon={icon} />}
-    {isLoading && (
-      <div style={{ position: 'relative', width: 14, height: 14 }}>
-        <Spinner inForm />
-      </div>
-    )}
-    {children && !isLoading && children}
-    {isLoading && loadingText}
-  </StyledButton>
-);
diff --git a/src/components/tooltip/WithTooltip.tsx b/src/components/tooltip/WithTooltip.tsx
@@ -89,6 +89,7 @@ interface WithTooltipProps {
   children: ReactNode;
   startOpen?: boolean;
   delayHide?: number;
+  delayShow?: number;
   // eslint-disable-next-line @typescript-eslint/ban-types
   onVisibilityChange?: Function;
   portalContainer?: ComponentProps<typeof TooltipTrigger>['portalContainer'];
@@ -99,6 +100,7 @@ const WithTooltip = ({
   children,
   closeOnClick = false,
   delayHide = 100,
+  delayShow = 0,
   hasChrome = true,
   modifiers = {},
   onVisibilityChange = () => {},
@@ -139,6 +141,7 @@ const WithTooltip = ({
   return (
     <TooltipTrigger
       delayHide={delayHide}
+      delayShow={delayShow}
       placement={placement}
       trigger={trigger}
       tooltipShown={isTooltipShown}