feat(Box): Add new size styleProps (width, height)

Including max/min variants (minHeight, maxHeight, minWidth, maxWidth)

src/Box/index.js

@@ -5,6 +5,7 @@ import {
 	positionProps,
 	displayProps,
 	flexItemProps,
+	sizeProps,
 	marginProps,
 	paddingProps,
 	borderProps,
@@ -15,6 +16,7 @@ const Box = styled.div`
 	${positionProps}
 	${displayProps}
 	${flexItemProps}
+	${sizeProps}
 	${marginProps}
 	${paddingProps}
 	${borderProps}
@@ -30,6 +32,36 @@ Box.propTypes = {
 		PropTypes.oneOf(['block', 'inline', 'inline-block']),
 		PropTypes.array,
 	]),
+	width: PropTypes.oneOfType([
+		PropTypes.number,
+		PropTypes.string,
+		PropTypes.array,
+	]),
+	maxWidth: PropTypes.oneOfType([
+		PropTypes.number,
+		PropTypes.string,
+		PropTypes.array,
+	]),
+	minWidth: PropTypes.oneOfType([
+		PropTypes.number,
+		PropTypes.string,
+		PropTypes.array,
+	]),
+	height: PropTypes.oneOfType([
+		PropTypes.number,
+		PropTypes.string,
+		PropTypes.array,
+	]),
+	maxHeight: PropTypes.oneOfType([
+		PropTypes.number,
+		PropTypes.string,
+		PropTypes.array,
+	]),
+	minHeight: PropTypes.oneOfType([
+		PropTypes.number,
+		PropTypes.string,
+		PropTypes.array,
+	]),
 	border: PropTypes.oneOfType([
 		PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
 		PropTypes.array,

src/styleProps/index.js

@@ -1,6 +1,7 @@
 import borderProps from './borderProps';
 import displayProps from './displayProps';
 import flexItemProps from './flexItemProps';
+import sizeProps from './sizeProps';
 import paddingProps from './paddingProps';
 import positionProps from './positionProps';
 import marginProps from './marginProps';
@@ -10,6 +11,7 @@ export {
 	borderProps,
 	displayProps,
 	flexItemProps,
+	sizeProps,
 	paddingProps,
 	positionProps,
 	marginProps,

src/styleProps/sizeProps.js

@@ -0,0 +1,31 @@
+import {createStyleFunction} from '../utils/styleProps';
+import {getLength} from '../utils';
+
+const sizeProps = createStyleFunction([
+	{
+		styleProp: 'width',
+		getValue: getLength,
+	},
+	{
+		styleProp: 'maxWidth',
+		getValue: getLength,
+	},
+	{
+		styleProp: 'minWidth',
+		getValue: getLength,
+	},
+	{
+		styleProp: 'height',
+		getValue: getLength,
+	},
+	{
+		styleProp: 'maxHeight',
+		getValue: getLength,
+	},
+	{
+		styleProp: 'minHeight',
+		getValue: getLength,
+	},
+]);
+
+export default sizeProps;