✨ Add reset styles to Box

Author: exah

src/box/index.js

@@ -14,8 +14,19 @@ import {
 
 import PropTypes from 'prop-types'
 import styled from '@emotion/styled'
+import { css } from '@emotion/core'
 import { createBase, blacklistOf } from '../utils'
 
+const reset = css`
+  box-sizing: border-box;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+`
+
+const initialCSS = (props) => props.initialCSS
+
 const styles = combineStyles(
   box,
   boxStyle,
@@ -34,8 +45,8 @@ const BoxBase = createBase('div', {
 })
 
 const Box = styled(BoxBase)(
-  { boxSizing: 'border-box' },
-  (props) => props.initialCSS,
+  reset,
+  initialCSS,
   styles
 )
 

src/flex-list/index.js

@@ -5,8 +5,6 @@ import { FlexBox } from '../flex-box'
 const FlexList = (props) => (
   <FlexBox
     as='ul'
-    m={0}
-    p={0}
     flexDirection='column'
     initialCSS={{ listStyle: 'none' }}
     {...props}

src/media-object/index.js

@@ -3,25 +3,15 @@ import { FlexBox } from '../flex-box'
 import { Box } from '../box'
 
 const MediaObject = (props) => (
-  <FlexBox
-    alignItems='flex-start'
-    {...props}
-  />
+  <FlexBox {...props} />
 )
 
 const MediaObjectSide = (props) => (
-  <Box
-    flex='0 0 auto'
-    {...props}
-  />
+  <Box flex='0 0 auto' {...props} />
 )
 
 const MediaObjectContent = (props) => (
-  <Box
-    flex='1 1 auto'
-    minWidth={0}
-    {...props}
-  />
+  <Box flex='1 1 auto' {...props} />
 )
 
 Object.assign(MediaObject, {

src/utils.js

@@ -4,7 +4,7 @@ import isPropValid from '@emotion/is-prop-valid'
 import { createBaseFactory } from 'react-styled-base'
 
 export const createBase = createBaseFactory({ filter: isPropValid })
-export const blacklistOf = (styles) => Object.keys(styles.propTypes || {})
+export const blacklistOf = (styles) => Object.keys(Object(styles.propTypes))
 
 export const getDisplayName = (comp, fallback = 'Component') =>
   (isStr(comp) ? comp : (comp.displayName || comp.name || fallback))