diff --git a/lib/ui/src/components/sidebar/Menu.stories.tsx b/lib/ui/src/components/sidebar/Menu.stories.tsx index 13c78505e96a..125e02cc997b 100644 --- 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 index dd83db4a05d7..f2d091a33969 100644 --- 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 index eb775f841409..6e5240d95ce0 100644 --- 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]