IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-03 20:21:01 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grid: Add alignItems prop (#83314)

Browse Source 
add alignItems props to Grid
This commit is contained in:
Ashley Harrison 2024-02-23 14:25:44 +00:00 committed by GitHub
parent 1631e41303
commit 604e02be15
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,
};

12
packages/grafana-ui/src/components/Layout/Grid/Grid.tsx
View File

@ -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 styles = useStyles2(getGridStyles, gap, columns, minColumnWidth);
const { alignItems, children, gap, columns, minColumnWidth, ...rest } = props;
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,
})),
]),
};
};