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 BorderRadius = keyof ThemeShape['radius'];
export type BoxShadow = keyof ThemeShadows; export type BoxShadow = keyof ThemeShadows;
interface BoxProps { interface BoxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className' | 'style'> {
// Margin props // Margin props
/** Sets the property `margin` */ /** Sets the property `margin` */
margin?: ResponsiveProp<ThemeSpacingTokens>; margin?: ResponsiveProp<ThemeSpacingTokens>;
@ -96,6 +96,7 @@ export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props,
alignItems, alignItems,
boxShadow, boxShadow,
element, element,
...rest
} = props; } = props;
const styles = useStyles2( const styles = useStyles2(
getStyles, getStyles,
@ -127,7 +128,7 @@ export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props,
const Element = element ?? 'div'; const Element = element ?? 'div';
return ( return (
<Element ref={ref} className={styles.root}> <Element ref={ref} className={styles.root} {...rest}>
{children} {children}
</Element> </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'; export type Wrap = 'nowrap' | 'wrap' | 'wrap-reverse';
interface FlexProps { interface FlexProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className' | 'style'> {
gap?: ResponsiveProp<ThemeSpacingTokens>; gap?: ResponsiveProp<ThemeSpacingTokens>;
alignItems?: ResponsiveProp<AlignItems>; alignItems?: ResponsiveProp<AlignItems>;
justifyContent?: ResponsiveProp<JustifyContent>; justifyContent?: ResponsiveProp<JustifyContent>;
@ -43,11 +43,11 @@ interface FlexProps {
} }
export const Flex = React.forwardRef<HTMLDivElement, 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); const styles = useStyles2(getStyles, gap, alignItems, justifyContent, direction, wrap);
return ( return (
<div ref={ref} className={styles.flex}> <div ref={ref} className={styles.flex} {...rest}>
{children} {children}
</div> </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'; import { useStyles2 } from '../../../themes';
interface GridProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> { interface GridProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'> {
children: NonNullable<React.ReactNode>; children: NonNullable<React.ReactNode>;
/** Specifies the gutters between columns and rows. It is overwritten when a column or row gap has a value */ /** Specifies the gutters between columns and rows. It is overwritten when a column or row gap has a value */

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

@ -6,12 +6,15 @@ import { ResponsiveProp } from '../utils/responsiveness';
import { Stack } from './Stack'; import { Stack } from './Stack';
export const HorizontalStack = React.forwardRef< interface HorizontalStackProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className' | 'style'> {
HTMLDivElement, gap?: ResponsiveProp<ThemeSpacingTokens>;
React.PropsWithChildren<{ gap?: ResponsiveProp<ThemeSpacingTokens> }> }
>(({ children, gap = 1 }, ref) => (
<Stack ref={ref} direction="row" gap={gap}> export const HorizontalStack = React.forwardRef<HTMLDivElement, React.PropsWithChildren<HorizontalStackProps>>(
({ children, gap = 1, ...rest }, ref) => (
<Stack ref={ref} direction="row" gap={gap} {...rest}>
{children} {children}
</Stack> </Stack>
)); )
);
HorizontalStack.displayName = 'HorizontalStack'; 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 { Flex } from '../Flex/Flex';
import { ResponsiveProp } from '../utils/responsiveness'; import { ResponsiveProp } from '../utils/responsiveness';
interface StackProps { interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className' | 'style'> {
direction?: ResponsiveProp<'column' | 'row'>; direction?: ResponsiveProp<'column' | 'row'>;
gap?: ResponsiveProp<ThemeSpacingTokens>; gap?: ResponsiveProp<ThemeSpacingTokens>;
} }
export const Stack = React.forwardRef<HTMLDivElement, React.PropsWithChildren<StackProps>>( export const Stack = React.forwardRef<HTMLDivElement, React.PropsWithChildren<StackProps>>(
({ gap = 1, direction = 'column', children }, ref) => { ({ gap = 1, direction = 'column', children, ...rest }, ref) => {
return ( 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) => ( {React.Children.map(children, (child) => (
<div>{child}</div> <div>{child}</div>
))} ))}