From f3b814a024a2a069cd2b0fdda45e9374304b9b60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Fri, 12 Apr 2024 18:08:43 +0200
Subject: [PATCH] Grafana UI: `ToolbarButton.story.tsx` - Replace
 `HorizotalGroup` and `VerticalGroup` with `Stack` (#86067)

---
 .betterer.results                                      |  4 ----
 .../components/ToolbarButton/ToolbarButton.story.tsx   | 10 +++++-----
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 30699906dd9..f3221ddfb0d 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -988,10 +988,6 @@ exports[`better eslint`] = {
     "packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.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/ToolbarButton/ToolbarButton.story.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'../Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "\'VerticalGroup\' import from \'../Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
-    ],
     "packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx:5381": [
       [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
     ],
diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx
index 5710a680fc1..4f278b96c22 100644
--- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx
+++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
 import { ButtonGroup } from '../Button';
-import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';
+import { Stack } from '../Layout/Stack/Stack';
 
 import { ToolbarButton, ToolbarButtonVariant } from './ToolbarButton';
 import mdx from './ToolbarButton.mdx';
@@ -94,7 +94,7 @@ export const Examples: StoryFn<typeof ToolbarButton> = (args) => {
 
   return (
     <DashboardStoryCanvas>
-      <VerticalGroup>
+      <Stack direction="column" gap={1.5}>
         Button states
         <ToolbarButtonRow>
           <ToolbarButton variant="canvas">Just text</ToolbarButton>
@@ -140,7 +140,7 @@ export const Examples: StoryFn<typeof ToolbarButton> = (args) => {
         </ButtonGroup>
         <br />
         Inside button group
-        <HorizontalGroup>
+        <Stack>
           <ButtonGroup>
             <ToolbarButton variant="primary" icon="sync">
               Run query
@@ -153,8 +153,8 @@ export const Examples: StoryFn<typeof ToolbarButton> = (args) => {
             </ToolbarButton>
             <ToolbarButton isOpen={false} narrow variant="destructive" />
           </ButtonGroup>
-        </HorizontalGroup>
-      </VerticalGroup>
+        </Stack>
+      </Stack>
     </DashboardStoryCanvas>
   );
 };