Box: Expose position property (#94726)

expose position property on Box

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

@@ -1,4 +1,5 @@
 import { css, cx } from '@emotion/css';
+import { Property } from 'csstype';
 import { ElementType, forwardRef, PropsWithChildren } from 'react';
 import * as React from 'react';
 
@@ -66,6 +67,7 @@ interface BoxProps extends FlexProps, SizeProps, Omit<React.HTMLAttributes<HTMLE
   boxShadow?: ResponsiveProp<BoxShadow>;
   /** Sets the HTML element that will be rendered as a Box. Defaults to 'div' */
   element?: ElementType;
+  position?: ResponsiveProp<Property.Position>;
 }
 
 export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props, ref) => {
@@ -106,6 +108,7 @@ export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props,
     height,
     minHeight,
     maxHeight,
+    position,
     ...rest
   } = props;
   const styles = useStyles2(
@@ -137,7 +140,8 @@ export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props,
     justifyContent,
     alignItems,
     boxShadow,
-    gap
+    gap,
+    position
   );
   const sizeStyles = useStyles2(getSizeStyles, width, minWidth, maxWidth, height, minHeight, maxHeight);
   const Element = element ?? 'div';
@@ -204,7 +208,8 @@ const getStyles = (
   justifyContent: BoxProps['justifyContent'],
   alignItems: BoxProps['alignItems'],
   boxShadow: BoxProps['boxShadow'],
-  gap: BoxProps['gap']
+  gap: BoxProps['gap'],
+  position: BoxProps['position']
 ) => {
   return {
     root: css([
@@ -299,6 +304,9 @@ const getStyles = (
       getResponsiveStyle(theme, gap, (val) => ({
         gap: theme.spacing(val),
       })),
+      getResponsiveStyle(theme, position, (val) => ({
+        position: val,
+      })),
     ]),
   };
 };