🔅 Add flex properties to Box directly instead of Flex

gilbarbara · Dec 16, 2018 · 94e8ecf · 94e8ecf
1 parent 061082d
commit 94e8ecf
Show file tree

Hide file tree

Showing 5 changed files with 341 additions and 35 deletions.
diff --git a/src/Box.jsx b/src/Box.jsx
@@ -1,8 +1,9 @@
-import React from 'react'; //eslint-disable-line no-unused-vars
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 import {
+  alignContent,
+  alignItems,
   alignSelf,
   backgroundImage,
   borders,
@@ -11,11 +12,15 @@ import {
   color,
   display,
   flex,
+  flexBasis,
+  flexDirection,
+  flexWrap,
   fontFamily,
   fontSize,
   fontStyle,
   fontWeight,
   height,
+  justifyContent,
   left,
   lineHeight,
   maxHeight,
@@ -39,6 +44,8 @@ export const Box = styled.div(
   {
     boxSizing: 'border-box',
   },
+  alignContent,
+  alignItems,
   alignSelf,
   backgroundImage,
   borders,
@@ -47,13 +54,17 @@ export const Box = styled.div(
   color,
   display,
   flex,
+  flexBasis,
+  flexDirection,
+  flexWrap,
   fontFamily,
   fontSize,
   fontStyle,
   fontWeight,
-  lineHeight,
   height,
+  justifyContent,
   left,
+  lineHeight,
   maxHeight,
   maxWidth,
   minHeight,
@@ -76,6 +87,8 @@ Box.propTypes = {
   as: PropTypes.string,
   children: PropTypes.node,
   textTransform: PropTypes.string,
+  ...alignContent.propTypes,
+  ...alignItems.propTypes,
   ...alignSelf.propTypes,
   ...backgroundImage.propTypes,
   ...borders.propTypes,
@@ -84,10 +97,14 @@ Box.propTypes = {
   ...color.propTypes,
   ...display.propTypes,
   ...flex.propTypes,
+  ...flexBasis.propTypes,
+  ...flexDirection.propTypes,
+  ...flexWrap.propTypes,
   ...fontFamily.propTypes,
   ...fontSize.propTypes,
   ...fontWeight.propTypes,
   ...height.propTypes,
+  ...justifyContent.propTypes,
   ...left.propTypes,
   ...maxHeight.propTypes,
   ...maxWidth.propTypes,

diff --git a/src/Flex.jsx b/src/Flex.jsx
@@ -1,42 +1,22 @@
-import React from 'react'; //eslint-disable-line no-unused-vars
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import {
-  alignContent,
-  alignItems,
-  flexBasis,
-  flexDirection,
-  flexWrap,
-  justifyContent,
-} from 'styled-system';
-
 import Box from './Box';
 
-export const Flex = styled(Box)(
-  {
-    display: 'flex',
-  },
-  alignContent,
-  alignItems,
-  flexBasis,
-  flexDirection,
-  flexWrap,
-  justifyContent,
-);
+export const Flex = styled(Box)({
+  display: 'flex',
+});
 
 Flex.displayName = 'Flex';
 
 Flex.propTypes = {
   as: PropTypes.string,
   children: PropTypes.node.isRequired,
-  ...alignContent.propTypes,
-  ...alignItems.propTypes,
-  ...flexBasis.propTypes,
-  ...flexDirection.propTypes,
-  ...flexWrap.propTypes,
-  ...justifyContent.propTypes,
   ...Box.propTypes,
 };
 
+Flex.defaultProps = {
+  alignItems: 'center',
+};
+
 export default Flex;
diff --git a/test/__snapshots__/Flex.spec.js.snap b/test/__snapshots__/Flex.spec.js.snap
@@ -7,13 +7,19 @@ exports[`Flex should render properly 1`] = `
 
 .c0 {
   box-sizing: border-box;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-<Flex>
+<Flex
+  alignItems="center"
+>
   <div
     className="c0"
   >

diff --git a/test/__snapshots__/FormGroup.spec.js.snap b/test/__snapshots__/FormGroup.spec.js.snap
@@ -3,14 +3,14 @@
 exports[`FormGroup should render properly 1`] = `
 .c2 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
 }
 
 .c0 {