Merge pull request #6551 from storybooks/fix/addon-tab-type

FIX viewmode being hard-coded making custom addons of type TAB impossible
storybookjs · Apr 18, 2019 · 907c42a · 907c42a
2 parents 4d15755 + 37a519c
commit 907c42a
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 18 deletions.
diff --git a/lib/router/src/utils.ts b/lib/router/src/utils.ts
@@ -6,7 +6,7 @@ interface StoryData {
   storyId?: string;
 }
 
-const knownViewModesRegex = /(story|info)/;
+export const knownNonViewModesRegex = /(settings)/;
 const splitPath = /\/([^/]+)\/([^/]+)?/;
 
 // Remove punctuation https://gist.github.com/davidjrice/9d2af51100e41c6c4b4a
@@ -39,7 +39,7 @@ export const storyDataFromString: (path?: string) => StoryData = memoize(1000)(
 
     if (path) {
       const [, viewMode, storyId] = path.match(splitPath) || [undefined, undefined, undefined];
-      if (viewMode && viewMode.match(knownViewModesRegex)) {
+      if (viewMode && !viewMode.match(knownNonViewModesRegex)) {
         Object.assign(result, {
           viewMode,
           storyId,

diff --git a/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot b/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot
@@ -2859,7 +2859,7 @@ exports[`Storyshots UI|Layout/Mobile page 1`] = `
   overflow: hidden;
 }
 
-.emotion-11 {
+.emotion-12 {
   position: fixed;
   left: 0;
   top: 0;
@@ -2948,7 +2948,7 @@ exports[`Storyshots UI|Layout/Mobile page 1`] = `
   border-left: 1px solid rgba(0,0,0,.1);
 }
 
-.emotion-10 {
+.emotion-11 {
   position: fixed;
   bottom: 0;
   left: 0;
@@ -2962,14 +2962,14 @@ exports[`Storyshots UI|Layout/Mobile page 1`] = `
   background: #FFFFFF;
 }
 
-.emotion-10 > * {
+.emotion-11 > * {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
 <div
-  class="emotion-11"
+  class="emotion-12"
 >
   <div
     class="emotion-7"
@@ -2995,9 +2995,7 @@ exports[`Storyshots UI|Layout/Mobile page 1`] = `
       class="emotion-4"
     >
       <div>
-        <div
-          hidden=""
-        >
+        <div>
           <div
             class="emotion-2"
             color="deepskyblue"
@@ -3010,6 +3008,7 @@ exports[`Storyshots UI|Layout/Mobile page 1`] = `
             <pre>
               {
   "id": "main",
+  "viewMode": "settings",
   "debug": {
     "initialActive": 1
   }
@@ -3046,14 +3045,14 @@ exports[`Storyshots UI|Layout/Mobile page 1`] = `
         </h2>
         <pre>
           {
-  "hidden": true
+  "hidden": false
 }
         </pre>
       </div>
     </div>
   </div>
   <nav
-    class="emotion-10"
+    class="emotion-11"
   >
     <button
       class="emotion-8"
@@ -3063,7 +3062,12 @@ exports[`Storyshots UI|Layout/Mobile page 1`] = `
     <button
       class="emotion-8"
     >
-      settings
+      Canvassettings
+    </button>
+    <button
+      class="emotion-8"
+    >
+      Addons
     </button>
   </nav>
 </div>

diff --git a/lib/ui/src/components/layout/desktop.js b/lib/ui/src/components/layout/desktop.js
@@ -21,10 +21,7 @@ const Desktop = React.memo(
                 <Nav debug={navProps} />
               </S.Nav>
               <S.Main {...mainProps}>
-                <S.Preview
-                  {...previewProps}
-                  hidden={!(viewMode === 'story' || viewMode === 'info')}
-                >
+                <S.Preview {...previewProps} hidden={viewMode === 'settings'}>
                   <Preview id="main" debug={previewProps} />
                 </S.Preview>
 

diff --git a/lib/ui/src/components/layout/layout.stories.js b/lib/ui/src/components/layout/layout.stories.js
@@ -178,7 +178,7 @@ storiesOf('UI|Layout/Desktop', module)
           render: () => <MockPage />,
         },
       ]}
-      viewMode={undefined}
+      viewMode="settings"
     />
   ));
 
@@ -208,6 +208,6 @@ storiesOf('UI|Layout/Mobile', module)
           render: () => <MockPage />,
         },
       ]}
-      viewMode={undefined}
+      viewMode="settings"
     />
   ));