feat(FlexLayout): adds flexWrap prop

8base · Mar 26, 2019 · 30edec7 · 30edec7
1 parent 107ff83
commit 30edec7
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/src/components/FlexLayout/FlexLayout.js b/src/components/FlexLayout/FlexLayout.js
@@ -22,6 +22,7 @@ export type FlexLayoutCommonProps = {
   justifyContent?: PropLayoutStretch,
   alignContent?: PropLayout,
   alignItems?: PropLayoutStretch,
+  flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse',
   gap?: PropSizes,
   offsetX?: PropSizes,
   offsetY?: PropSizes,
@@ -53,6 +54,7 @@ FlexLayout.defaultProps = {
   justifyContent: 'start',
   alignContent: 'start',
   alignItems: 'start',
+  flexWrap: 'nowrap',
   offestX: 'none',
   offestY: 'none',
   cursor: 'inherit',

diff --git a/src/components/FlexLayout/FlexLayout.theme.js b/src/components/FlexLayout/FlexLayout.theme.js
@@ -44,7 +44,6 @@ const alignItemsStyles = {
   stretch: 'stretch',
 };
 
-
 const getGapStyle = (direction: 'row' | 'column', gapProp: $Keys<typeof gapSizes>) =>
   direction === 'row'
     ? {
@@ -72,6 +71,7 @@ const [FlexLayoutTag, theme] = createThemeTag(name, {
     justifyContent: justifyContentStyles[props.justifyContent],
     alignContent: alignContentStyles[props.alignContent],
     alignItems: alignItemsStyles[props.alignItems],
+    flexWrap: props.flexWrap,
 
     paddingLeft: paddingSizes[props.offsetX] || paddingSizes[props.offsetLeft],
     paddingRight: paddingSizes[props.offsetX] || paddingSizes[props.offsetRight],

diff --git a/src/components/Form/__snapshots__/Form.test.js.snap b/src/components/Form/__snapshots__/Form.test.js.snap
@@ -9,6 +9,7 @@ exports[`<Form /> should shallow form 1`] = `
     alignItems="stretch"
     cursor="inherit"
     direction="column"
+    flexWrap="nowrap"
     gap="md"
     grow={false}
     growChildren={false}
@@ -84,6 +85,7 @@ exports[`<Form /> should shallow form section 1`] = `
   alignItems="start"
   cursor="inherit"
   direction="column"
+  flexWrap="nowrap"
   gap="sm"
   grow={false}
   growChildren={false}
@@ -103,6 +105,7 @@ exports[`<Form /> should shallow form section body 1`] = `
   alignItems="stretch"
   cursor="inherit"
   direction="column"
+  flexWrap="nowrap"
   gap="md"
   grow={false}
   growChildren={false}