From ece1a67da37bdd2dca83239cbc7d990e936ddb2c Mon Sep 17 00:00:00 2001 From: Angela Papadopoulou Date: Fri, 25 Jun 2021 16:41:20 +0300 Subject: [PATCH 1/9] Add new toolbar menu type --- lib/ui/src/components/sidebar/Menu.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/lib/ui/src/components/sidebar/Menu.tsx b/lib/ui/src/components/sidebar/Menu.tsx index b1d20f9748aa..439bc08d3d5b 100644 --- a/lib/ui/src/components/sidebar/Menu.tsx +++ b/lib/ui/src/components/sidebar/Menu.tsx @@ -1,7 +1,7 @@ import React, { FunctionComponent, useMemo, ComponentProps } from 'react'; import { styled } from '@storybook/theming'; -import { WithTooltip, TooltipLinkList, Button, Icons } from '@storybook/components'; +import { WithTooltip, TooltipLinkList, Button, Icons, IconButton } from '@storybook/components'; export type MenuList = ComponentProps['links']; @@ -113,3 +113,20 @@ export const SidebarMenu: FunctionComponent<{ ); }; + +export const ToolbarMenu: FunctionComponent<{ + menu: MenuList; +}> = ({ menu }) => { + return ( + } + > + + + + + ); +}; From bb6ede4885b0ee62d0d680e658a21f94d07615a4 Mon Sep 17 00:00:00 2001 From: Angela Papadopoulou Date: Fri, 25 Jun 2021 16:45:04 +0300 Subject: [PATCH 2/9] Add new menu tool --- lib/ui/src/components/preview/tools/menu.tsx | 38 ++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 lib/ui/src/components/preview/tools/menu.tsx diff --git a/lib/ui/src/components/preview/tools/menu.tsx b/lib/ui/src/components/preview/tools/menu.tsx new file mode 100644 index 000000000000..64bf614c1d6d --- /dev/null +++ b/lib/ui/src/components/preview/tools/menu.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { Separator } from '@storybook/components'; +import { Consumer, Combo } from '@storybook/api'; +import { Addon } from '@storybook/addons'; +import { useMenu } from '../../../containers/menu'; +import { ToolbarMenu } from '../../sidebar/Menu'; + +const menuMapper = ({ api, state }: Combo) => ({ + isVisible: state.layout.showNav, + menu: useMenu( + api, + state.layout.isToolshown, + state.layout.isFullscreen, + state.layout.showPanel, + state.layout.showNav, + state.ui.enableShortcuts + ), +}); + +export const menuTool: Addon = { + title: 'menu', + id: 'menu', + match: ({ viewMode }) => viewMode === 'story', + render: () => ( + <> + + {({ isVisible, menu }) => + isVisible ? null : ( + <> + + + + ) + } + + + ), +}; From c09f61f20029eb32fba37b41026161a09f30c61a Mon Sep 17 00:00:00 2001 From: Angela Papadopoulou Date: Fri, 25 Jun 2021 16:56:28 +0300 Subject: [PATCH 3/9] Add menu tool in the toolbar --- lib/ui/src/components/preview/toolbar.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/ui/src/components/preview/toolbar.tsx b/lib/ui/src/components/preview/toolbar.tsx index da3a681a43e9..bdf60c1fe2b9 100644 --- a/lib/ui/src/components/preview/toolbar.tsx +++ b/lib/ui/src/components/preview/toolbar.tsx @@ -15,6 +15,7 @@ import * as S from './utils/components'; import { PreviewProps } from './utils/types'; import { copyTool } from './tools/copy'; import { ejectTool } from './tools/eject'; +import { menuTool } from './tools/menu'; export const getTools = (getFn: API['getElements']) => Object.values(getFn(types.TOOL)); @@ -193,7 +194,11 @@ export function filterTools( path: State['path']; } ) { - const toolsLeft = [tabs.filter((p) => !p.hidden).length >= 1 && createTabsTool(tabs), ...tools]; + const toolsLeft = [ + menuTool, + tabs.filter((p) => !p.hidden).length >= 1 && createTabsTool(tabs), + ...tools, + ]; const toolsRight = [...toolsExtra]; const filter = (item: Partial) => From ea34d68e861366139271e8f7375b0b516388771d Mon Sep 17 00:00:00 2001 From: Angela Papadopoulou Date: Fri, 25 Jun 2021 17:46:54 +0300 Subject: [PATCH 4/9] Add toolbar menu story and fix expanded menu stories --- lib/ui/src/components/sidebar/Menu.stories.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/lib/ui/src/components/sidebar/Menu.stories.tsx b/lib/ui/src/components/sidebar/Menu.stories.tsx index b41469c4cae4..196ee39566d3 100644 --- a/lib/ui/src/components/sidebar/Menu.stories.tsx +++ b/lib/ui/src/components/sidebar/Menu.stories.tsx @@ -2,7 +2,7 @@ import React, { Fragment, FunctionComponent } from 'react'; import { WithTooltip, TooltipLinkList, Icons } from '@storybook/components'; import { styled } from '@storybook/theming'; -import { MenuItemIcon, SidebarMenu, MenuButton, SidebarMenuList } from './Menu'; +import { MenuItemIcon, SidebarMenu, ToolbarMenu, MenuButton, SidebarMenuList } from './Menu'; import { useMenu } from '../../containers/menu'; export default { @@ -31,6 +31,8 @@ export const Items = () => ; export const Real = () => ; +export const Toolbar = () => ; + const DoubleThemeRenderingHack = styled.div({ '#root > [data-side="left"] > &': { textAlign: 'right', @@ -40,7 +42,7 @@ const DoubleThemeRenderingHack = styled.div({ const ExpandedMenu: FunctionComponent<{ menu: any }> = ({ menu }) => ( { false, false, false, + false, false ); return ; @@ -82,6 +85,7 @@ export const ExpandedWithoutReleaseNotes = () => { false, false, false, + false, false ); return ; From 32a000f246cf7f7db8174e656eb5a9799c51f35e Mon Sep 17 00:00:00 2001 From: Angela Papadopoulou Date: Tue, 29 Jun 2021 15:03:27 +0300 Subject: [PATCH 5/9] Add aria-label on menu icon button --- lib/ui/src/components/sidebar/Menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ui/src/components/sidebar/Menu.tsx b/lib/ui/src/components/sidebar/Menu.tsx index 439bc08d3d5b..4325d1559110 100644 --- a/lib/ui/src/components/sidebar/Menu.tsx +++ b/lib/ui/src/components/sidebar/Menu.tsx @@ -124,7 +124,7 @@ export const ToolbarMenu: FunctionComponent<{ closeOnClick tooltip={({ onHide }) => } > - + From d655a7a3a33c11a5dcb2031ba2896a7a0626a204 Mon Sep 17 00:00:00 2001 From: Angeliki Papadopoulou <56366807+apapadopoulou@users.noreply.github.com> Date: Tue, 29 Jun 2021 15:08:45 +0300 Subject: [PATCH 6/9] Modify conditional button rendering Co-authored-by: Deen --- lib/ui/src/components/preview/tools/menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ui/src/components/preview/tools/menu.tsx b/lib/ui/src/components/preview/tools/menu.tsx index 64bf614c1d6d..abc9ba034509 100644 --- a/lib/ui/src/components/preview/tools/menu.tsx +++ b/lib/ui/src/components/preview/tools/menu.tsx @@ -25,7 +25,7 @@ export const menuTool: Addon = { <> {({ isVisible, menu }) => - isVisible ? null : ( + isVisible && ( <> From b2b1f7a0fbaeafb3bcb57ce237b4117a36b95c8f Mon Sep 17 00:00:00 2001 From: Angela Papadopoulou Date: Tue, 29 Jun 2021 21:20:51 +0300 Subject: [PATCH 7/9] Replace menu icon with button that opens the sidebar --- lib/ui/src/components/preview/tools/menu.tsx | 24 +++++++++----------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/lib/ui/src/components/preview/tools/menu.tsx b/lib/ui/src/components/preview/tools/menu.tsx index abc9ba034509..f654571dd696 100644 --- a/lib/ui/src/components/preview/tools/menu.tsx +++ b/lib/ui/src/components/preview/tools/menu.tsx @@ -1,20 +1,11 @@ import React from 'react'; -import { Separator } from '@storybook/components'; +import { IconButton, Icons, Separator } from '@storybook/components'; import { Consumer, Combo } from '@storybook/api'; import { Addon } from '@storybook/addons'; -import { useMenu } from '../../../containers/menu'; -import { ToolbarMenu } from '../../sidebar/Menu'; const menuMapper = ({ api, state }: Combo) => ({ isVisible: state.layout.showNav, - menu: useMenu( - api, - state.layout.isToolshown, - state.layout.isFullscreen, - state.layout.showPanel, - state.layout.showNav, - state.ui.enableShortcuts - ), + toggle: api.toggleNav, }); export const menuTool: Addon = { @@ -24,10 +15,17 @@ export const menuTool: Addon = { render: () => ( <> - {({ isVisible, menu }) => + {({ isVisible, toggle }) => isVisible && ( <> - + toggle()} + title="Show sidebar" + > + + ) From 529cc4d6a9e2885aaafbfa0eb864b13ae9aaa02a Mon Sep 17 00:00:00 2001 From: Angeliki Papadopoulou <56366807+apapadopoulou@users.noreply.github.com> Date: Tue, 29 Jun 2021 21:44:00 +0300 Subject: [PATCH 8/9] Display icon when sidebar is not visible Co-authored-by: Deen --- lib/ui/src/components/preview/tools/menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ui/src/components/preview/tools/menu.tsx b/lib/ui/src/components/preview/tools/menu.tsx index f654571dd696..faa98d4dd695 100644 --- a/lib/ui/src/components/preview/tools/menu.tsx +++ b/lib/ui/src/components/preview/tools/menu.tsx @@ -16,7 +16,7 @@ export const menuTool: Addon = { <> {({ isVisible, toggle }) => - isVisible && ( + !isVisible && ( <> Date: Wed, 30 Jun 2021 00:31:08 +0300 Subject: [PATCH 9/9] Fix icon toggle --- lib/ui/src/components/preview/tools/menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ui/src/components/preview/tools/menu.tsx b/lib/ui/src/components/preview/tools/menu.tsx index faa98d4dd695..a2b91d8c0f0c 100644 --- a/lib/ui/src/components/preview/tools/menu.tsx +++ b/lib/ui/src/components/preview/tools/menu.tsx @@ -21,7 +21,7 @@ export const menuTool: Addon = { toggle()} + onClick={toggle as any} title="Show sidebar" >