Add numbers between 1 and 10 for flexGrow (#144)

* Add numbers between 1 and 10 for flexGrow

* Parse grow prop better

* Add more granular prop type checking to FlexItem and expand doc

* Add changelog entry

* Switch string to interpolated

* Be explicit with grow prop className building

* Clean up double-brs in docs

CHANGELOG.md

@@ -1,6 +1,7 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
 - Add `isLoading` prop to form inputs to allow for a loading state [(#150)](https://github.com/elastic/eui/pull/150)
+- `<EuiFlexItem>` now accepts integers between 1 and 10 for the `grow` prop. [(#144)](https://github.com/elastic/eui/pull/144)
 
 # [`0.0.2`](https://github.com/elastic/eui/tree/v0.0.2)
 

src-docs/src/views/flex/flex_example.js

@@ -28,9 +28,13 @@ import FlexGutter from './flex_gutter';
 const flexGutterSource = require('!!raw-loader!./flex_gutter');
 const flexGutterHtml = renderToHtml(FlexGutter);
 
-import FlexGrow from './flex_grow';
-const flexGrowSource = require('!!raw-loader!./flex_grow');
-const flexGrowHtml = renderToHtml(FlexGrow);
+import FlexGrowZero from './flex_grow_zero';
+const flexGrowZeroSource = require('!!raw-loader!./flex_grow_zero');
+const flexGrowZeroHtml = renderToHtml(FlexGrowZero);
+
+import FlexGrowNumeric from './flex_grow_numeric';
+const flexGrowNumericSource = require('!!raw-loader!./flex_grow_numeric');
+const flexGrowNumericHtml = renderToHtml(FlexGrowNumeric);
 
 import FlexJustify from './flex_justify';
 const flexJustifySource = require('!!raw-loader!./flex_justify');
@@ -136,10 +140,10 @@ export default props => (
       title="FlexItem can individually turn off stretching"
       source={[{
         type: GuideSectionTypes.JS,
-        code: flexGrowSource,
+        code: flexGrowZeroSource,
       }, {
         type: GuideSectionTypes.HTML,
-        code: flexGrowHtml,
+        code: flexGrowZeroHtml,
       }]}
       text={
         <p>
@@ -148,7 +152,27 @@ export default props => (
         </p>
       }
       demo={
-        <div className="guideDemo__highlightGrid"><FlexGrow /></div>
+        <div className="guideDemo__highlightGrid"><FlexGrowZero /></div>
+      }
+    />
+
+    <GuideSection
+      title="FlexItem can specify a proportional width"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: flexGrowNumericSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: flexGrowNumericHtml,
+      }]}
+      text={
+        <p>
+          You can specify a number between 1 and 10 for a <EuiCode>FlexItem</EuiCode> to
+          try to take up a proportional part of the flex box it is in.
+        </p>
+      }
+      demo={
+        <div className="guideDemo__highlightGrid"><FlexGrowNumeric /></div>
       }
     />
 

src-docs/src/views/flex/flex_group.js

@@ -3,15 +3,15 @@ import React from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
+  EuiSpacer,
 } from '../../../../src/components';
 
 export default () => (
   <EuiFlexGroup>
     <EuiFlexItem>Content grid item</EuiFlexItem>
     <EuiFlexItem>
       <p>Another content grid item</p>
-      <br/>
-      <br/>
+      <EuiSpacer />
       <p>Note how both of these are the same width and height despite having different content?</p>
     </EuiFlexItem>
   </EuiFlexGroup>

src-docs/src/views/flex/flex_grow_numeric.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiFlexGroup>
+      <EuiFlexItem grow={1}>1</EuiFlexItem>
+      <EuiFlexItem grow={2}>2<br />wraps content if necessary</EuiFlexItem>
+      <EuiFlexItem grow={3}>3<br />expands_to_fit_if_content_cannot_wrap</EuiFlexItem>
+      <EuiFlexItem grow={4}>4</EuiFlexItem>
+    </EuiFlexGroup>
+
+    <EuiSpacer />
+
+    <EuiFlexGroup>
+      <EuiFlexItem grow={6}>6</EuiFlexItem>
+      <EuiFlexItem grow={3}>3</EuiFlexItem>
+      <EuiFlexItem grow={1}>1</EuiFlexItem>
+      <EuiFlexItem grow={3}>3</EuiFlexItem>
+      <EuiFlexItem grow={6}>6</EuiFlexItem>
+    </EuiFlexGroup>
+  </div>
+);

src-docs/src/views/flex/flex_gutter.js

@@ -3,6 +3,7 @@ import React from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
+  EuiSpacer,
 } from '../../../../src/components';
 
 export default () => (
@@ -14,8 +15,7 @@ export default () => (
       <EuiFlexItem>None</EuiFlexItem>
     </EuiFlexGroup>
 
-    <br/>
-    <br/>
+    <EuiSpacer />
 
     <EuiFlexGroup gutterSize="s">
       <EuiFlexItem>Small</EuiFlexItem>
@@ -24,8 +24,7 @@ export default () => (
       <EuiFlexItem>Small</EuiFlexItem>
     </EuiFlexGroup>
 
-    <br/>
-    <br/>
+    <EuiSpacer />
 
     <EuiFlexGroup gutterSize="m">
       <EuiFlexItem>Medium</EuiFlexItem>
@@ -34,8 +33,7 @@ export default () => (
       <EuiFlexItem>Medium</EuiFlexItem>
     </EuiFlexGroup>
 
-    <br/>
-    <br/>
+    <EuiSpacer />
 
     <EuiFlexGroup gutterSize="l">
       <EuiFlexItem>Large (default)</EuiFlexItem>
@@ -44,8 +42,7 @@ export default () => (
       <EuiFlexItem>Large (default)</EuiFlexItem>
     </EuiFlexGroup>
 
-    <br/>
-    <br/>
+    <EuiSpacer />
 
     <EuiFlexGroup gutterSize="xl">
       <EuiFlexItem>Extra Large</EuiFlexItem>

src-docs/src/views/flex/flex_justify.js

@@ -4,6 +4,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiText,
+  EuiSpacer,
 } from '../../../../src/components';
 
 export default () => (
@@ -13,13 +14,13 @@ export default () => (
       <EuiFlexItem grow={false}>The other over here on the right.</EuiFlexItem>
     </EuiFlexGroup>
 
-    <br/><br/>
+    <EuiSpacer />
 
     <EuiFlexGroup justifyContent="spaceAround">
       <EuiFlexItem grow={false}>I&rsquo;m a single centered item!</EuiFlexItem>
     </EuiFlexGroup>
 
-    <br/><br/>
+    <EuiSpacer />
 
     <EuiFlexGroup alignItems="center">
       <EuiFlexItem grow={false}>

src-docs/src/views/flex/flex_nest.js

@@ -4,6 +4,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlexGrid,
+  EuiSpacer,
 } from '../../../../src/components';
 
 export default () => (
@@ -12,7 +13,7 @@ export default () => (
       <EuiFlexItem grow={false}>Group One</EuiFlexItem>
       <EuiFlexItem grow={false}>
         <div>Group Two</div>
-        <br/><br/>
+        <EuiSpacer />
         <EuiFlexGrid columns={3}>
           <EuiFlexItem>Nested Grid One</EuiFlexItem>
           <EuiFlexItem>Nested Grid Two</EuiFlexItem>

src/components/flex/_flex_item.scss

@@ -13,6 +13,12 @@
     flex-grow: 0; /* 2 */
     flex-basis: auto; /* 2 */
   }
+
+  @for $i from 1 through 10 {
+    &.euiFlexItem--flexGrow#{$i} {
+      flex-grow: $i
+    }
+  }
 }
 
 // On mobile we force them to stack and act the same.

src/components/flex/flex_item.js

@@ -2,11 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+const validGrowNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
 export const EuiFlexItem = ({ children, className, grow, ...rest }) => {
   const classes = classNames(
     'euiFlexItem',
     {
       'euiFlexItem--flexGrowZero': !grow,
+      [`euiFlexItem--flexGrow${grow}`]: validGrowNumbers.indexOf(grow) >= 0
     },
     className
   );
@@ -23,9 +26,25 @@ export const EuiFlexItem = ({ children, className, grow, ...rest }) => {
 
 EuiFlexItem.propTypes = {
   children: PropTypes.node,
-  grow: PropTypes.bool,
+  grow: growPropType
 };
 
+function growPropType(props, propName, componentName) {
+  const value = props[propName];
+
+  const validValues = [
+    null, undefined,
+    true, false,
+    ...validGrowNumbers
+  ];
+
+  if (validValues.indexOf(value) === -1) {
+    return new Error(
+      `Prop \`${propName}\` supplied to \`${componentName}\` must be a boolean or an integer between 1 and 10.`
+    );
+  }
+}
+
 EuiFlexItem.defaultProps = {
   grow: true,
 };

src/components/flex/flex_item.test.js

@@ -13,4 +13,18 @@ describe('EuiFlexItem', () => {
     expect(component)
       .toMatchSnapshot();
   });
+
+  test('tests the grow prop correctly', () => {
+    const propType = EuiFlexItem.propTypes.grow;
+
+    const validValues = [undefined, null, true, false, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    const invalidValues = ['true', 'false', '1', 0];
+
+    validValues.forEach(value =>
+      expect(propType({ grow: value }, `grow`)).toBe(undefined)
+    );
+    invalidValues.forEach(value =>
+      expect(propType({ grow: value }, `grow`) instanceof Error).toBe(true)
+    );
+  });
 });