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

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

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

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

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

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

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

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

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

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

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