Add support for wrap prop to FlexGroup

CHANGELOG.md

@@ -10,6 +10,7 @@
 - Convert icons from SVG to React component during the build and stop using
   sprites [(#160)](https://github.com/elastic/eui/pull/160)
 - Add `isReadOnly`, `setOptions`, and `cursorStart` props to  `<EuiCodeEditor>` ([#169](https://github.com/elastic/eui/pull/169))
+- Add `wrap` prop to `<EuiFlexGroup>` ([#170](https://github.com/elastic/eui/pull/170))
 
 **Bug fixes**
 

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={[{

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>
+);

src/components/flex/_flex_group.scss

@@ -6,59 +6,62 @@
     flex-grow: 1;
     flex-basis: 0;
   }
+}
 
-  // Gutter Sizes
-  &.euiFlexGroup--gutterExtraSmall > .euiFlexItem + .euiFlexItem {
-    margin-left: $euiSizeXS;
-  }
-
-  &.euiFlexGroup--gutterSmall > .euiFlexItem + .euiFlexItem {
-    margin-left: $euiSizeS;
-  }
+$gutterTypes: (
+  gutterExtraSmall: $euiSizeXS,
+  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 {

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,
 };