From c735c908dc97c0168fed1cd436596d08e1fd7b5e Mon Sep 17 00:00:00 2001
From: Tomas Nygren <tomasnygren.854@gmail.com>
Date: Tue, 4 May 2021 18:09:29 +1000
Subject: [PATCH 1/2] always show tab tools. only use isToolshown option to
 hide and show tab tools

---
 lib/ui/src/components/preview/preview.tsx | 3 +--
 lib/ui/src/components/preview/toolbar.tsx | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/lib/ui/src/components/preview/preview.tsx b/lib/ui/src/components/preview/preview.tsx
index ed988509a25..b14ebd694a1 100644
--- a/lib/ui/src/components/preview/preview.tsx
+++ b/lib/ui/src/components/preview/preview.tsx
@@ -146,8 +146,7 @@ const Preview = React.memo<PreviewProps>((props) => {
   const tabs = useTabs(previewId, baseUrl, withLoader, getElements, story);
 
   const shouldScale = viewMode === 'story';
-  const isToolshown =
-    !(viewMode === 'docs' && tabs.filter((t) => !t.hidden).length < 2) && options.isToolshown;
+  const { isToolshown } = options;
 
   const initialRender = useRef(true);
   useEffect(() => {
diff --git a/lib/ui/src/components/preview/toolbar.tsx b/lib/ui/src/components/preview/toolbar.tsx
index 66f5c748970..c510347f6b7 100644
--- a/lib/ui/src/components/preview/toolbar.tsx
+++ b/lib/ui/src/components/preview/toolbar.tsx
@@ -181,8 +181,7 @@ export function filterTools(
     path: State['path'];
   }
 ) {
-  const tabsTool = createTabsTool(tabs);
-  const toolsLeft = [tabs.filter((p) => !p.hidden).length > 1 ? tabsTool : null, ...tools];
+  const toolsLeft = [tabs.filter((p) => !p.hidden).length >= 1 && createTabsTool(tabs), ...tools];
   const toolsRight = [...toolsExtra];
 
   const filter = (item: Partial<Addon>) =>

From 2789a64311a4bf6b1253189455917a78a36a5e99 Mon Sep 17 00:00:00 2001
From: Tomas Nygren <tomasnygren.854@gmail.com>
Date: Wed, 5 May 2021 09:53:00 +1000
Subject: [PATCH 2/2] fix story noTabs. add story scenario withCanvasTab

---
 lib/ui/src/components/preview/preview.stories.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/lib/ui/src/components/preview/preview.stories.tsx b/lib/ui/src/components/preview/preview.stories.tsx
index 2fa71df1270..d94f51f5fc0 100644
--- a/lib/ui/src/components/preview/preview.stories.tsx
+++ b/lib/ui/src/components/preview/preview.stories.tsx
@@ -37,6 +37,20 @@ export default {
 };
 
 export const noTabs = () => (
+  <Consumer>
+    {({ api }: Combo) => {
+      return (
+        <Preview
+          {...previewProps}
+          api={{ ...api, getElements: () => ({}) }}
+          story={{ parameters: { previewTabs: { canvas: { hidden: true } } } }}
+        />
+      );
+    }}
+  </Consumer>
+);
+
+export const withCanvasTab = () => (
   <Consumer>
     {({ api }: Combo) => {
       return <Preview {...previewProps} api={{ ...api, getElements: () => ({}) }} />;