Grid: Add `alignItems` prop (#83314)

add alignItems props to Grid

packages/grafana-ui/src/components/Layout/Grid/Grid.story.tsx

@@ -6,6 +6,10 @@ import { useTheme2 } from '../../../themes';
 import { Grid } from './Grid';
 import mdx from './Grid.mdx';
 
+const dimensions = Array.from({ length: 9 }).map(() => ({
+  minHeight: `${Math.random() * 100 + 100}px`,
+}));
+
 const meta: Meta<typeof Grid> = {
   title: 'General/Layout/Grid',
   component: Grid,
@@ -22,15 +26,21 @@ const meta: Meta<typeof Grid> = {
 export const ColumnsNumber: StoryFn<typeof Grid> = (args) => {
   const theme = useTheme2();
   return (
-    <Grid gap={args.gap} columns={args.columns}>
+    <Grid {...args}>
       {Array.from({ length: 9 }).map((_, i) => (
-        <div key={i} style={{ background: theme.colors.background.secondary, textAlign: 'center' }}>
+        <div key={i} style={{ background: theme.colors.background.secondary, textAlign: 'center', ...dimensions[i] }}>
           N# {i}
         </div>
       ))}
     </Grid>
   );
 };
+ColumnsNumber.argTypes = {
+  alignItems: {
+    control: 'select',
+    options: ['stretch', 'flex-start', 'flex-end', 'center', 'baseline', 'start', 'end', 'self-start', 'self-end'],
+  },
+};
 ColumnsNumber.args = {
   columns: 3,
 };

packages/grafana-ui/src/components/Layout/Grid/Grid.tsx

@@ -4,12 +4,14 @@ import React, { forwardRef, HTMLAttributes } from 'react';
 import { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data';
 
 import { useStyles2 } from '../../../themes';
+import { AlignItems } from '../types';
 import { getResponsiveStyle, ResponsiveProp } from '../utils/responsiveness';
 
 interface GridPropsBase extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'> {
   children: NonNullable<React.ReactNode>;
   /** Specifies the gutters between columns and rows. It is overwritten when a column or row gap has a value. */
   gap?: ResponsiveProp<ThemeSpacingTokens>;
+  alignItems?: ResponsiveProp<AlignItems>;
 }
 
 interface PropsWithColumns extends GridPropsBase {
@@ -30,8 +32,8 @@ interface PropsWithMinColumnWidth extends GridPropsBase {
 type GridProps = PropsWithColumns | PropsWithMinColumnWidth;
 
 export const Grid = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
-  const { children, gap, columns, minColumnWidth, ...rest } = props;
+  const { alignItems, children, gap, columns, minColumnWidth, ...rest } = props;
-  const styles = useStyles2(getGridStyles, gap, columns, minColumnWidth);
+  const styles = useStyles2(getGridStyles, gap, columns, minColumnWidth, alignItems);
 
   return (
     <div ref={ref} {...rest} className={styles.grid}>
@@ -46,7 +48,8 @@ const getGridStyles = (
   theme: GrafanaTheme2,
   gap: GridProps['gap'],
   columns: GridProps['columns'],
-  minColumnWidth: GridProps['minColumnWidth']
+  minColumnWidth: GridProps['minColumnWidth'],
+  alignItems: GridProps['alignItems']
 ) => {
   return {
     grid: css([
@@ -62,6 +65,9 @@ const getGridStyles = (
         getResponsiveStyle(theme, columns, (val) => ({
           gridTemplateColumns: `repeat(${val}, 1fr)`,
         })),
+      getResponsiveStyle(theme, alignItems, (val) => ({
+        alignItems: val,
+      })),
     ]),
   };
 };