From 9af259a0d623fe36fb126f2742134546fbfb82e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Fri, 5 Apr 2024 16:11:53 +0200
Subject: [PATCH] GrafanaUI: `ConfirmModal` - replace `HorizontalGroup` with
 `Stack` and `Box` component (#85660)

---
 .betterer.results                                     |  3 ---
 .../src/components/ConfirmModal/ConfirmModal.tsx      | 11 +++++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 64a60e0a5ca..42b0a38b41d 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -827,9 +827,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.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/DataLinks/DataLinkInput.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
index 52cccc03221..7656efac337 100644
--- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
+++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
@@ -8,7 +8,8 @@ import { useStyles2 } from '../../themes';
 import { IconName } from '../../types/icon';
 import { Button, ButtonVariant } from '../Button';
 import { Input } from '../Input/Input';
-import { HorizontalGroup } from '../Layout/Layout';
+import { Box } from '../Layout/Box/Box';
+import { Stack } from '../Layout/Stack/Stack';
 import { Modal } from '../Modal/Modal';
 
 export interface ConfirmModalProps {
@@ -102,9 +103,11 @@ export const ConfirmModal = ({
         {description ? <div className={styles.modalDescription}>{description}</div> : null}
         {confirmationText ? (
           <div className={styles.modalConfirmationInput}>
-            <HorizontalGroup>
-              <Input placeholder={`Type "${confirmationText}" to confirm`} onChange={onConfirmationTextChange} />
-            </HorizontalGroup>
+            <Stack alignItems="flex-start">
+              <Box>
+                <Input placeholder={`Type "${confirmationText}" to confirm`} onChange={onConfirmationTextChange} />
+              </Box>
+            </Stack>
           </div>
         ) : null}
       </div>