BorderBox updates

src/BorderBox.js

@@ -8,7 +8,7 @@ const BorderBox = withSystemProps(
     borderColor: 'gray.2',
     borderRadius: 1
   },
-  LAYOUT
+  [...LAYOUT, 'boxShadow']
 )
 
 export default BorderBox

src/CircleOcticon.js

@@ -2,21 +2,23 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Octicon from '@githubprimer/octicons-react'
 import Flex from './Flex'
+import BorderBox from './BorderBox'
 
 function CircleOcticon(props) {
   const {size} = props
-  const {icon, ...rest} = props
+  const {icon, bg, ...rest} = props
   return (
-    <Flex {...rest} size={size} alignItems="center" justifyContent="center">
-      <Octicon icon={icon} size={size} />
-    </Flex>
+    <BorderBox bg={bg} overflow="hidden" border="none" size={size} borderRadius="50%">
+      <Flex {...rest} alignItems="center" justifyContent="center">
+        <Octicon icon={icon} size={size} />
+      </Flex>
+    </BorderBox>
   )
 }
 
 CircleOcticon.defaultProps = {
   ...Flex.defaultProps,
-  size: 32,
-  borderRadius: '50%'
+  size: 32
 }
 
 CircleOcticon.propTypes = {

src/Dropdown.js

@@ -4,7 +4,7 @@ import classnames from 'classnames'
 import StyledOcticon from './StyledOcticon'
 import {TriangleDown} from '@githubprimer/octicons-react'
 import Button from './Button'
-import Box from './Box'
+import BorderBox from './BorderBox'
 import Caret from './Caret'
 import Details from './Details'
 import Flex from './Flex'
@@ -21,7 +21,7 @@ function Dropdown({title, scheme, children, className, ...rest}) {
               {title}
               <StyledOcticon icon={TriangleDown} size={14} ml={title ? 2 : 0} />
             </Button>
-            <Box
+            <BorderBox
               bg="white"
               border={1}
               borderColor="gray.2"
@@ -35,7 +35,7 @@ function Dropdown({title, scheme, children, className, ...rest}) {
             >
               {children}
               <Caret location="top-left" />
-            </Box>
+            </BorderBox>
           </React.Fragment>
         )}
       </Flex>

src/__tests__/BorderBox.js

@@ -1,20 +1,24 @@
 import React from 'react'
-import {colors} from '../theme'
+import theme, {colors} from '../theme'
 import BorderBox from '../BorderBox'
-import Box from '../Box'
 import {render} from '../utils/testing'
 
 describe('BorderBox', () => {
   it('is a system component', () => {
     expect(BorderBox.systemComponent).toEqual(true)
   })
 
-  it('renders a Box with default props', () => {
-    expect(render(<BorderBox />)).toEqual(render(<Box {...BorderBox.defaultProps} />))
-  })
-
   it('renders borders', () => {
     expect(render(<BorderBox borderColor="green.5" />)).toHaveStyleRule('border-color', colors.green[5])
     expect(render(<BorderBox borderBottom={0} />)).toHaveStyleRule('border-bottom', '0')
   })
+
+  it('renders border radius', () => {
+    expect(render(<BorderBox borderRadius={2} />)).toHaveStyleRule('border-radius', `${theme.radii[2]}px`)
+  })
+
+  // the test returns the box shadow value without spaces, so had to manually provide the expected string here
+  it('renders box shadow', () => {
+    expect(render(<BorderBox boxShadow="small" />)).toHaveStyleRule('box-shadow', '0 1px 1px rgba(27,31,35,0.1)')
+  })
 })

src/__tests__/Box.js

@@ -30,21 +30,6 @@ describe('Box', () => {
     expect(render(<Box p={[1, 1, 1, 3]} theme={theme} />)).toMatchSnapshot()
   })
 
-  describe('borders', () => {
-    it('handles border prop', () => {
-      expect(render(<Box border={1} theme={theme} />)).toMatchSnapshot()
-    })
-    it('handles a single border edge', () => {
-      expect(render(<Box borderLeft={1} borderColor="green.5" theme={theme} />)).toMatchSnapshot()
-    })
-    it('handles multiple border edges', () => {
-      expect(render(<Box borderLeft={1} borderRight={1} borderColor="gray.2" theme={theme} />)).toMatchSnapshot()
-    })
-    it('handles just a border color', () => {
-      expect(render(<Box borderColor="red.5" theme={theme} />)).toMatchSnapshot()
-    })
-  })
-
   it('respects display', () => {
     expect(render(<Box display="inline" />)).toMatchSnapshot()
     expect(render(<Box display="inline-block" />)).toMatchSnapshot()
@@ -56,11 +41,4 @@ describe('Box', () => {
     expect(render(<Box position="absolute" />)).toMatchSnapshot()
     expect(render(<Box position="relative" />)).toMatchSnapshot()
   })
-
-  it('renders shadow', () => {
-    expect(render(<Box boxShadow="small" theme={theme} />)).toMatchSnapshot()
-    expect(render(<Box boxShadow="medium" theme={theme} />)).toMatchSnapshot()
-    expect(render(<Box boxShadow="large" theme={theme} />)).toMatchSnapshot()
-    expect(render(<Box boxShadow="extra-large" theme={theme} />)).toMatchSnapshot()
-  })
 })

src/__tests__/__snapshots__/Box.js.snap

@@ -1,48 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Box borders handles a single border edge 1`] = `
-.emotion-0 {
-  border-left: 1px solid;
-  border-color: #28a745;
-}
-
-<div
-  className="emotion-0"
-/>
-`;
-
-exports[`Box borders handles border prop 1`] = `
-.emotion-0 {
-  border: 1px solid;
-}
-
-<div
-  className="emotion-0"
-/>
-`;
-
-exports[`Box borders handles just a border color 1`] = `
-.emotion-0 {
-  border-color: #d73a49;
-}
-
-<div
-  className="emotion-0"
-/>
-`;
-
-exports[`Box borders handles multiple border edges 1`] = `
-.emotion-0 {
-  border-right: 1px solid;
-  border-left: 1px solid;
-  border-color: #e1e4e8;
-}
-
-<div
-  className="emotion-0"
-/>
-`;
-
 exports[`Box renders margin 1`] = `
 .emotion-0 {
   margin: 4px;
@@ -175,46 +132,6 @@ exports[`Box renders padding 3`] = `
 />
 `;
 
-exports[`Box renders shadow 1`] = `
-.emotion-0 {
-  box-shadow: 0 1px 1px rgba(27,31,35,0.1);
-}
-
-<div
-  className="emotion-0"
-/>
-`;
-
-exports[`Box renders shadow 2`] = `
-.emotion-0 {
-  box-shadow: 0 1px 5px rgba(27,31,35,0.15);
-}
-
-<div
-  className="emotion-0"
-/>
-`;
-
-exports[`Box renders shadow 3`] = `
-.emotion-0 {
-  box-shadow: 0 1px 15px rgba(27,31,35,0.15);
-}
-
-<div
-  className="emotion-0"
-/>
-`;
-
-exports[`Box renders shadow 4`] = `
-.emotion-0 {
-  box-shadow: 0 10px 50px rgba(27,31,35,0.07);
-}
-
-<div
-  className="emotion-0"
-/>
-`;
-
 exports[`Box renders without any props 1`] = `
 <div
   className="emotion-0"

src/__tests__/__snapshots__/Dropdown.js.snap

@@ -29,14 +29,14 @@ exports[`Dropdown matches the snapshots 1`] = `
   position: absolute;
   z-index: 99999;
   background-color: #fff;
+  border: 1px solid;
+  border-color: #e1e4e8;
+  border-radius: 3px;
   margin-top: 4px;
   padding-left: 16px;
   padding-right: 16px;
   padding-top: 8px;
   padding-bottom: 8px;
-  border: 1px solid;
-  border-color: #e1e4e8;
-  border-radius: 3px;
   box-shadow: 0 1px 1px rgba(27,31,35,0.1);
 }
 
@@ -178,14 +178,14 @@ exports[`Dropdown matches the snapshots 2`] = `
   position: absolute;
   z-index: 99999;
   background-color: #fff;
+  border: 1px solid;
+  border-color: #e1e4e8;
+  border-radius: 3px;
   margin-top: 4px;
   padding-left: 16px;
   padding-right: 16px;
   padding-top: 8px;
   padding-bottom: 8px;
-  border: 1px solid;
-  border-color: #e1e4e8;
-  border-radius: 3px;
   box-shadow: 0 1px 1px rgba(27,31,35,0.1);
 }
 

src/system-props.js

@@ -18,10 +18,6 @@ export const TYPOGRAPHY = COMMON.concat(
 
 export const LAYOUT = COMMON.concat(
   // layout props
-  'borders',
-  'borderColor',
-  'borderRadius',
-  'boxShadow',
   'display',
   'size',
   'width',