storybookjs · shilman · Mar 11, 2019 · Mar 9, 2019
diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
@@ -120,10 +120,10 @@ exports[`Storyshots Welcome to Storybook 1`] = `
     <article
       style={
         Object {
+          "backgroundColor": "#fff",
           "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
           "lineHeight": 1.4,
-          "margin": 15,
-          "maxWidth": 600,
+          "padding": 15,
         }
       }
     >

diff --git a/.../storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap b/.../storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap
@@ -100,10 +100,10 @@ exports[`Storyshots Welcome to Storybook 1`] = `
 <article
   style={
     Object {
+      "backgroundColor": "#fff",
       "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
       "lineHeight": 1.4,
-      "margin": 15,
-      "maxWidth": 600,
+      "padding": 15,
     }
   }
 >

diff --git a/...toryshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo b/...toryshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo
@@ -4,10 +4,10 @@ exports[`Storyshots Welcome to Storybook 1`] = `
 <article
   style={
     Object {
+      "backgroundColor": "#fff",
       "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
       "lineHeight": 1.4,
-      "margin": 15,
-      "maxWidth": 600,
+      "padding": 15,
     }
   }
 >

diff --git a/...ots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot b/...ots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot
@@ -4,10 +4,10 @@ exports[`Storyshots Welcome to Storybook 1`] = `
 <article
   style={
     Object {
+      "backgroundColor": "#fff",
       "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
       "lineHeight": 1.4,
-      "margin": 15,
-      "maxWidth": 600,
+      "padding": 15,
     }
   }
 >

diff --git a/app/angular/src/demo/welcome.component.ts b/app/angular/src/demo/welcome.component.ts
@@ -46,10 +46,10 @@ import { Component, Output, EventEmitter } from '@angular/core';
   styles: [
     `
       main {
-        margin: 15px;
-        max-width: 600;
+        padding: 15px;
         line-height: 1.4;
         fontfamily: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
+        background-color: #ffffff;
       }
 
       .note {

diff --git a/app/react/src/demo/Welcome.js b/app/react/src/demo/Welcome.js
@@ -5,10 +5,10 @@ const Main = props => (
   <article
     {...props}
     style={{
-      margin: 15,
-      maxWidth: 600,
+      padding: 15,
       lineHeight: 1.4,
       fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+      backgroundColor: '#fff',
     }}
   />
 );

diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/welcome.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/welcome.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Welcome to Storybook 1`] = `
 <article
-  style="margin:15px;max-width:600px;line-height:1.4;font-family:\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif"
+  style="padding:15px;line-height:1.4;font-family:\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif;background-color:#fff"
 >
   <h1>
     Welcome to storybook

diff --git a/examples/ember-cli/app/styles/app.css b/examples/ember-cli/app/styles/app.css
@@ -30,10 +30,10 @@ a {
 }
 
 .main {
-  margin: 15px;
-  max-width: 600;
+  padding: 15px;
   line-height: 1.4;
   font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
+  background-color: #ffffff;
 }
 
 .logo {

diff --git a/examples/html-kitchen-sink/stories/welcome.css b/examples/html-kitchen-sink/stories/welcome.css
@@ -1,8 +1,8 @@
 .main {
-    margin: 15px;
-    max-width: 600px;
+    padding: 15px;
     line-height: 1.4;
     font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
+    background-color: #ffffff;
 }
 
 .logo {

diff --git a/examples/mithril-kitchen-sink/src/Welcome.js b/examples/mithril-kitchen-sink/src/Welcome.js
@@ -6,10 +6,10 @@ const Main = {
   view: vnode => (
     <article
       style={{
-        margin: '15px',
-        maxWidth: '600px',
+        padding: '15px',
         lineHeight: 1.4,
         fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+        backgroundColor: '#ffffff',
       }}
     >
       {vnode.children}

diff --git a/examples/official-storybook/stories/__snapshots__/other-demo.stories.storyshot b/examples/official-storybook/stories/__snapshots__/other-demo.stories.storyshot
@@ -25,7 +25,7 @@ exports[`Storyshots Other|Demo/Button with text 1`] = `
 
 exports[`Storyshots Other|Demo/Welcome to Storybook 1`] = `
 <article
-  style="margin:15px;max-width:600px;line-height:1.4;font-family:\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif"
+  style="padding:15px;line-height:1.4;font-family:\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif;background-color:#fff"
 >
   <h1>
     Welcome to storybook

diff --git a/examples/preact-kitchen-sink/src/Welcome.js b/examples/preact-kitchen-sink/src/Welcome.js
@@ -6,10 +6,10 @@ const Main = props => (
   <article
     {...props}
     style={{
-      margin: 15,
-      maxWidth: 600,
+      padding: 15,
       lineHeight: 1.4,
       fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+      backgroundColor: '#ffffff',
     }}
   />
 );

diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
@@ -27,10 +27,10 @@ exports[`Storyshots Welcome to Storybook 1`] = `
 <article
   style={
     Object {
+      "backgroundColor": "#ffffff",
       "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
       "lineHeight": 1.4,
-      "margin": 15,
-      "maxWidth": 600,
+      "padding": 15,
     }
   }
 >

diff --git a/examples/riot-kitchen-sink/src/stories/Welcome.tag b/examples/riot-kitchen-sink/src/stories/Welcome.tag
@@ -58,10 +58,10 @@
 
 <style>
   .main {
-    margin: 15px;
-    max-width: 600;
+    padding: 15px;
     line-height: 1.4;
     font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
+    background-color: #ffffff;
   }
 
   .logo {

diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot
@@ -105,7 +105,7 @@ exports[`Storyshots Welcome Welcome 1`] = `
   class="storybook-snapshot-container"
 >
   <div
-    class="main svelte-1unvhkg"
+    class="main svelte-5n9a95"
   >
     <h1>
       Welcome to Storybook for Svelte
@@ -123,7 +123,7 @@ exports[`Storyshots Welcome Welcome 1`] = `
 
 			    We've added some basic stories inside the 
       <code
-        class="code svelte-1unvhkg"
+        class="code svelte-5n9a95"
       >
         src/stories
       </code>
@@ -141,7 +141,7 @@ exports[`Storyshots Welcome Welcome 1`] = `
 
 
     <h1
-      class="logo svelte-1unvhkg"
+      class="logo svelte-5n9a95"
     >
       Svelte
     </h1>
@@ -157,14 +157,14 @@ exports[`Storyshots Welcome Welcome 1`] = `
 
 			    (Try editing the 
       <code
-        class="code svelte-1unvhkg"
+        class="code svelte-5n9a95"
       >
         Button
       </code>
        component
 			    located at 
       <code
-        class="code svelte-1unvhkg"
+        class="code svelte-5n9a95"
       >
         src/stories/views/Welcome.svelte
       </code>
@@ -181,7 +181,7 @@ exports[`Storyshots Welcome Welcome 1`] = `
 			    Have a look at the
 
       <a
-        class="link svelte-1unvhkg"
+        class="link svelte-5n9a95"
         href="https://storybook.js.org/basics/writing-stories"
         target="_blank"
       >
@@ -194,7 +194,7 @@ exports[`Storyshots Welcome Welcome 1`] = `
 
 
     <p
-      class="note svelte-1unvhkg"
+      class="note svelte-5n9a95"
     >
       <b>
         NOTE:
@@ -206,7 +206,7 @@ exports[`Storyshots Welcome Welcome 1`] = `
 			    Have a look at the
 
       <code
-        class="code svelte-1unvhkg"
+        class="code svelte-5n9a95"
       >
         .storybook/webpack.config.js
       </code>

diff --git a/examples/svelte-kitchen-sink/src/stories/views/WelcomeView.svelte b/examples/svelte-kitchen-sink/src/stories/views/WelcomeView.svelte
@@ -43,10 +43,10 @@
   @import url('https://fonts.googleapis.com/css?family=Rajdhani');
 
   .main {
-    margin: 15px;
-    max-width: 600;
+    padding: 15px;
     line-height: 1.4;
     font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
+    background-color: #ffffff;
   }
 
   .logo {

diff --git a/examples/vue-kitchen-sink/src/stories/Welcome.vue b/examples/vue-kitchen-sink/src/stories/Welcome.vue
@@ -65,10 +65,10 @@
 
 <style>
   .main {
-    margin: 15px;
-    max-width: 600;
+    padding: 15px;
     line-height: 1.4;
     font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
+    background-color: #ffffff;
   }
 
   .logo {

diff --git a/lib/cli/generators/MITHRIL/template/stories/Welcome.js b/lib/cli/generators/MITHRIL/template/stories/Welcome.js
@@ -7,10 +7,10 @@ const Main = {
   view: vnode => (
     <article
       style={{
-        margin: '15px',
-        maxWidth: '600px',
+        padding: '15px',
         lineHeight: 1.4,
         fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+        backgroundColor: '#ffffff',
       }}
     >
       {vnode.children}

diff --git a/lib/cli/generators/PREACT/template/stories/Welcome.js b/lib/cli/generators/PREACT/template/stories/Welcome.js
@@ -5,10 +5,10 @@ const Main = props => (
   <article
     {...props}
     style={{
-      margin: 15,
-      maxWidth: 600,
+      padding: 15,
       lineHeight: 1.4,
       fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+      backgroundColor: '#ffffff',
     }}
   />
 );