From 0bdb96552ac2ad8acef8e2e1b67dc11d97c6ed62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Tue, 9 Apr 2024 10:31:11 +0200
Subject: [PATCH] Grafana UI: `Modal` - Replace HorizontalGroup with Stack
 (#85756)

---
 .betterer.results                              |  3 ---
 .../grafana-ui/src/components/Modal/Modal.tsx  | 18 +++++++++---------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index ffc43a7a85e..29072afc566 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -864,9 +864,6 @@ exports[`better eslint`] = {
     "packages/grafana-ui/src/components/Menu/Menu.story.tsx:5381": [
       [0, 0, 0, "\'VerticalGroup\' import from \'../Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
     ],
-    "packages/grafana-ui/src/components/Modal/Modal.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'../Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "packages/grafana-ui/src/components/Modal/ModalsContext.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
diff --git a/packages/grafana-ui/src/components/Modal/Modal.tsx b/packages/grafana-ui/src/components/Modal/Modal.tsx
index cacd311585a..9cedc4b298a 100644
--- a/packages/grafana-ui/src/components/Modal/Modal.tsx
+++ b/packages/grafana-ui/src/components/Modal/Modal.tsx
@@ -8,7 +8,7 @@ import { useStyles2 } from '../../themes';
 import { IconName } from '../../types';
 import { t } from '../../utils/i18n';
 import { IconButton } from '../IconButton/IconButton';
-import { HorizontalGroup } from '../Layout/Layout';
+import { Stack } from '../Layout/Stack/Stack';
 
 import { ModalHeader } from './ModalHeader';
 import { getModalStyles } from './getModalStyles';
@@ -105,23 +105,23 @@ function ModalButtonRow({ leftItems, children }: { leftItems?: React.ReactNode;
   if (leftItems) {
     return (
       <div className={styles.modalButtonRow}>
-        <HorizontalGroup justify="space-between">
-          <HorizontalGroup justify="flex-start" spacing="md">
+        <Stack justifyContent="space-between">
+          <Stack justifyContent="flex-start" gap={2}>
             {leftItems}
-          </HorizontalGroup>
-          <HorizontalGroup justify="flex-end" spacing="md">
+          </Stack>
+          <Stack justifyContent="flex-end" gap={2}>
             {children}
-          </HorizontalGroup>
-        </HorizontalGroup>
+          </Stack>
+        </Stack>
       </div>
     );
   }
 
   return (
     <div className={styles.modalButtonRow}>
-      <HorizontalGroup justify="flex-end" spacing="md" wrap={true}>
+      <Stack justifyContent="flex-end" gap={2} wrap="wrap">
         {children}
-      </HorizontalGroup>
+      </Stack>
     </div>
   );
 }