[EuiFlexGrid] Remove columns={0} as an option

src-docs/src/views/flex/flex_align_center.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components';
+
+export default () => (
+  <EuiFlexGroup alignItems="center">
+    <EuiFlexItem grow={false}>
+      <p>I</p>
+      <p>am</p>
+      <p>a</p>
+      <p>tall</p>
+      <p>item</p>
+    </EuiFlexItem>
+    <EuiFlexItem>I am vertically centered!</EuiFlexItem>
+  </EuiFlexGroup>
+);

src-docs/src/views/flex/flex_item_panel.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import {
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiPanel,
+  EuiCode,
+  EuiText,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiText>
+        <p>
+          <EuiCode>FlexItem</EuiCode>
+        </p>
+        <p>A side nav might be in this one.</p>
+        <p>And you would want the panel on the right to expand with it.</p>
+      </EuiText>
+    </EuiFlexItem>
+
+    <EuiFlexItem>
+      <EuiPanel>
+        <strong>EuiPanel</strong>
+      </EuiPanel>
+    </EuiFlexItem>
+
+    <EuiFlexItem>
+      <EuiPanel grow={false}>
+        Another <strong>EuiPanel</strong>, with{' '}
+        <EuiCode>grow=&#123;false&#125;</EuiCode>.
+      </EuiPanel>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);

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

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components';
+
+export default () => (
+  <EuiFlexGroup justifyContent="spaceAround">
+    <EuiFlexItem grow={false}>I&rsquo;m a single centered item!</EuiFlexItem>
+  </EuiFlexGroup>
+);

src-docs/src/views/flex/flex_justify_between.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components';
+
+export default () => (
+  <EuiFlexGroup justifyContent="spaceBetween">
+    <EuiFlexItem grow={false}>One here on the left.</EuiFlexItem>
+    <EuiFlexItem grow={false}>The other over here on the right.</EuiFlexItem>
+  </EuiFlexGroup>
+);

src-docs/src/views/flex/flex_justify_evenly.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components';
+
+export default () => (
+  <EuiFlexGroup justifyContent="spaceEvenly">
+    <EuiFlexItem grow={false}>Spaced evenly between this one.</EuiFlexItem>
+    <EuiFlexItem grow={false}>And this one here on the right.</EuiFlexItem>
+  </EuiFlexGroup>
+);

src/components/flex/__snapshots__/flex_grid.test.tsx.snap

@@ -12,12 +12,6 @@ exports[`EuiFlexGrid is rendered 1`] = `
 </div>
 `;
 
-exports[`EuiFlexGrid props columns 0 is rendered 1`] = `
-<div
-  class="euiFlexGrid emotion-euiFlexGrid-l-noColumns-responsive"
-/>
-`;
-
 exports[`EuiFlexGrid props columns 1 is rendered 1`] = `
 <div
   class="euiFlexGrid emotion-euiFlexGrid-l-row-1-responsive"
@@ -44,48 +38,48 @@ exports[`EuiFlexGrid props columns 4 is rendered 1`] = `
 
 exports[`EuiFlexGrid props direction column is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-l-noColumns-responsive"
+  class="euiFlexGrid emotion-euiFlexGrid-l-column-1-responsive"
 />
 `;
 
 exports[`EuiFlexGrid props direction row is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-l-noColumns-responsive"
+  class="euiFlexGrid emotion-euiFlexGrid-l-row-1-responsive"
 />
 `;
 
 exports[`EuiFlexGrid props gutterSize l is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-l-noColumns-responsive"
+  class="euiFlexGrid emotion-euiFlexGrid-l-row-1-responsive"
 />
 `;
 
 exports[`EuiFlexGrid props gutterSize m is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-m-noColumns-responsive"
+  class="euiFlexGrid emotion-euiFlexGrid-m-row-1-responsive"
 />
 `;
 
 exports[`EuiFlexGrid props gutterSize none is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-none-noColumns-responsive"
+  class="euiFlexGrid emotion-euiFlexGrid-none-row-1-responsive"
 />
 `;
 
 exports[`EuiFlexGrid props gutterSize s is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-s-noColumns-responsive"
+  class="euiFlexGrid emotion-euiFlexGrid-s-row-1-responsive"
 />
 `;
 
 exports[`EuiFlexGrid props gutterSize xl is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-xl-noColumns-responsive"
+  class="euiFlexGrid emotion-euiFlexGrid-xl-row-1-responsive"
 />
 `;
 
 exports[`EuiFlexGrid props responsive is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-l-noColumns"
+  class="euiFlexGrid emotion-euiFlexGrid-l-row-1"
 />
 `;

src/components/flex/flex_grid.styles.ts

@@ -49,25 +49,6 @@ export const euiFlexGridStyles = (
         grid-template-columns: repeat(4, 1fr);
       `,
     },
-    // It's basically not a grid at all with zero columns.
-    // Honestly, I'm not totally sure what the use case is for this
-    zeroColumns: {
-      noColumns: css`
-        display: flex;
-        flex-wrap: wrap;
-
-        & > .euiFlexItem {
-          flex-grow: 0;
-        }
-      `,
-      responsive: css`
-        ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
-          & > .euiFlexItem {
-            flex-basis: 100%;
-          }
-        }
-      `,
-    },
     gutterSizes: {
       none: css``,
       s: css`

src/components/flex/flex_grid.test.tsx

@@ -38,7 +38,7 @@ describe('EuiFlexGrid', () => {
     });
 
     describe('columns', () => {
-      ([0, 1, 2, 3, 4] as const).forEach((value) => {
+      ([1, 2, 3, 4] as const).forEach((value) => {
         test(`${value} is rendered`, () => {
           const component = render(<EuiFlexGrid columns={value} />);
 

src/components/flex/flex_grid.tsx

@@ -30,21 +30,20 @@ export interface EuiFlexGridProps {
    */
   children?: ReactNode;
   /**
-   * Number of columns `1-4`, pass `0` for normal display
+   * Number of columns. Accepts `1-4`
    */
-  columns?: 0 | 1 | 2 | 3 | 4; // Leave this as inline so the props table correctly parses it
+  columns?: 1 | 2 | 3 | 4; // Leave this as inline so the props table correctly parses it
   /**
    * Flex layouts default to left-right then top-down (`row`).
    * Change this prop to `column` to create a top-down then left-right display.
-   * Only works with column count of `1-4`.
    */
   direction?: FlexGridDirection;
   /**
    * Space between flex items
    */
   gutterSize?: FlexGridGutterSize;
   /**
-   * Force each item to be display block on smaller screens
+   * Will display each item at full-width on smaller screens
    */
   responsive?: boolean;
 
@@ -63,7 +62,7 @@ export const EuiFlexGrid: FunctionComponent<
   gutterSize = 'l',
   direction = 'row',
   responsive = true,
-  columns = 0,
+  columns = 1,
   component: Component = 'div',
   ...rest
 }) => {
@@ -77,9 +76,9 @@ export const EuiFlexGrid: FunctionComponent<
   const cssStyles = [
     styles.euiFlexGrid,
     styles.gutterSizes[gutterSize],
-    columns && styles.direction[direction],
-    columns ? styles.columnCount[columns] : styles.zeroColumns.noColumns,
-    responsive && (columns ? styles.responsive : styles.zeroColumns.responsive),
+    styles.direction[direction],
+    styles.columnCount[columns],
+    responsive && styles.responsive,
   ];
 
   const classes = classNames('euiFlexGrid', className);

upcoming_changelogs/6270.md

@@ -2,9 +2,10 @@
 
 **Breaking changes**
 
+- `EuiFlexGrid` no longer supports `columns={0}`. Use `EuiFlexGroup` instead for normal flex display
+- `EuiFlexGrid` now uses modern `display: grid` CSS
 - `EuiFlexGroup`, `EuiFlexGrid`, and `EuiFlexItem` now use modern `gap` CSS instead of margins and negative margins
 - `EuiFlexGroup` no longer applies responsive styles to `column` or `columnReverse` directions
-- `EuiFlexGrid` now uses modern `display: grid` CSS
 
 **CSS-in-JS conversions**