From 9878dfb7d9f632fd9cd16f352dbeba938d1f8ef6 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:55:04 +0200
Subject: [PATCH] Grafana UI: `EmotionPerfTest` - Replace `VerticalGroup` with
 `Stack` (#86588)

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

diff --git a/.betterer.results b/.betterer.results
index c5b50784207..cc744e869a2 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -958,9 +958,6 @@ exports[`better eslint`] = {
     "packages/grafana-ui/src/components/Text/Text.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/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/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/ThemeDemos/EmotionPerfTest.tsx b/packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx
index 3399fff3fc0..df6a5b01ad9 100644
--- a/packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx
+++ b/packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx
@@ -9,13 +9,13 @@ import { GrafanaTheme2 } from '@grafana/data';
 
 import { useStyles2, useTheme2 } from '../../themes';
 import { Button } from '../Button';
-import { VerticalGroup } from '../Layout/Layout';
+import { Stack } from '../Layout/Stack/Stack';
 
 export function EmotionPerfTest() {
   console.log('process.env.NODE_ENV', process.env.NODE_ENV);
 
   return (
-    <VerticalGroup>
+    <Stack direction="column">
       <div>Emotion performance tests</div>
       <TestScenario name="No styles" Component={NoStyles} />
       <TestScenario name="inline emotion/css" Component={InlineEmotionCSS} />
@@ -24,7 +24,7 @@ export function EmotionPerfTest() {
       <TestScenario name="useStyles with css prop" Component={UseStylesWithCSSProp} />
       <TestScenario name="useStyles with conditional css prop" Component={UseStylesWithConditionalCSS} />
       <TestScenario name="useStyles with conditional classnames" Component={UseStylesWithConditionalClassNames} />
-    </VerticalGroup>
+    </Stack>
   );
 }