Grafana UI: Modal - Replace HorizontalGroup with Stack (#85756)

Author: eledobleefe

.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"],

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>
   );
 }