FlexGrid now accepts columns={1} (#1210)

elastic · Sep 24, 2018 · cff4915 · cff4915
1 parent 58b2a99
commit cff4915
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `4.2.0`.
+- Added `1` as a valid value for the `columns` prop in `EuiFlexGrid` ([#1210](https://github.com/elastic/eui/pull/1210))
 
 ## [`4.2.0`](https://github.com/elastic/eui/tree/v4.2.0)
 

diff --git a/src-docs/src/views/flex/flex_example.js b/src-docs/src/views/flex/flex_example.js
@@ -294,7 +294,7 @@ export const FlexExample = {
     text: (
       <p>
         You can set a <EuiCode>columns</EuiCode> prop to specify
-        anywhere between 2-4 columns. Any more would likely break on laptop screens.
+        anywhere between 1-4 columns. Any more would likely break on laptop screens.
       </p>
     ),
     demo: <div className="guideDemo__highlightGridWrap"><FlexGridColumns /></div>,

diff --git a/src/components/flex/__snapshots__/flex_grid.test.js.snap b/src/components/flex/__snapshots__/flex_grid.test.js.snap
@@ -18,6 +18,12 @@ exports[`EuiFlexGrid props columns 0 is rendered 1`] = `
 />
 `;
 
+exports[`EuiFlexGrid props columns 1 is rendered 1`] = `
+<div
+  class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--single euiFlexGrid--responsive"
+/>
+`;
+
 exports[`EuiFlexGrid props columns 2 is rendered 1`] = `
 <div
   class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--halves euiFlexGrid--responsive"

diff --git a/src/components/flex/_flex_grid.scss b/src/components/flex/_flex_grid.scss
@@ -24,6 +24,7 @@ $fractions: (
   fourths: 25%,
   thirds: 33.3%,
   halves: 50%,
+  single: 100%,
 );
 
 @each $gutterName, $gutterSize in $gutterTypes {

diff --git a/src/components/flex/flex_grid.js b/src/components/flex/flex_grid.js
@@ -14,6 +14,7 @@ export const GUTTER_SIZES = Object.keys(gutterSizeToClassNameMap);
 
 const columnsToClassNameMap = {
   0: 'euiFlexGrid--wrap',
+  1: 'euiFlexGrid--single',
   2: 'euiFlexGrid--halves',
   3: 'euiFlexGrid--thirds',
   4: 'euiFlexGrid--fourths',
@@ -46,6 +47,9 @@ EuiFlexGrid.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   gutterSize: PropTypes.oneOf(GUTTER_SIZES),
+  /**
+   * Number of columns to show in the grid. Up to 4.
+   */
   columns: PropTypes.oneOf(COLUMNS).isRequired,
   /**
    * Allow grid items display at block level on small screens