Merge pull request #21666 from pratikkarad/iconbutton-21665

fix(menu): active state for iconbutton
storybookjs · Mar 22, 2023 · 2f8fac5 · 2f8fac5
2 parents 1630bcf + 3e3312f
commit 2f8fac5
Showing 1 changed file with 49 additions and 37 deletions.
diff --git a/code/ui/manager/src/components/sidebar/Menu.tsx b/code/ui/manager/src/components/sidebar/Menu.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps, FC } from 'react';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
@@ -20,43 +20,48 @@ const Icon = styled(Icons)(sharedStyles, ({ theme }) => ({
   color: theme.color.secondary,
 }));
 
-export const SidebarIconButton: FC<ComponentProps<typeof Button> & { highlighted: boolean }> =
-  styled(IconButton)<
-    ComponentProps<typeof Button> & {
-      highlighted: boolean;
-    }
-  >(({ highlighted, theme }) => ({
-    position: 'relative',
-    overflow: 'visible',
-    color: theme.textMutedColor,
-    marginTop: 0,
-    zIndex: 1,
+export const SidebarIconButton: FC<
+  ComponentProps<typeof Button> & { highlighted: boolean; active: boolean }
+> = styled(IconButton)<
+  ComponentProps<typeof Button> & {
+    highlighted: boolean;
+    active: boolean;
+  }
+>(({ highlighted, active, theme }) => ({
+  position: 'relative',
+  overflow: 'visible',
+  color: theme.textMutedColor,
+  marginTop: 0,
+  zIndex: 1,
 
-    ...(highlighted && {
-      '&:before, &:after': {
-        content: '""',
-        position: 'absolute',
-        top: 6,
-        right: 6,
-        width: 5,
-        height: 5,
-        zIndex: 2,
-        borderRadius: '50%',
-        background: theme.background.app,
-        border: `1px solid ${theme.background.app}`,
-        boxShadow: `0 0 0 2px ${theme.background.app}`,
-      },
-      '&:after': {
-        background: theme.color.positive,
-        border: `1px solid rgba(0, 0, 0, 0.1)`,
-        boxShadow: `0 0 0 2px ${theme.background.app}`,
-      },
+  ...(highlighted && {
+    '&:before, &:after': {
+      content: '""',
+      position: 'absolute',
+      top: 6,
+      right: 6,
+      width: 5,
+      height: 5,
+      zIndex: 2,
+      borderRadius: '50%',
+      background: theme.background.app,
+      border: `1px solid ${theme.background.app}`,
+      boxShadow: `0 0 0 2px ${theme.background.app}`,
+    },
+    '&:after': {
+      background: theme.color.positive,
+      border: `1px solid rgba(0, 0, 0, 0.1)`,
+      boxShadow: `0 0 0 2px ${theme.background.app}`,
+    },
 
-      '&:hover:after, &:focus-visible:after': {
-        boxShadow: `0 0 0 2px ${transparentize(0.88, theme.color.secondary)}`,
-      },
-    }),
-  }));
+    '&:hover:after, &:focus-visible:after': {
+      boxShadow: `0 0 0 2px ${transparentize(0.88, theme.color.secondary)}`,
+    },
+  }),
+  ...(active && {
+    color: theme.color.secondary,
+  }),
+}));
 
 const Img = styled.img(sharedStyles);
 const Placeholder = styled.div(sharedStyles);
@@ -104,13 +109,20 @@ export const SidebarMenu: FC<{
   menu: MenuList;
   isHighlighted?: boolean;
 }> = ({ menu, isHighlighted }) => {
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
   return (
     <WithTooltip
       placement="top"
       closeOnOutsideClick
       tooltip={({ onHide }) => <SidebarMenuList onHide={onHide} menu={menu} />}
+      onVisibleChange={setIsTooltipVisible}
     >
-      <SidebarIconButton title="Shortcuts" aria-label="Shortcuts" highlighted={isHighlighted}>
+      <SidebarIconButton
+        title="Shortcuts"
+        aria-label="Shortcuts"
+        highlighted={isHighlighted}
+        active={isTooltipVisible}
+      >
         <Icons icon="cog" />
       </SidebarIconButton>
     </WithTooltip>