[EuiFlexGrid] Add alignItems prop

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

@@ -56,7 +56,7 @@ export const flexGridConfig = () => {
 
   propsToUse.children = {
     type: PropTypes.ReactNode,
-    value: `<EuiFlexItem><div>One</div></EuiFlexItem>
+    value: `<EuiFlexItem><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div></EuiFlexItem>
 <EuiFlexItem><div>Two</div></EuiFlexItem>
 <EuiFlexItem><div>Three</div></EuiFlexItem>
 <EuiFlexItem><div>Four</div></EuiFlexItem>

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

@@ -3,7 +3,7 @@
 exports[`EuiFlexGrid is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiFlexGrid testClass1 testClass2 emotion-euiFlexGrid-l-row-3-responsive"
+  class="euiFlexGrid testClass1 testClass2 emotion-euiFlexGrid-l-row-stretch-3-responsive"
   data-test-subj="test subject string"
 >
   <h2>
@@ -12,74 +12,104 @@ exports[`EuiFlexGrid is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiFlexGrid props alignItems baseline is rendered 1`] = `
+<div
+  class="euiFlexGrid emotion-euiFlexGrid-l-row-baseline-1-responsive"
+/>
+`;
+
+exports[`EuiFlexGrid props alignItems center is rendered 1`] = `
+<div
+  class="euiFlexGrid emotion-euiFlexGrid-l-row-center-1-responsive"
+/>
+`;
+
+exports[`EuiFlexGrid props alignItems end is rendered 1`] = `
+<div
+  class="euiFlexGrid emotion-euiFlexGrid-l-row-end-1-responsive"
+/>
+`;
+
+exports[`EuiFlexGrid props alignItems start is rendered 1`] = `
+<div
+  class="euiFlexGrid emotion-euiFlexGrid-l-row-start-1-responsive"
+/>
+`;
+
+exports[`EuiFlexGrid props alignItems stretch is rendered 1`] = `
+<div
+  class="euiFlexGrid emotion-euiFlexGrid-l-row-stretch-1-responsive"
+/>
+`;
+
 exports[`EuiFlexGrid props columns 1 is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-l-row-1-responsive"
+  class="euiFlexGrid emotion-euiFlexGrid-l-row-stretch-1-responsive"
 />
 `;
 
 exports[`EuiFlexGrid props columns 2 is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-l-row-2-responsive"
+  class="euiFlexGrid emotion-euiFlexGrid-l-row-stretch-2-responsive"
 />
 `;
 
 exports[`EuiFlexGrid props columns 3 is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-l-row-3-responsive"
+  class="euiFlexGrid emotion-euiFlexGrid-l-row-stretch-3-responsive"
 />
 `;
 
 exports[`EuiFlexGrid props columns 4 is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-l-row-4-responsive"
+  class="euiFlexGrid emotion-euiFlexGrid-l-row-stretch-4-responsive"
 />
 `;
 
 exports[`EuiFlexGrid props direction column is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-l-column-1-responsive"
+  class="euiFlexGrid emotion-euiFlexGrid-l-column-stretch-1-responsive"
 />
 `;
 
 exports[`EuiFlexGrid props direction row is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-l-row-1-responsive"
+  class="euiFlexGrid emotion-euiFlexGrid-l-row-stretch-1-responsive"
 />
 `;
 
 exports[`EuiFlexGrid props gutterSize l is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-l-row-1-responsive"
+  class="euiFlexGrid emotion-euiFlexGrid-l-row-stretch-1-responsive"
 />
 `;
 
 exports[`EuiFlexGrid props gutterSize m is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-m-row-1-responsive"
+  class="euiFlexGrid emotion-euiFlexGrid-m-row-stretch-1-responsive"
 />
 `;
 
 exports[`EuiFlexGrid props gutterSize none is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-none-row-1-responsive"
+  class="euiFlexGrid emotion-euiFlexGrid-none-row-stretch-1-responsive"
 />
 `;
 
 exports[`EuiFlexGrid props gutterSize s is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-s-row-1-responsive"
+  class="euiFlexGrid emotion-euiFlexGrid-s-row-stretch-1-responsive"
 />
 `;
 
 exports[`EuiFlexGrid props gutterSize xl is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-xl-row-1-responsive"
+  class="euiFlexGrid emotion-euiFlexGrid-xl-row-stretch-1-responsive"
 />
 `;
 
 exports[`EuiFlexGrid props responsive is rendered 1`] = `
 <div
-  class="euiFlexGrid emotion-euiFlexGrid-l-row-1"
+  class="euiFlexGrid emotion-euiFlexGrid-l-row-stretch-1"
 />
 `;

src/components/flex/flex_grid.styles.ts

@@ -64,5 +64,22 @@ export const euiFlexGridStyles = (
         gap: ${euiTheme.size.xl};
       `,
     },
+    alignItems: {
+      stretch: css`
+        align-items: stretch;
+      `,
+      start: css`
+        align-items: start;
+      `,
+      end: css`
+        align-items: end;
+      `,
+      center: css`
+        align-items: center;
+      `,
+      baseline: css`
+        align-items: baseline;
+      `,
+    },
   };
 };

src/components/flex/flex_grid.test.tsx

@@ -11,7 +11,12 @@ import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
 import { shouldRenderCustomStyles } from '../../test/internal';
 
-import { EuiFlexGrid, GUTTER_SIZES, DIRECTIONS } from './flex_grid';
+import {
+  EuiFlexGrid,
+  GUTTER_SIZES,
+  DIRECTIONS,
+  ALIGN_ITEMS,
+} from './flex_grid';
 
 describe('EuiFlexGrid', () => {
   shouldRenderCustomStyles(<EuiFlexGrid />);
@@ -57,6 +62,16 @@ describe('EuiFlexGrid', () => {
       });
     });
 
+    describe('alignItems', () => {
+      ALIGN_ITEMS.forEach((value) => {
+        test(`${value} is rendered`, () => {
+          const component = render(<EuiFlexGrid alignItems={value} />);
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
+
     describe('responsive', () => {
       test('is rendered', () => {
         const component = render(<EuiFlexGrid responsive={false} />);

src/components/flex/flex_grid.tsx

@@ -21,6 +21,15 @@ import { euiFlexGridStyles } from './flex_grid.styles';
 export const DIRECTIONS = ['row', 'column'] as const;
 export type FlexGridDirection = typeof DIRECTIONS[number];
 
+export const ALIGN_ITEMS = [
+  'stretch',
+  'start',
+  'end',
+  'center',
+  'baseline',
+] as const;
+export type FlexGridAlignItems = typeof ALIGN_ITEMS[number];
+
 export const GUTTER_SIZES = ['none', 's', 'm', 'l', 'xl'] as const;
 export type FlexGridGutterSize = typeof GUTTER_SIZES[number];
 
@@ -38,6 +47,10 @@ export interface EuiFlexGridProps {
    * Change this prop to `column` to create a top-down then left-right display.
    */
   direction?: FlexGridDirection;
+  /**
+   * Aligns grid items vertically
+   */
+  alignItems?: FlexGridAlignItems;
   /**
    * Space between flex items
    */
@@ -61,6 +74,7 @@ export const EuiFlexGrid: FunctionComponent<
   className,
   gutterSize = 'l',
   direction = 'row',
+  alignItems = 'stretch',
   responsive = true,
   columns = 1,
   component: Component = 'div',
@@ -77,6 +91,7 @@ export const EuiFlexGrid: FunctionComponent<
     styles.euiFlexGrid,
     styles.gutterSizes[gutterSize],
     styles.direction[direction],
+    styles.alignItems[alignItems],
     styles.columnCount[columns],
     responsive && styles.responsive,
   ];

upcoming_changelogs/6281.md

@@ -0,0 +1 @@
+- Added the `alignItems` prop to `EuiFlexGrid`