diff --git a/lib/ui/src/components/preview/toolbar.tsx b/lib/ui/src/components/preview/toolbar.tsx index bdf60c1fe2b9..916a958aad48 100644 --- a/lib/ui/src/components/preview/toolbar.tsx +++ b/lib/ui/src/components/preview/toolbar.tsx @@ -43,6 +43,8 @@ const fullScreenMapper = ({ api, state }: Combo) => ({ toggle: api.toggleFullscreen, value: state.layout.isFullscreen, shortcut: shortcutToHumanString(api.getShortcutKeys().fullScreen), + hasPanel: Object.keys(api.getPanels()).length > 0, + singleStory: state.singleStory, }); export const fullScreenTool: Addon = { @@ -51,17 +53,19 @@ export const fullScreenTool: Addon = { match: (p) => ['story', 'docs'].includes(p.viewMode), render: () => ( - {({ toggle, value, shortcut }) => ( - - - - - - )} + {({ toggle, value, shortcut, hasPanel, singleStory }) => + (!singleStory || (singleStory && hasPanel)) && ( + + + + + + ) + } ), }; diff --git a/lib/ui/src/components/preview/tools/menu.tsx b/lib/ui/src/components/preview/tools/menu.tsx index 411baf5fd94f..9bb999c2186c 100644 --- a/lib/ui/src/components/preview/tools/menu.tsx +++ b/lib/ui/src/components/preview/tools/menu.tsx @@ -5,6 +5,7 @@ import { Addon } from '@storybook/addons'; const menuMapper = ({ api, state }: Combo) => ({ isVisible: state.layout.showNav, + singleStory: state.singleStory, toggle: () => api.toggleNav(), }); @@ -14,7 +15,8 @@ export const menuTool: Addon = { match: ({ viewMode }) => viewMode === 'story', render: () => ( - {({ isVisible, toggle }) => + {({ isVisible, toggle, singleStory }) => + !singleStory && !isVisible && ( <>