fix(atoms): fix flex layout gap

8base · Oct 4, 2018 · c92c079 · c92c079
1 parent e571581
commit c92c079
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/src/atoms/FlexLayout/FlexLayout.theme.js b/src/atoms/FlexLayout/FlexLayout.theme.js
@@ -47,17 +47,13 @@ const alignItemsStyles = {
 const getGapStyle = (direction: 'row' | 'column', gapProp: $Keys<typeof gapSizes>) =>
   direction === 'row'
     ? {
-      '& > *': {
-        '&:not(:last-child)': {
-          marginRight: gapSizes[gapProp],
-        },
+      '&:not(:last-child)': {
+        marginRight: gapSizes[gapProp],
       },
     }
     : {
-      '& > *': {
-        '&:not(:last-child)': {
-          marginBottom: gapSizes[gapProp],
-        },
+      '&:not(:last-child)': {
+        marginBottom: gapSizes[gapProp],
       },
     };
 
@@ -68,9 +64,7 @@ const getStretchStyles = (stretchProp: boolean) =>
 
 const getGrowChildrenStyles = (growChildren: boolean) =>
   growChildren
-    ? {
-      '& > *': { flexGrow: '1' },
-    }
+    ? { flexGrow: '1' }
     : {};
 
 const getGrowStyles = (grow: boolean) =>
@@ -94,10 +88,14 @@ const FlexLayoutTag = createStyledTag(name, props => ({
 
   cursor: props.cursor,
 
-  ...getGapStyle(props.direction, props.gap),
   ...getStretchStyles(props.stretch),
-  ...getGrowChildrenStyles(props.growChildren),
   ...getGrowStyles(props.grow),
+
+  '& > *': {
+    ...getGapStyle(props.direction, props.gap),
+    ...getGrowChildrenStyles(props.growChildren),
+  },
+
 }));
 
 FlexLayoutTag.defaultProps = {

diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
@@ -11197,6 +11197,10 @@ exports[`Storyshots ATOMS/FlexLayout with grow children 1`] = `
   flex-grow: 1;
 }
 
+.emotion-5 > *:not(:last-child) {
+  margin-right: 1rem;
+}
+
 <div
   className="emotion-6"
 >