Merge pull request #5585 from storybooks/fix/add-background-official

ADD default backgrounds to official example
storybookjs · Feb 14, 2019 · 5158d13 · 5158d13
2 parents 51f8f78 + dfad77b
commit 5158d13
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 80 deletions.
diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf, configure, addDecorator, addParameters } from '@storybook/react';
-import { Global, ThemeProvider, themes, createGlobal } from '@storybook/theming';
+import { Global, ThemeProvider, themes, createReset } from '@storybook/theming';
 
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { withCssResources } from '@storybook/addon-cssresources';
@@ -35,7 +35,7 @@ addDecorator(withNotes);
 
 addDecorator(fn => (
   <ThemeProvider theme={themes.normal}>
-    <Global styles={createGlobal} />
+    <Global styles={createReset} />
     {fn()}
   </ThemeProvider>
 ));
@@ -52,6 +52,11 @@ addParameters({
     ...INITIAL_VIEWPORTS,
     ...extraViewports,
   },
+  backgrounds: [
+    { name: 'storybook app', value: themes.normal.background.app, default: true },
+    { name: 'light', value: '#eeeeee' },
+    { name: 'dark', value: '#222222' },
+  ],
 });
 
 let previousExports = {};

diff --git a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
@@ -2123,6 +2123,21 @@ exports[`Storyshots Core|Parameters passed to story 1`] = `
       "type": "tablet"
     }
   },
+  "backgrounds": [
+    {
+      "name": "storybook app",
+      "value": "#F6F9FC",
+      "default": true
+    },
+    {
+      "name": "light",
+      "value": "#eeeeee"
+    },
+    {
+      "name": "dark",
+      "value": "#222222"
+    }
+  ],
   "globalParameter": "globalParameter",
   "chapterParameter": "chapterParameter",
   "storyParameter": "storyParameter",

diff --git a/lib/theming/src/global.ts b/lib/theming/src/global.ts
@@ -14,8 +14,6 @@ export const createReset = memoize(1)(
       fontFamily: typography.fonts.base,
       fontSize: typography.size.s3,
       margin: 0,
-      overflowY: 'auto',
-      overflowX: 'hidden',
 
       WebkitFontSmoothing: 'antialiased',
       MozOsxFontSmoothing: 'grayscale',
@@ -97,6 +95,8 @@ export const createGlobal = memoize(1)(
         ...resetStyles.body,
         color: color.defaultText,
         background: background.app,
+        overflowY: 'auto',
+        overflowX: 'hidden',
       },
 
       hr: {

diff --git a/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot b/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot
@@ -208,79 +208,75 @@ exports[`Storyshots UI|Panel default 1`] = `
 }
 
 <div
-  style="position:relative;width:800px;height:300px;margin:1rem auto;padding:20px;background:papayawhip"
+  class="emotion-13"
+  id="storybook-panel-root"
 >
   <div
-    class="emotion-13"
-    id="storybook-panel-root"
+    class="emotion-11"
   >
     <div
-      class="emotion-11"
+      class="emotion-3"
     >
       <div
-        class="emotion-3"
-      >
-        <div
-          class="emotion-2"
-          role="tablist"
-        >
-          <button
-            class="emotion-0"
-            role="tab"
-            type="button"
-          >
-            Test 1
-          </button>
-          <button
-            class="emotion-1"
-            role="tab"
-            type="button"
-          >
-            Test 2
-          </button>
-        </div>
-      </div>
-      <div
-        class="emotion-10"
+        class="emotion-2"
+        role="tablist"
       >
         <button
-          class="emotion-6"
-          title="Change orientation"
+          class="emotion-0"
+          role="tab"
+          type="button"
         >
-          <svg
-            class="emotion-5"
-            viewBox="0 0 1024 1024"
-          >
-            <path
-              class="emotion-4"
-              d="M64 167.944v688c0 22.092 17.908 40 40 40h816c22.092 0 40-17.908 40-40v-688c0-22.092-17.908-40-40-40h-816c-22.092 0-40 17.908-40 40zM880 815.944h-240v-608h240v608zM144 207.944h416v608h-416v-608zM793.296 320.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 448.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 576.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32z"
-            />
-          </svg>
+          Test 1
         </button>
         <button
-          class="emotion-6"
-          title="Hide addons"
+          class="emotion-1"
+          role="tab"
+          type="button"
         >
-          <svg
-            class="emotion-5"
-            viewBox="0 0 1024 1024"
-          >
-            <path
-              class="emotion-4"
-              d="M693.022 637.866c15.62 15.622 15.618 40.95 0 56.566-15.622 15.622-40.946 15.624-56.562 0.002l-124.46-124.458-124.456 124.458c-15.622 15.622-40.944 15.622-56.562 0-15.624-15.622-15.624-40.946-0.002-56.568l124.454-124.456-124.452-124.45c-15.622-15.622-15.622-40.946 0-56.564 15.62-15.624 40.944-15.624 56.568-0.002l124.45 124.45 124.454-124.452c15.622-15.62 40.95-15.62 56.566 0 15.622 15.62 15.624 40.944 0.002 56.56l-124.456 124.458 124.456 124.456zM828.784 828.784c-174.956 174.956-458.614 174.956-633.566 0-174.958-174.956-174.958-458.614 0-633.566 174.954-174.958 458.612-174.958 633.566 0 174.954 174.952 174.954 458.612 0 633.566zM880 511.998c-0.002-98.296-38.28-190.708-107.786-260.212s-161.92-107.786-260.214-107.788c-98.296 0.002-190.71 38.282-260.216 107.786-69.506 69.508-107.782 161.918-107.786 260.214 0.002 98.296 38.282 190.71 107.786 260.216 69.508 69.506 161.918 107.784 260.216 107.784 98.296 0 190.708-38.278 260.214-107.784s107.784-161.92 107.786-260.216z"
-            />
-          </svg>
+          Test 2
         </button>
       </div>
     </div>
     <div
-      class="emotion-12"
+      class="emotion-10"
     >
-      <div
-        id="test2"
+      <button
+        class="emotion-6"
+        title="Change orientation"
       >
-        TEST 2
-      </div>
+        <svg
+          class="emotion-5"
+          viewBox="0 0 1024 1024"
+        >
+          <path
+            class="emotion-4"
+            d="M64 167.944v688c0 22.092 17.908 40 40 40h816c22.092 0 40-17.908 40-40v-688c0-22.092-17.908-40-40-40h-816c-22.092 0-40 17.908-40 40zM880 815.944h-240v-608h240v608zM144 207.944h416v608h-416v-608zM793.296 320.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 448.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 576.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32z"
+          />
+        </svg>
+      </button>
+      <button
+        class="emotion-6"
+        title="Hide addons"
+      >
+        <svg
+          class="emotion-5"
+          viewBox="0 0 1024 1024"
+        >
+          <path
+            class="emotion-4"
+            d="M693.022 637.866c15.62 15.622 15.618 40.95 0 56.566-15.622 15.622-40.946 15.624-56.562 0.002l-124.46-124.458-124.456 124.458c-15.622 15.622-40.944 15.622-56.562 0-15.624-15.622-15.624-40.946-0.002-56.568l124.454-124.456-124.452-124.45c-15.622-15.622-15.622-40.946 0-56.564 15.62-15.624 40.944-15.624 56.568-0.002l124.45 124.45 124.454-124.452c15.622-15.62 40.95-15.62 56.566 0 15.622 15.62 15.624 40.944 0.002 56.56l-124.456 124.458 124.456 124.456zM828.784 828.784c-174.956 174.956-458.614 174.956-633.566 0-174.958-174.956-174.958-458.614 0-633.566 174.954-174.958 458.612-174.958 633.566 0 174.954 174.952 174.954 458.612 0 633.566zM880 511.998c-0.002-98.296-38.28-190.708-107.786-260.212s-161.92-107.786-260.214-107.788c-98.296 0.002-190.71 38.282-260.216 107.786-69.506 69.508-107.782 161.918-107.786 260.214 0.002 98.296 38.282 190.71 107.786 260.216 69.508 69.506 161.918 107.784 260.216 107.784 98.296 0 190.708-38.278 260.214-107.784s107.784-161.92 107.786-260.216z"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+  <div
+    class="emotion-12"
+  >
+    <div
+      id="test2"
+    >
+      TEST 2
     </div>
   </div>
 </div>
@@ -299,16 +295,12 @@ exports[`Storyshots UI|Panel no panels 1`] = `
 }
 
 <div
-  style="position:relative;width:800px;height:300px;margin:1rem auto;padding:20px;background:papayawhip"
+  class="emotion-1"
 >
   <div
-    class="emotion-1"
+    class="emotion-0"
   >
-    <div
-      class="emotion-0"
-    >
-      Nothing found
-    </div>
+    Nothing found
   </div>
 </div>
 `;
diff --git a/lib/ui/src/components/panel/panel.stories.js b/lib/ui/src/components/panel/panel.stories.js
@@ -32,20 +32,6 @@ const toggleVisibility = action('toggleVisibility');
 const togglePosition = action('togglePosition');
 
 storiesOf('UI|Panel', module)
-  .addDecorator(storyFn => (
-    <div
-      style={{
-        position: 'relative',
-        width: '800px',
-        height: '300px',
-        margin: '1rem auto',
-        padding: '20px',
-        background: 'papayawhip',
-      }}
-    >
-      {storyFn()}
-    </div>
-  ))
   .add('default', () => (
     <Panel
       panels={panels}