diff --git a/src/components/flex/__snapshots__/flex_grid.test.tsx.snap b/src/components/flex/__snapshots__/flex_grid.test.tsx.snap index d27f5ddcaa9..8833f23f645 100644 --- a/src/components/flex/__snapshots__/flex_grid.test.tsx.snap +++ b/src/components/flex/__snapshots__/flex_grid.test.tsx.snap @@ -3,7 +3,7 @@ exports[`EuiFlexGrid is rendered 1`] = `

@@ -12,74 +12,104 @@ exports[`EuiFlexGrid is rendered 1`] = `

`; +exports[`EuiFlexGrid props alignItems baseline is rendered 1`] = ` +
+`; + +exports[`EuiFlexGrid props alignItems center is rendered 1`] = ` +
+`; + +exports[`EuiFlexGrid props alignItems end is rendered 1`] = ` +
+`; + +exports[`EuiFlexGrid props alignItems start is rendered 1`] = ` +
+`; + +exports[`EuiFlexGrid props alignItems stretch is rendered 1`] = ` +
+`; + exports[`EuiFlexGrid props columns 1 is rendered 1`] = `
`; exports[`EuiFlexGrid props columns 2 is rendered 1`] = `
`; exports[`EuiFlexGrid props columns 3 is rendered 1`] = `
`; exports[`EuiFlexGrid props columns 4 is rendered 1`] = `
`; exports[`EuiFlexGrid props direction column is rendered 1`] = `
`; exports[`EuiFlexGrid props direction row is rendered 1`] = `
`; exports[`EuiFlexGrid props gutterSize l is rendered 1`] = `
`; exports[`EuiFlexGrid props gutterSize m is rendered 1`] = `
`; exports[`EuiFlexGrid props gutterSize none is rendered 1`] = `
`; exports[`EuiFlexGrid props gutterSize s is rendered 1`] = `
`; exports[`EuiFlexGrid props gutterSize xl is rendered 1`] = `
`; exports[`EuiFlexGrid props responsive is rendered 1`] = `
`; diff --git a/src/components/flex/flex_grid.styles.ts b/src/components/flex/flex_grid.styles.ts index b41c6b589bc..9465a743bfc 100644 --- a/src/components/flex/flex_grid.styles.ts +++ b/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; + `, + }, }; }; diff --git a/src/components/flex/flex_grid.test.tsx b/src/components/flex/flex_grid.test.tsx index f987d90fc68..0ca46bc4f0b 100644 --- a/src/components/flex/flex_grid.test.tsx +++ b/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(); @@ -57,6 +62,16 @@ describe('EuiFlexGrid', () => { }); }); + describe('alignItems', () => { + ALIGN_ITEMS.forEach((value) => { + test(`${value} is rendered`, () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + }); + describe('responsive', () => { test('is rendered', () => { const component = render(); diff --git a/src/components/flex/flex_grid.tsx b/src/components/flex/flex_grid.tsx index 7866d3ee0dd..00576c47437 100644 --- a/src/components/flex/flex_grid.tsx +++ b/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, ]; diff --git a/upcoming_changelogs/6281.md b/upcoming_changelogs/6281.md new file mode 100644 index 00000000000..9e732ffc3b3 --- /dev/null +++ b/upcoming_changelogs/6281.md @@ -0,0 +1 @@ +- Added the `alignItems` prop to `EuiFlexGrid`