Merge pull request #15755 from alk-mandrianarijaona/fix-15553

UI: Do not display menu toggle when `singleStory=true`
storybookjs · Nov 1, 2021 · 75fe858 · 75fe858
2 parents df4fe0e + a6f8252
commit 75fe858
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git 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: () => (
     <Consumer filter={fullScreenMapper}>
-      {({ toggle, value, shortcut }) => (
-        <S.DesktopOnly>
-          <IconButton
-            key="full"
-            onClick={toggle as any}
-            title={`${value ? 'Exit full screen' : 'Go full screen'} [${shortcut}]`}
-          >
-            <Icons icon={value ? 'close' : 'expand'} />
-          </IconButton>
-        </S.DesktopOnly>
-      )}
+      {({ toggle, value, shortcut, hasPanel, singleStory }) =>
+        (!singleStory || (singleStory && hasPanel)) && (
+          <S.DesktopOnly>
+            <IconButton
+              key="full"
+              onClick={toggle as any}
+              title={`${value ? 'Exit full screen' : 'Go full screen'} [${shortcut}]`}
+            >
+              <Icons icon={value ? 'close' : 'expand'} />
+            </IconButton>
+          </S.DesktopOnly>
+        )
+      }
     </Consumer>
   ),
 };

diff --git 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: () => (
     <Consumer filter={menuMapper}>
-      {({ isVisible, toggle }) =>
+      {({ isVisible, toggle, singleStory }) =>
+        !singleStory &&
         !isVisible && (
           <>
             <IconButton aria-label="Show sidebar" key="menu" onClick={toggle} title="Show sidebar">