Menu design upgrades

1. Icons are always on the left. If there is one icon in a menu item, every other menu item will have an indent to match the space of the icon as seen in the Storybook menu. 2. If there are no icons, the item label is not indented. 3. There is a node on the right of each menu item that can be populated with keyboard shortcuts, illustrations, etc. 4. Active items (denoted with a checkmark) will be both bold and blue. 5. There will be an optional `description` text node that will be below the item label. 6. Keyboard shortcuts will list all commands in one container. 7. The decorative menu tooltip arrows are no longer shown.
storybookjs · Feb 3, 2023 · 172d13f · 172d13f
1 parent 47342af
commit 172d13f
Show file tree

Hide file tree

Showing 15 changed files with 386 additions and 181 deletions.
diff --git a/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx b/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx
@@ -1,18 +1,9 @@
-import type { ReactNode } from 'react';
 import React from 'react';
+import type { TooltipLinkListLink } from '@storybook/components';
 import { Icons } from '@storybook/components';
 import type { ToolbarItem } from '../types';
 
-interface ListItem {
-  id: string;
-  left?: ReactNode;
-  title?: ReactNode;
-  right?: ReactNode;
-  active?: boolean;
-  onClick?: () => void;
-}
-
-type ToolbarMenuListItemProps = {
+export type ToolbarMenuListItemProps = {
   currentValue: string;
   onClick: () => void;
 } & ToolbarItem;
@@ -28,34 +19,18 @@ export const ToolbarMenuListItem = ({
   currentValue,
 }: ToolbarMenuListItemProps) => {
   const Icon = icon && <Icons style={{ opacity: 1 }} icon={icon} />;
-  const hasContent = left || right || title;
 
-  const Item: ListItem = {
+  const Item: TooltipLinkListLink = {
     id: value || currentValue,
     active: currentValue === value,
+    right,
+    title,
+    left,
     onClick,
   };
 
-  if (left) {
-    Item.left = left;
-  }
-
-  if (right) {
-    Item.right = right;
-  }
-
-  if (title) {
-    Item.title = title;
-  }
-
   if (icon && !hideIcon) {
-    if (hasContent && !right) {
-      Item.right = Icon;
-    } else if (hasContent && !left) {
-      Item.left = Icon;
-    } else if (!hasContent) {
-      Item.right = Icon;
-    }
+    Item.left = Icon;
   }
 
   return Item;

diff --git a/code/ui/components/src/index.ts b/code/ui/components/src/index.ts
@@ -56,7 +56,8 @@ export { Form } from './form/index';
 export { WithTooltip, WithTooltipPure } from './tooltip/lazy-WithTooltip';
 export { TooltipMessage } from './tooltip/TooltipMessage';
 export { TooltipNote } from './tooltip/TooltipNote';
-export { TooltipLinkList } from './tooltip/TooltipLinkList';
+export { TooltipLinkList, type Link as TooltipLinkListLink } from './tooltip/TooltipLinkList';
+export { default as ListItem } from './tooltip/ListItem';
 
 // Toolbar and subcomponents
 export { Tabs, TabsState, TabBar, TabWrapper } from './tabs/tabs';
@@ -68,6 +69,7 @@ export { AddonPanel } from './addon-panel/addon-panel';
 // Graphics
 export type { IconsProps } from './icon/icon';
 export { Icons, Symbols } from './icon/icon';
+export { icons } from './icon/icons';
 export { StorybookLogo } from './brand/StorybookLogo';
 export { StorybookIcon } from './brand/StorybookIcon';
 

diff --git a/code/ui/components/src/tabs/tabs.hooks.tsx b/code/ui/components/src/tabs/tabs.hooks.tsx
@@ -60,7 +60,6 @@ export function useList(list: ChildrenList) {
         <>
           <WithTooltip
             interactive
-            withArrows={false}
             visible={isTooltipVisible}
             onVisibleChange={setTooltipVisible}
             placement="bottom"

diff --git a/code/ui/components/src/tooltip/ListItem.tsx b/code/ui/components/src/tooltip/ListItem.tsx
@@ -1,8 +1,10 @@
-import type { FC, ReactNode, ComponentProps } from 'react';
+import type { FC, ReactNode, ComponentProps, ReactElement } from 'react';
 import React from 'react';
 import { styled } from '@storybook/theming';
 import memoize from 'memoizerific';
 import { transparentize } from 'polished';
+import { Icons } from '../icon/icon';
+import { icons } from '../icon/icons';
 
 export interface TitleProps {
   children?: ReactNode;
@@ -47,53 +49,35 @@ export interface RightProps {
   active?: boolean;
 }
 
-const Right = styled.span<RightProps>(
-  {
-    '& svg': {
-      transition: 'all 200ms ease-out',
-      opacity: 0,
-      height: 12,
-      width: 12,
-      margin: '3px 0',
-      verticalAlign: 'top',
-    },
-    '& path': {
-      fill: 'inherit',
-    },
+const Right = styled.span<RightProps>({
+  display: 'flex',
+  '& svg': {
+    height: 12,
+    width: 12,
+    margin: '3px 0',
+    verticalAlign: 'top',
   },
-  ({ active, theme }) =>
-    active
-      ? {
-          '& svg': {
-            opacity: 1,
-          },
-          '& path': {
-            fill: theme.color.secondary,
-          },
-        }
-      : {}
-);
-
-const Center = styled.span({
-  flex: 1,
-  textAlign: 'left',
-  display: 'inline-flex',
-
-  '& > * + *': {
-    paddingLeft: 10,
+  '& path': {
+    fill: 'inherit',
   },
 });
 
+const Center = styled.span<{ isIndented: boolean }>(
+  {
+    flex: 1,
+    textAlign: 'left',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  ({ isIndented }) => (isIndented ? { marginLeft: 24 } : {})
+);
+
 export interface CenterTextProps {
   active?: boolean;
   disabled?: boolean;
 }
 
 const CenterText = styled.span<CenterTextProps>(
-  {
-    flex: 1,
-    textAlign: 'center',
-  },
   ({ active, theme }) =>
     active
       ? {
@@ -112,17 +96,22 @@ export interface LeftProps {
   active?: boolean;
 }
 
-const Left = styled.span<LeftProps>(({ active, theme }) =>
-  active
-    ? {
-        '& svg': {
-          opacity: 1,
-        },
-        '& path': {
-          fill: theme.color.primary,
-        },
-      }
-    : {}
+const Left = styled.span<LeftProps>(
+  ({ active, theme }) =>
+    active
+      ? {
+          '& svg': {
+            opacity: 1,
+          },
+          '& svg path': {
+            fill: theme.color.secondary,
+          },
+        }
+      : {},
+  () => ({
+    display: 'flex',
+    maxWidth: 14,
+  })
 );
 
 export interface ItemProps {
@@ -188,14 +177,20 @@ export type LinkWrapperType = FC<any>;
 
 export interface ListItemProps extends Omit<ComponentProps<typeof Item>, 'href' | 'title'> {
   loading?: boolean;
+  /**
+   * @deprecated ReactNode elements on the right side of the list item are deprecated.
+   * Use `icon` property instead.
+   */
   left?: ReactNode;
   title?: ReactNode;
   center?: ReactNode;
   right?: ReactNode;
+  icon?: keyof typeof icons | ReactElement;
   active?: boolean;
   disabled?: boolean;
   href?: string;
   LinkWrapper?: LinkWrapperType;
+  isIndented?: boolean;
 }
 
 const ListItem: FC<ListItemProps> = ({
@@ -204,8 +199,10 @@ const ListItem: FC<ListItemProps> = ({
   title,
   center,
   right,
+  icon,
   active,
   disabled,
+  isIndented,
   href,
   onClick,
   LinkWrapper,
@@ -214,11 +211,17 @@ const ListItem: FC<ListItemProps> = ({
   const itemProps = getItemProps(onClick, href, LinkWrapper);
   const commonProps = { active, disabled };
 
+  const isStorybookIcon = typeof icon === 'string' && icons[icon];
+
   return (
     <Item {...commonProps} {...rest} {...itemProps}>
-      {left && <Left {...commonProps}>{left}</Left>}
+      {icon ? (
+        <Left {...commonProps}>{isStorybookIcon ? <Icons icon={icon} /> : icon}</Left>
+      ) : (
+        left && <Left {...commonProps}>{left}</Left>
+      )}
       {title || center ? (
-        <Center>
+        <Center isIndented={!left && !icon && isIndented}>
           {title && (
             <Title {...commonProps} loading={loading}>
               {title}

diff --git a/code/ui/components/src/tooltip/Tooltip.tsx b/code/ui/components/src/tooltip/Tooltip.tsx
@@ -126,7 +126,7 @@ export interface TooltipProps {
 
 export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
   (
-    { placement, hasChrome, children, arrowProps, tooltipRef, color, withArrows = true, ...props },
+    { placement, hasChrome, children, arrowProps, tooltipRef, color, withArrows, ...props },
     ref
   ) => {
     return (