mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Grafana/UI: Extend all layout component props to include html attributes (#76560)
This commit is contained in:
parent
260e123b35
commit
a8b9c04cc1
@ -14,7 +14,7 @@ export type BorderColor = keyof GrafanaTheme2['colors']['border'] | 'error' | 's
|
||||
export type BorderRadius = keyof ThemeShape['radius'];
|
||||
export type BoxShadow = keyof ThemeShadows;
|
||||
|
||||
interface BoxProps {
|
||||
interface BoxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className' | 'style'> {
|
||||
// Margin props
|
||||
/** Sets the property `margin` */
|
||||
margin?: ResponsiveProp<ThemeSpacingTokens>;
|
||||
@ -96,6 +96,7 @@ export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props,
|
||||
alignItems,
|
||||
boxShadow,
|
||||
element,
|
||||
...rest
|
||||
} = props;
|
||||
const styles = useStyles2(
|
||||
getStyles,
|
||||
@ -127,7 +128,7 @@ export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props,
|
||||
const Element = element ?? 'div';
|
||||
|
||||
return (
|
||||
<Element ref={ref} className={styles.root}>
|
||||
<Element ref={ref} className={styles.root} {...rest}>
|
||||
{children}
|
||||
</Element>
|
||||
);
|
||||
|
@ -33,7 +33,7 @@ export type Direction = 'row' | 'row-reverse' | 'column' | 'column-reverse';
|
||||
|
||||
export type Wrap = 'nowrap' | 'wrap' | 'wrap-reverse';
|
||||
|
||||
interface FlexProps {
|
||||
interface FlexProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className' | 'style'> {
|
||||
gap?: ResponsiveProp<ThemeSpacingTokens>;
|
||||
alignItems?: ResponsiveProp<AlignItems>;
|
||||
justifyContent?: ResponsiveProp<JustifyContent>;
|
||||
@ -43,11 +43,11 @@ interface FlexProps {
|
||||
}
|
||||
|
||||
export const Flex = React.forwardRef<HTMLDivElement, FlexProps>(
|
||||
({ gap = 1, alignItems, justifyContent, direction, wrap, children }, ref) => {
|
||||
({ gap = 1, alignItems, justifyContent, direction, wrap, children, ...rest }, ref) => {
|
||||
const styles = useStyles2(getStyles, gap, alignItems, justifyContent, direction, wrap);
|
||||
|
||||
return (
|
||||
<div ref={ref} className={styles.flex}>
|
||||
<div ref={ref} className={styles.flex} {...rest}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
@ -5,7 +5,7 @@ import { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data';
|
||||
|
||||
import { useStyles2 } from '../../../themes';
|
||||
|
||||
interface GridProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
|
||||
interface GridProps 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 */
|
||||
|
@ -6,12 +6,15 @@ import { ResponsiveProp } from '../utils/responsiveness';
|
||||
|
||||
import { Stack } from './Stack';
|
||||
|
||||
export const HorizontalStack = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.PropsWithChildren<{ gap?: ResponsiveProp<ThemeSpacingTokens> }>
|
||||
>(({ children, gap = 1 }, ref) => (
|
||||
<Stack ref={ref} direction="row" gap={gap}>
|
||||
{children}
|
||||
</Stack>
|
||||
));
|
||||
interface HorizontalStackProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className' | 'style'> {
|
||||
gap?: ResponsiveProp<ThemeSpacingTokens>;
|
||||
}
|
||||
|
||||
export const HorizontalStack = React.forwardRef<HTMLDivElement, React.PropsWithChildren<HorizontalStackProps>>(
|
||||
({ children, gap = 1, ...rest }, ref) => (
|
||||
<Stack ref={ref} direction="row" gap={gap} {...rest}>
|
||||
{children}
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
HorizontalStack.displayName = 'HorizontalStack';
|
||||
|
@ -4,15 +4,15 @@ import { ThemeSpacingTokens } from '@grafana/data';
|
||||
|
||||
import { Flex } from '../Flex/Flex';
|
||||
import { ResponsiveProp } from '../utils/responsiveness';
|
||||
interface StackProps {
|
||||
interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className' | 'style'> {
|
||||
direction?: ResponsiveProp<'column' | 'row'>;
|
||||
gap?: ResponsiveProp<ThemeSpacingTokens>;
|
||||
}
|
||||
|
||||
export const Stack = React.forwardRef<HTMLDivElement, React.PropsWithChildren<StackProps>>(
|
||||
({ gap = 1, direction = 'column', children }, ref) => {
|
||||
({ gap = 1, direction = 'column', children, ...rest }, ref) => {
|
||||
return (
|
||||
<Flex ref={ref} gap={gap} direction={direction} wrap="wrap">
|
||||
<Flex ref={ref} gap={gap} direction={direction} wrap="wrap" {...rest}>
|
||||
{React.Children.map(children, (child) => (
|
||||
<div>{child}</div>
|
||||
))}
|
||||
|
Loading…
Reference in New Issue
Block a user