Remove margin from body tag, increase Styleguidist font size (#509)

* Set 0 margin/padding on html/body * Increase font size for Styleguidist content now that our base styles are not global * Move html/body margin reset to AppContainer component
microsoft · Aug 22, 2018 · 9383cc5 · 9383cc5
1 parent 36c86e7
commit 9383cc5
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/config/styleguide/config.js b/config/styleguide/config.js
@@ -68,4 +68,11 @@ module.exports = {
   styleguideComponents: {
     Wrapper: path.resolve(root, 'src/demos/ExampleWrapper'),
   },
+  styles: {
+    Sections: {
+      root: {
+        fontSize: '1.5rem',
+      },
+    },
+  },
 };
diff --git a/src/components/AppContainer/AppContainer.styles.ts b/src/components/AppContainer/AppContainer.styles.ts
@@ -24,6 +24,10 @@ export const getClassNames = memoizeFunction((props: AppContainerClassNameProps)
           fontSize: '62.5%',
           boxSizing: 'border-box',
         },
+        ':global(html, body)': {
+          margin: 0,
+          padding: 0,
+        },
         ':global(*, *::before, *::after)': {
           boxSizing: 'inherit',
         },

diff --git a/src/components/AppContainer/__snapshots__/AppContainer.test.tsx.snap b/src/components/AppContainer/__snapshots__/AppContainer.test.tsx.snap
@@ -16,6 +16,16 @@ exports[`<AppContainer /> with className matches its snapshot 1`] = `
           box-sizing: border-box;
           font-size: 62.5%;
         }
+        html, body {
+          margin-bottom: 0px;
+          margin-left: 0px;
+          margin-right: 0px;
+          margin-top: 0px;
+          padding-bottom: 0px;
+          padding-left: 0px;
+          padding-right: 0px;
+          padding-top: 0px;
+        }
         *, *::before, *::after {
           box-sizing: inherit;
         }
@@ -40,6 +50,16 @@ exports[`<AppContainer /> with default options matches its snapshot 1`] = `
           box-sizing: border-box;
           font-size: 62.5%;
         }
+        html, body {
+          margin-bottom: 0px;
+          margin-left: 0px;
+          margin-right: 0px;
+          margin-top: 0px;
+          padding-bottom: 0px;
+          padding-left: 0px;
+          padding-right: 0px;
+          padding-top: 0px;
+        }
         *, *::before, *::after {
           box-sizing: inherit;
         }