GrafanaUI: Add minWidth and maxWidth props to the Box component (#86607)

* Add minWidth and maxWidth props to the Box component

* Add height props, use theme spacing for sizing

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

@@ -1,4 +1,5 @@
 import { css } from '@emotion/css';
+import { Property } from 'csstype';
 import React, { ElementType, forwardRef, PropsWithChildren } from 'react';
 
 import { GrafanaTheme2, ThemeSpacingTokens, ThemeShape, ThemeShadows } from '@grafana/data';
@@ -58,6 +59,15 @@ interface BoxProps extends FlexProps, Omit<React.HTMLAttributes<HTMLElement>, 'c
   justifyContent?: ResponsiveProp<JustifyContent>;
   gap?: ResponsiveProp<ThemeSpacingTokens>;
 
+  // Size props
+  minWidth?: ResponsiveProp<Property.MinWidth<number>>;
+  maxWidth?: ResponsiveProp<Property.MaxWidth<number>>;
+  width?: ResponsiveProp<Property.Width<number>>;
+
+  minHeight?: ResponsiveProp<Property.MinHeight<number>>;
+  maxHeight?: ResponsiveProp<Property.MaxHeight<number>>;
+  height?: ResponsiveProp<Property.Height<number>>;
+
   // Other props
   backgroundColor?: ResponsiveProp<BackgroundColor>;
   display?: ResponsiveProp<Display>;
@@ -98,6 +108,12 @@ export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props,
     boxShadow,
     element,
     gap,
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
     ...rest
   } = props;
   const styles = useStyles2(
@@ -129,7 +145,13 @@ export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props,
     justifyContent,
     alignItems,
     boxShadow,
-    gap
+    gap,
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight
   );
   const Element = element ?? 'div';
 
@@ -195,7 +217,13 @@ const getStyles = (
   justifyContent: BoxProps['justifyContent'],
   alignItems: BoxProps['alignItems'],
   boxShadow: BoxProps['boxShadow'],
-  gap: BoxProps['gap']
+  gap: BoxProps['gap'],
+  width: BoxProps['width'],
+  minWidth: BoxProps['minWidth'],
+  maxWidth: BoxProps['maxWidth'],
+  height: BoxProps['height'],
+  minHeight: BoxProps['minHeight'],
+  maxHeight: BoxProps['maxHeight']
 ) => {
   return {
     root: css([
@@ -290,6 +318,24 @@ const getStyles = (
       getResponsiveStyle(theme, gap, (val) => ({
         gap: theme.spacing(val),
       })),
+      getResponsiveStyle(theme, width, (val) => ({
+        width: theme.spacing(val),
+      })),
+      getResponsiveStyle(theme, minWidth, (val) => ({
+        minWidth: theme.spacing(val),
+      })),
+      getResponsiveStyle(theme, maxWidth, (val) => ({
+        maxWidth: theme.spacing(val),
+      })),
+      getResponsiveStyle(theme, height, (val) => ({
+        height: theme.spacing(val),
+      })),
+      getResponsiveStyle(theme, minHeight, (val) => ({
+        minHeight: theme.spacing(val),
+      })),
+      getResponsiveStyle(theme, maxHeight, (val) => ({
+        maxHeight: theme.spacing(val),
+      })),
     ]),
   };
 };