feat(atoms): add offsets to the FlexLayout

8base · Aug 23, 2018 · 494ab53 · 494ab53
1 parent 89c6cb6
commit 494ab53
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/src/atoms/FlexLayout/FlexLayout.js b/src/atoms/FlexLayout/FlexLayout.js
@@ -26,6 +26,10 @@ export type FlexLayoutCommonProps = {|
   gap?: PropSizes,
   offsetX?: PropSizes,
   offsetY?: PropSizes,
+  offsetTop?: PropSizes,
+  offsetBottom?: PropSizes,
+  offsetLeft?: PropSizes,
+  offsetRight?: PropSizes,
   cursor?: 'pointer' | 'default' | 'inherit',
   stretch?: boolean,
   grow?: boolean,

diff --git a/src/atoms/FlexLayout/FlexLayout.theme.js b/src/atoms/FlexLayout/FlexLayout.theme.js
@@ -4,13 +4,13 @@ import { createStyledTag } from '../../utils';
 
 const name = 'flex-layout';
 
-const offestSizes = {
+const paddingSizes = {
   none: '0',
   xs: '0.5rem',
   sm: '1rem',
   md: '1.5rem',
   lg: '2rem',
-  xl: '2.5rem',
+  xl: '3rem',
 };
 
 const gapSizes = {
@@ -19,7 +19,7 @@ const gapSizes = {
   sm: '1rem',
   md: '1.5rem',
   lg: '2rem',
-  xl: '2.5rem',
+  xl: '3rem',
 };
 
 const justifyContentStyles = {
@@ -73,6 +73,11 @@ const getGrowChildrenStyles = (growChildren: boolean) =>
     }
     : {};
 
+const getGrowStyles = (grow: boolean) =>
+  grow
+    ? { flexGrow: '1' }
+    : {};
+
 const FlexLayoutTag = createStyledTag(name, props => ({
   display: 'flex',
 
@@ -82,17 +87,17 @@ const FlexLayoutTag = createStyledTag(name, props => ({
   alignContent: alignContentStyles[props.alignContent],
   alignItems: alignItemsStyles[props.alignItems],
 
-  paddingLeft: offestSizes[props.offsetX],
-  paddingRight: offestSizes[props.offsetX],
-  paddingTop: offestSizes[props.offsetY],
-  paddingBottom: offestSizes[props.offsetY],
+  paddingLeft: paddingSizes[props.offsetX] || paddingSizes[props.offsetLeft],
+  paddingRight: paddingSizes[props.offsetX] || paddingSizes[props.offsetRight],
+  paddingTop: paddingSizes[props.offsetY] || paddingSizes[props.offsetTop],
+  paddingBottom: paddingSizes[props.offsetY] || paddingSizes[props.offsetBottom],
 
   cursor: props.cursor,
-  flexGrow: props.grow && '1',
 
   ...getGapStyle(props.direction, props.gap),
   ...getStretchStyles(props.stretch),
   ...getGrowChildrenStyles(props.growChildren),
+  ...getGrowStyles(props.grow),
 }));
 
 FlexLayoutTag.defaultProps = {