Merge pull request #578 from system-ui/next-box-sizing

jxnblk · web-flow · commit 7415548b56af · 2020-01-14T14:42:40.000-05:00
Add default box-sizing styles
diff --git a/packages/docs/src/components/layout.js b/packages/docs/src/components/layout.js
@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { jsx, Styled, useColorMode } from 'theme-ui'
 import { useState, useRef } from 'react'
-import { Global } from '@emotion/core'
 import { Flex, Box } from '@theme-ui/components'
 import { AccordionNav } from '@theme-ui/sidenav'
 import { Link } from 'gatsby'
@@ -41,7 +40,10 @@ export default props => {
   const [menuOpen, setMenuOpen] = useState(false)
   const nav = useRef(null)
   const [mode, setMode] = useColorMode()
-  const fullwidth = (props.pageContext.frontmatter && props.pageContext.frontmatter.fullwidth) || props.location.pathname === '/'
+  const fullwidth =
+    (props.pageContext.frontmatter &&
+      props.pageContext.frontmatter.fullwidth) ||
+    props.location.pathname === '/'
 
   const cycleMode = e => {
     const i = modes.indexOf(mode)
@@ -52,24 +54,14 @@ export default props => {
   return (
     <Styled.root>
       <Head {...props} />
-      <Global
-        styles={{
-          '*': {
-            boxSizing: 'border-box',
-          },
-          body: {
-            margin: 0,
-          },
-        }}
-      />
       <SkipLink>Skip to content</SkipLink>
       <Flex
         sx={{
           flexDirection: 'column',
           minHeight: '100vh',
         }}>
         <Flex
-          as='header'
+          as="header"
           sx={{
             height: 64,
             px: 3,
@@ -85,7 +77,9 @@ export default props => {
                 if (navLink) navLink.focus()
               }}
             />
-            <Link to="/" sx={{ variant: 'links.nav' }}>Theme UI</Link>
+            <Link to="/" sx={{ variant: 'links.nav' }}>
+              Theme UI
+            </Link>
           </Flex>
           <Flex>
             <NavLink href="https://github.com/system-ui/theme-ui">
diff --git a/packages/docs/src/gatsby-plugin-theme-ui/index.js b/packages/docs/src/gatsby-plugin-theme-ui/index.js
@@ -224,25 +224,26 @@ export default {
     },
     secondary: {
       color: 'background',
-      bg: 'secondary'
+      bg: 'secondary',
     },
     accent: {
       color: 'background',
-      bg: 'accent'
+      bg: 'accent',
     },
     highlight: {
       color: 'text',
-      bg: 'highlight'
+      bg: 'highlight',
     },
   },
   layout: {
     container: {
       p: 3,
       // maxWidth: 1024,
-    }
+    },
   },
   styles: {
     root: {
+      margin: 0,
       fontFamily: 'body',
       lineHeight: 'body',
       fontWeight: 'body',
diff --git a/packages/docs/src/pages/theming.mdx b/packages/docs/src/pages/theming.mdx
@@ -173,6 +173,7 @@ Flag | Default | Description
 `useBodyStyles` | `true` | Adds styles defined in `theme.styles.root` to the `<body>` element along with `color` and `background-color`
 `initialColorModeName` | `'default'` | The key used for the top-level color palette in `theme.colors`
 `useColorSchemeMediaQuery` | `false` | Initializes the color mode based on the `prefers-color-scheme` media query
+`useBoxSizing` | `true` | Adds a global `box-sizing: border-box` style
 
 ## Example Theme
 
diff --git a/packages/theme-provider/src/index.js b/packages/theme-provider/src/index.js
@@ -9,7 +9,12 @@ const BodyStyles = () =>
     styles: theme => {
       if (theme.useBodyStyles === false || (theme.styles && !theme.styles.root))
         return false
+      const boxSizing = theme.useBorderBox === false ? null : 'border-box'
+
       return css({
+        '*': {
+          boxSizing,
+        },
         body: {
           variant: 'styles.root',
         },
diff --git a/packages/theme-provider/test/index.js b/packages/theme-provider/test/index.js
@@ -160,6 +160,11 @@ test('does not renders global styles', () => {
         fontWeights: {
           body: 500,
         },
+        styles: {
+          root: {
+            fontFamily: 'body',
+          },
+        },
       }}>
       <h1>Hello</h1>
     </ThemeProvider>
@@ -169,3 +174,28 @@ test('does not renders global styles', () => {
   expect(style.fontWeight).toBe('')
   expect(style.lineHeight).toBe('')
 })
+
+test('adds box-sizing: border-box', () => {
+  const root = render(
+    <ThemeProvider theme={{}}>
+      <h1>Hello</h1>
+    </ThemeProvider>
+  )
+  const style = window.getComputedStyle(root.baseElement)
+  expect(style.boxSizing).toBe('border-box')
+})
+
+test('does not add box-sizing: border-box', () => {
+  const styles = [].slice.call(document.querySelectorAll('style'))
+  styles.forEach(style => (style.innerHTML = ''))
+  const root = render(
+    <ThemeProvider
+      theme={{
+        useBorderBox: false,
+      }}>
+      <h1>Hello</h1>
+    </ThemeProvider>
+  )
+  const style = window.getComputedStyle(root.baseElement)
+  expect(style.boxSizing).toBe('')
+})
