Merge pull request #11564 from storybookjs/fix/color-border-in-menu

FIX the color of the menu separator
storybookjs · Jul 20, 2020 · 661e915 · 661e915
2 parents 526e0d2 + e4f25c4
commit 661e915
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 21 deletions.
diff --git a/lib/ui/src/components/sidebar/Menu.stories.tsx b/lib/ui/src/components/sidebar/Menu.stories.tsx
@@ -1,23 +1,64 @@
-import React from 'react';
+import React, { Fragment, FunctionComponent } from 'react';
 
-import { TooltipLinkList } from '@storybook/components';
-import { MenuItemIcon } from './Menu';
+import { WithTooltip, TooltipLinkList, Icons } from '@storybook/components';
+import { styled } from '@storybook/theming';
+import { MenuItemIcon, SidebarMenu, MenuButton, SidebarMenuList } from './Menu';
+import { useMenu } from '../../containers/menu';
 
 export default {
   component: MenuItemIcon,
   title: 'UI/Sidebar/Menu',
+  decorators: [
+    (StoryFn: FunctionComponent) => (
+      <Fragment>
+        <StoryFn />
+      </Fragment>
+    ),
+  ],
 };
 
-export const all = () => (
-  <TooltipLinkList
-    links={[
-      { title: 'has icon', left: <MenuItemIcon icon="check" />, id: 'icon' },
-      {
-        title: 'has imgSrc',
-        left: <MenuItemIcon imgSrc="https://via.placeholder.com/20" />,
-        id: 'img',
-      },
-      { title: 'has neither', left: <MenuItemIcon />, id: 'non' },
-    ]}
-  />
-);
+const fakemenu = [
+  { title: 'has icon', left: <MenuItemIcon icon="check" />, id: 'icon' },
+  {
+    title: 'has imgSrc',
+    left: <MenuItemIcon imgSrc="https://via.placeholder.com/20" />,
+    id: 'img',
+  },
+  { title: 'has neither', left: <MenuItemIcon />, id: 'non' },
+];
+
+export const Items = () => <TooltipLinkList links={fakemenu} />;
+
+export const Real = () => <SidebarMenu menu={fakemenu} isHighlighted />;
+
+const DoubleThemeRenderingHack = styled.div({
+  '#root > div:first-child > &': {
+    textAlign: 'right',
+  },
+});
+
+export const Expanded = () => {
+  const menu = useMenu(
+    // @ts-ignore
+    { getShortcutKeys: () => ({}), versionUpdateAvailable: () => false },
+    false,
+    false,
+    false,
+    false
+  );
+  return (
+    <DoubleThemeRenderingHack>
+      <WithTooltip
+        placement="top"
+        trigger="click"
+        closeOnClick
+        startOpen
+        tooltip={({ onHide }) => <SidebarMenuList onHide={onHide} menu={menu} />}
+      >
+        <MenuButton outline small containsIcon highlighted={false} title="Shortcuts">
+          <Icons icon="ellipsis" />
+        </MenuButton>
+      </WithTooltip>
+    </DoubleThemeRenderingHack>
+  );
+};
diff --git a/lib/ui/src/components/sidebar/Menu.tsx b/lib/ui/src/components/sidebar/Menu.tsx
@@ -41,7 +41,7 @@ export const MenuItemIcon = ({ icon, imgSrc }: ListItemIconProps) => {
   return <Placeholder />;
 };
 
-const MenuButton = styled(Button)<MenuButtonProps>(({ highlighted, theme }) => ({
+export const MenuButton = styled(Button)<MenuButtonProps>(({ highlighted, theme }) => ({
   position: 'relative',
   overflow: 'visible',
   padding: 7,
@@ -62,7 +62,7 @@ const MenuButton = styled(Button)<MenuButtonProps>(({ highlighted, theme }) => (
 
 type ClickHandler = ComponentProps<typeof TooltipLinkList>['links'][number]['onClick'];
 
-const SidebarMenuList: FunctionComponent<{
+export const SidebarMenuList: FunctionComponent<{
   menu: MenuList;
   onHide: () => void;
 }> = ({ menu, onHide }) => {

diff --git a/lib/ui/src/containers/menu.tsx b/lib/ui/src/containers/menu.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 
 import { Badge } from '@storybook/components';
 import { API } from '@storybook/api';
-import { color } from '@storybook/theming';
+import { useTheme, Theme } from '@storybook/theming';
 
 import { shortcutToHumanString } from '@storybook/api/shortcut';
 import { MenuItemIcon } from '../components/sidebar/Menu';
@@ -23,6 +23,7 @@ export const useMenu = (
   showNav: boolean,
   enableShortcuts: boolean
 ) => {
+  const theme = useTheme<Theme>();
   const shortcutKeys = api.getShortcutKeys();
 
   const about = useMemo(
@@ -53,7 +54,9 @@ export const useMenu = (
       onClick: () => api.navigateToSettingsPage('/settings/shortcuts'),
       right: shortcutToHumanStringIfEnabled(shortcutKeys.shortcutsPage, enableShortcuts),
       left: <MenuItemIcon />,
-      style: { borderBottom: `4px solid ${color.mediumlight}` },
+      style: {
+        borderBottom: `4px solid ${theme.appBorderColor}`,
+      },
     }),
     [api, shortcutToHumanStringIfEnabled, enableShortcuts, shortcutKeys]
   );
@@ -162,7 +165,7 @@ export const useMenu = (
       id: 'collapse',
       title: 'Collapse all',
       onClick: () => api.collapseAll(),
-      right: shortcutToHumanString(shortcutKeys.collapseAll),
+      right: enableShortcuts ? shortcutToHumanString(shortcutKeys.collapseAll) : '',
       left: <MenuItemIcon />,
     }),
     [api, shortcutToHumanStringIfEnabled, enableShortcuts, shortcutKeys]