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

ADD default backgrounds to official example

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 = {};

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",

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: {

lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot

@@ -207,9 +207,6 @@ exports[`Storyshots UI|Panel default 1`] = `
   width: 100%;
 }
 
-<div
-  style="position:relative;width:800px;height:300px;margin:1rem auto;padding:20px;background:papayawhip"
->
 <div
   class="emotion-13"
   id="storybook-panel-root"
@@ -283,7 +280,6 @@ exports[`Storyshots UI|Panel default 1`] = `
     </div>
   </div>
 </div>
-</div>
 `;
 
 exports[`Storyshots UI|Panel no panels 1`] = `
@@ -298,9 +294,6 @@ exports[`Storyshots UI|Panel no panels 1`] = `
   font-weight: 700;
 }
 
-<div
-  style="position:relative;width:800px;height:300px;margin:1rem auto;padding:20px;background:papayawhip"
->
 <div
   class="emotion-1"
 >
@@ -310,5 +303,4 @@ exports[`Storyshots UI|Panel no panels 1`] = `
     Nothing found
   </div>
 </div>
-</div>
 `;

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}