From 90437df05642b8b2867270a40d5d18893b77be19 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Mon, 23 Oct 2023 19:31:29 +0200
Subject: [PATCH] Box: Add gap prop (#76953)

* Box: Add gap prop

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

Co-authored-by: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>

---------

Co-authored-by: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
---
 packages/grafana-ui/src/components/Layout/Box/Box.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Layout/Box/Box.tsx b/packages/grafana-ui/src/components/Layout/Box/Box.tsx
index 97a9f54abda..4a5a7e52e2f 100644
--- a/packages/grafana-ui/src/components/Layout/Box/Box.tsx
+++ b/packages/grafana-ui/src/components/Layout/Box/Box.tsx
@@ -59,6 +59,7 @@ interface BoxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className' |
   shrink?: ResponsiveProp<number>;
   alignItems?: ResponsiveProp<AlignItems>;
   justifyContent?: ResponsiveProp<JustifyContent>;
+  gap?: ResponsiveProp<ThemeSpacingTokens>;
 
   // Other props
   backgroundColor?: ResponsiveProp<BackgroundColor>;
@@ -96,6 +97,7 @@ export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props,
     alignItems,
     boxShadow,
     element,
+    gap,
     ...rest
   } = props;
   const styles = useStyles2(
@@ -123,7 +125,8 @@ export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props,
     borderRadius,
     justifyContent,
     alignItems,
-    boxShadow
+    boxShadow,
+    gap
   );
   const Element = element ?? 'div';
 
@@ -185,7 +188,8 @@ const getStyles = (
   borderRadius: BoxProps['borderRadius'],
   justifyContent: BoxProps['justifyContent'],
   alignItems: BoxProps['alignItems'],
-  boxShadow: BoxProps['boxShadow']
+  boxShadow: BoxProps['boxShadow'],
+  gap: BoxProps['gap']
 ) => {
   return {
     root: css([
@@ -268,6 +272,9 @@ const getStyles = (
       getResponsiveStyle(theme, boxShadow, (val) => ({
         boxShadow: theme.shadows[val],
       })),
+      getResponsiveStyle(theme, gap, (val) => ({
+        gap: theme.spacing(val),
+      })),
     ]),
   };
 };