From 661aaf352edcf04e41b29d31395f535b532514ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Fri, 5 Apr 2024 12:03:57 +0200
Subject: [PATCH] GrafanaUI: `IconButton` - replace HorizontalGroup and
 VerticalGroup with Stack component (#85639)

---
 .../src/components/IconButton/IconButton.story.tsx     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx
index 0e410f60195..cfa0867297a 100644
--- a/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx
+++ b/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import { useTheme2 } from '../../themes';
 import { IconSize, IconName } from '../../types';
-import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';
+import { Stack } from '../Layout/Stack/Stack';
 
 import { BasePropsWithTooltip, IconButton, IconButtonVariant, Props as IconButtonProps } from './IconButton';
 import mdx from './IconButton.mdx';
@@ -57,7 +57,7 @@ export const ExamplesSizes = (args: BasePropsWithTooltip) => {
   });
 
   return (
-    <HorizontalGroup justify="center">
+    <Stack justifyContent="center">
       {variants.map((variant) => {
         return (
           <div
@@ -93,7 +93,7 @@ export const ExamplesSizes = (args: BasePropsWithTooltip) => {
           </div>
         ))}
       </div>
-    </HorizontalGroup>
+    </Stack>
   );
 };
 
@@ -115,7 +115,7 @@ export const ExamplesBackground = (args: BasePropsWithTooltip) => {
           background: theme.colors.background[background],
         })}
       >
-        <VerticalGroup spacing="md">
+        <Stack direction="column" gap={2}>
           <div>{background}</div>
           <div
             className={css({
@@ -128,7 +128,7 @@ export const ExamplesBackground = (args: BasePropsWithTooltip) => {
             })}
             <IconButton name="times" size="xl" tooltip={args.tooltip} disabled />
           </div>
-        </VerticalGroup>
+        </Stack>
       </div>
     );
   };