From 7404a631f6dcf9978ccc66cb96ce17a2a541fc7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Fri, 19 Apr 2024 12:54:20 +0200
Subject: [PATCH] GrafanaUI: `PageToolbar.story.tsx` - Replace `VerticalGroup`
 with `Stack` (#86581)

---
 .betterer.results                                           | 3 ---
 .../src/components/PageLayout/PageToolbar.story.tsx         | 6 +++---
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 144d040cfcf..c5b50784207 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -838,9 +838,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
     ],
-    "packages/grafana-ui/src/components/PageLayout/PageToolbar.story.tsx:5381": [
-      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "packages/grafana-ui/src/components/PanelChrome/PanelContext.ts: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/PageLayout/PageToolbar.story.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.story.tsx
index 0c736075d53..6e9638efdf5 100644
--- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.story.tsx
+++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.story.tsx
@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { Meta } from '@storybook/react';
 import React from 'react';
 
-import { ToolbarButton, VerticalGroup } from '@grafana/ui';
+import { ToolbarButton, Stack } from '@grafana/ui';
 
 import { StoryExample } from '../../utils/storybook/StoryExample';
 import { IconButton } from '../IconButton/IconButton';
@@ -17,7 +17,7 @@ const meta: Meta<typeof PageToolbar> = {
 
 export const Examples = () => {
   return (
-    <VerticalGroup>
+    <Stack direction="column">
       <StoryExample name="With non clickable title">
         <PageToolbar pageIcon="bell" title="Dashboard">
           <ToolbarButton icon="panel-add" />
@@ -50,7 +50,7 @@ export const Examples = () => {
           <ToolbarButton>Apply</ToolbarButton>
         </PageToolbar>
       </StoryExample>
-    </VerticalGroup>
+    </Stack>
   );
 };