Merge pull request #16601 from storybookjs/iconbutton-interactions-it…

…eration Interactions: Use Icon button and add disabled state to IconButton
storybookjs · Nov 11, 2021 · 74cc476 · 74cc476
2 parents 3757dd8 + 500a5b7
commit 74cc476
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 28 deletions.
diff --git a/addons/interactions/src/components/Subnav/Subnav.tsx b/addons/interactions/src/components/Subnav/Subnav.tsx
@@ -1,5 +1,14 @@
 import React from 'react';
-import { Button, Icons, Separator, P, TooltipNote, WithTooltip, Bar } from '@storybook/components';
+import {
+  Button,
+  IconButton,
+  Icons,
+  Separator,
+  P,
+  TooltipNote,
+  WithTooltip,
+  Bar,
+} from '@storybook/components';
 import { Call, CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 
@@ -46,14 +55,9 @@ const Note = styled(TooltipNote)(({ theme }) => ({
   fontFamily: theme.typography.fonts.base,
 }));
 
-export const StyledIconButton = styled(StyledButton)(({ theme }) => ({
+export const StyledIconButton = styled(IconButton)(({ theme }) => ({
   color: theme.color.mediumdark,
   margin: '0 3px',
-  '&:not(:disabled)': {
-    '&:hover,&:focus-visible': {
-      background: theme.background.hoverable,
-    },
-  },
 }));
 
 const StyledSeparator = styled(Separator)({
@@ -133,7 +137,7 @@ export const Subnav: React.FC<SubnavProps> = ({
             trigger={hasPrevious ? 'hover' : 'none'}
             tooltip={<Note note="Go to start" />}
           >
-            <RewindButton containsIcon onClick={onStart} disabled={isDisabled || !hasPrevious}>
+            <RewindButton onClick={onStart} disabled={isDisabled || !hasPrevious}>
               <Icons icon="rewind" />
             </RewindButton>
           </WithTooltip>
@@ -144,11 +148,7 @@ export const Subnav: React.FC<SubnavProps> = ({
             trigger={hasPrevious ? 'hover' : 'none'}
             tooltip={<Note note="Go back" />}
           >
-            <StyledIconButton
-              containsIcon
-              onClick={onPrevious}
-              disabled={isDisabled || !hasPrevious}
-            >
+            <StyledIconButton onClick={onPrevious} disabled={isDisabled || !hasPrevious}>
               <Icons icon="playback" />
             </StyledIconButton>
           </WithTooltip>
@@ -159,7 +159,7 @@ export const Subnav: React.FC<SubnavProps> = ({
             trigger={hasNext ? 'hover' : 'none'}
             tooltip={<Note note="Go forward" />}
           >
-            <StyledIconButton containsIcon onClick={onNext} disabled={isDisabled || !hasNext}>
+            <StyledIconButton onClick={onNext} disabled={isDisabled || !hasNext}>
               <Icons icon="playnext" />
             </StyledIconButton>
           </WithTooltip>
@@ -170,7 +170,7 @@ export const Subnav: React.FC<SubnavProps> = ({
             hasChrome={false}
             tooltip={<Note note="Go to end" />}
           >
-            <StyledIconButton containsIcon onClick={onEnd} disabled={isDisabled || !hasNext}>
+            <StyledIconButton onClick={onEnd} disabled={isDisabled || !hasNext}>
               <Icons icon="fastforward" />
             </StyledIconButton>
           </WithTooltip>

diff --git a/lib/components/src/bar/button.stories.tsx b/lib/components/src/bar/button.stories.tsx
@@ -21,6 +21,12 @@ export const Active = () => (
   </IconButton>
 );
 
+export const Disabled = () => (
+  <IconButton disabled>
+    <Icons icon="beaker" />
+  </IconButton>
+);
+
 export const WithText = () => (
   <IconButton>
     <Icons icon="circlehollow" />
@@ -34,3 +40,10 @@ export const WithTextActive = () => (
     &nbsp;Howdy!
   </IconButton>
 );
+
+export const WithTextDisabled = () => (
+  <IconButton disabled>
+    <Icons icon="circlehollow" />
+    &nbsp;Howdy!
+  </IconButton>
+);
diff --git a/lib/components/src/bar/button.tsx b/lib/components/src/bar/button.tsx
@@ -1,6 +1,6 @@
 import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
 import { styled, isPropValid } from '@storybook/theming';
-import { darken, transparentize } from 'polished';
+import { transparentize } from 'polished';
 import { auto } from '@popperjs/core';
 
 interface ButtonProps
@@ -74,10 +74,11 @@ TabButton.displayName = 'TabButton';
 
 export interface IconButtonProps {
   active?: boolean;
+  disabled?: boolean;
 }
 
 export const IconButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid })<IconButtonProps>(
-  ({ theme }) => ({
+  () => ({
     alignItems: 'center',
     background: 'transparent',
     border: 'none',
@@ -92,16 +93,6 @@ export const IconButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid
     marginTop: 6,
     padding: '8px 7px',
 
-    '&:hover, &:focus-visible': {
-      background: transparentize(0.88, theme.color.secondary),
-      color: theme.color.secondary,
-    },
-    '&:focus-visible': {
-      outline: auto, // Ensures links have the same focus style
-    },
-    '&:focus:not(:focus-visible)': {
-      outline: 'none',
-    },
     '& > svg': {
       width: 14,
     },
@@ -112,6 +103,24 @@ export const IconButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid
           backgroundColor: theme.background.hoverable,
           color: theme.color.secondary,
         }
-      : {}
+      : {},
+  ({ disabled, theme }) =>
+    disabled
+      ? {
+          opacity: 0.5,
+          cursor: 'not-allowed',
+        }
+      : {
+          '&:hover, &:focus-visible': {
+            background: transparentize(0.88, theme.color.secondary),
+            color: theme.color.secondary,
+          },
+          '&:focus-visible': {
+            outline: auto, // Ensures links have the same focus style
+          },
+          '&:focus:not(:focus-visible)': {
+            outline: 'none',
+          },
+        }
 );
 IconButton.displayName = 'IconButton';