Add support for wrap prop to FlexGroup

* Loop through FlexGroup gutter size modifiers. * Add wrap prop to FlexGroup.
elastic · Nov 30, 2017 · 7a607db · 7a607db
1 parent 4cd31d9
commit 7a607db
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 39 deletions.
diff --git a/src-docs/src/views/flex/flex_example.js b/src-docs/src/views/flex/flex_example.js
@@ -20,6 +20,10 @@ import FlexGroup from './flex_group';
 const flexGroupSource = require('!!raw-loader!./flex_group');
 const flexGroupHtml = renderToHtml(FlexGroup);
 
+import FlexGroupWrap from './flex_group_wrap';
+const flexGroupWrapSource = require('!!raw-loader!./flex_group_wrap');
+const flexGroupWrapHtml = renderToHtml(FlexGroupWrap);
+
 import FlexItems from './flex_items';
 const flexItemsSource = require('!!raw-loader!./flex_items');
 const flexItemsHtml = renderToHtml(FlexItems);
@@ -100,6 +104,27 @@ export default props => (
       }
     />
 
+    <GuideSection
+      title="FlexGroup can wrap its items"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: flexGroupWrapSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: flexGroupWrapHtml,
+      }]}
+      text={
+        <p>
+          You can set <EuiCode>wrap</EuiCode> on <EuiCode>FlexGroup</EuiCode> if it
+          contains <EuiCode>FlexItem</EuiCode>s with minimum widths, which you want to wrap as
+          the container becomes narrower.
+        </p>
+      }
+      demo={
+        <div className="guideDemo__highlightGrid"><FlexGroupWrap /></div>
+      }
+    />
+
     <GuideSection
       title="FlexGroup accepts infinite items"
       source={[{

diff --git a/src-docs/src/views/flex/flex_group_wrap.js b/src-docs/src/views/flex/flex_group_wrap.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiFlexGroup wrap>
+    <EuiFlexItem style={{ minWidth: 300 }}>
+      Min-width 300px
+    </EuiFlexItem>
+
+    <EuiFlexItem style={{ minWidth: 300 }}>
+      Min-width 300px
+    </EuiFlexItem>
+
+    <EuiFlexItem style={{ minWidth: 300 }}>
+      Min-width 300px
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);
diff --git a/src/components/flex/_flex_group.scss b/src/components/flex/_flex_group.scss
@@ -6,59 +6,61 @@
     flex-grow: 1;
     flex-basis: 0;
   }
+}
 
-  // Gutter Sizes
-  &.euiFlexGroup--gutterExtraSmall > .euiFlexItem + .euiFlexItem {
-    margin-left: $euiSizeXS;
-  }
-
-  &.euiFlexGroup--gutterSmall > .euiFlexItem + .euiFlexItem {
-    margin-left: $euiSizeS;
-  }
+$gutterTypes: (
+  gutterSmall: $euiSizeS,
+  gutterMedium: $euiSize,
+  gutterLarge: $euiSizeL,
+  gutterExtraLarge: $euiSizeXXL,
+);
 
-  &.euiFlexGroup--gutterMedium > .euiFlexItem + .euiFlexItem {
-    margin-left: $euiSize;
-  }
+// Gutter Sizes
+@each $gutterName, $gutterSize in $gutterTypes {
+  $halfGutterSize: $gutterSize * 0.5;
 
-  &.euiFlexGroup--gutterLarge > .euiFlexItem + .euiFlexItem {
-    margin-left: $euiSizeL;
-  }
+  &.euiFlexGroup--#{$gutterName} {
+    margin: -$halfGutterSize;
 
-  &.euiFlexGroup--gutterExtraLarge > .euiFlexItem + .euiFlexItem {
-    margin-left: $euiSizeXXL;
+    & > .euiFlexItem {
+      margin: $halfGutterSize;
+    }
   }
+}
 
-  // Justify the grid
-  &.euiFlexGroup--justifyContentSpaceBetween {
-    justify-content: space-between;
-  }
+// Justify the grid
+.euiFlexGroup--justifyContentSpaceBetween {
+  justify-content: space-between;
+}
 
-  &.euiFlexGroup--justifyContentSpaceAround {
-    justify-content: space-around;
-  }
+.euiFlexGroup--justifyContentSpaceAround {
+  justify-content: space-around;
+}
 
-  &.euiFlexGroup--justifyContentCenter {
-    justify-content: center;
-  }
+.euiFlexGroup--justifyContentCenter {
+  justify-content: center;
+}
 
-  &.euiFlexGroup--justifyContentFlexEnd {
-    justify-content: flex-end;
-  }
+.euiFlexGroup--justifyContentFlexEnd {
+  justify-content: flex-end;
+}
 
-  // Align Items
-  &.euiFlexGroup--alignItemsStart {
-    align-items: flex-start;
-  }
+// Align Items
+.euiFlexGroup--alignItemsStart {
+  align-items: flex-start;
+}
 
-  &.euiFlexGroup--alignItemsCenter {
-    align-items: center;
-  }
+.euiFlexGroup--alignItemsCenter {
+  align-items: center;
+}
 
-  &.euiFlexGroup--alignItemsEnd {
-    align-items: flex-end;
-  }
+.euiFlexGroup--alignItemsEnd {
+  align-items: flex-end;
 }
 
+.euiFlexGroup--wrap {
+  flex-wrap: wrap;
+}
 
 @include screenXSmall {
   .euiFlexGroup--responsive {

diff --git a/src/components/flex/flex_group.js b/src/components/flex/flex_group.js
@@ -39,6 +39,7 @@ export const EuiFlexGroup = ({
   alignItems,
   responsive,
   justifyContent,
+  wrap,
   component: Component,
   ...rest,
 }) => {
@@ -49,6 +50,7 @@ export const EuiFlexGroup = ({
     justifyContentToClassNameMap[justifyContent],
     {
       'euiFlexGroup--responsive': responsive,
+      'euiFlexGroup--wrap': wrap,
     },
     className
   );
@@ -71,6 +73,7 @@ EuiFlexGroup.propTypes = {
   alignItems: PropTypes.oneOf(ALIGN_ITEMS),
   justifyContent: PropTypes.oneOf(JUSTIFY_CONTENTS),
   component: PropTypes.oneOf(['div', 'span']),
+  wrap: PropTypes.bool,
 };
 
 EuiFlexGroup.defaultProps = {
@@ -79,4 +82,5 @@ EuiFlexGroup.defaultProps = {
   responsive: true,
   justifyContent: 'flexStart',
   component: 'div',
+  wrap: false,
 };