IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grafana/UI: Extend all layout component props to include html attributes (#76560)

Browse Source
This commit is contained in:
Joao Silva 2023-10-16 10:37:09 +01:00 committed by GitHub
parent 260e123b35
commit a8b9c04cc1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/grafana-ui/src/components/Layout/Box/Box.tsx
View File

@ -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>
);

6
packages/grafana-ui/src/components/Layout/Flex/Flex.tsx
View File

@ -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>
);

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

@ -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 */

19
packages/grafana-ui/src/components/Layout/Stack/HorizontalStack.tsx
View File

@ -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';

6
packages/grafana-ui/src/components/Layout/Stack/Stack.tsx
View File

@ -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>
))}