From 1dce01fdd752c951dfcc1cf7fa396e06ceb0f27a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Wed, 10 Apr 2024 11:44:03 +0200
Subject: [PATCH] Grafana UI: `PanelChrome` - Replace `HorizontalGroup` with
 `Stack` in documentation and stories (#85843)

---
 .betterer.results                                     |  3 ---
 .../src/components/PanelChrome/PanelChrome.mdx        | 10 +++++-----
 .../src/components/PanelChrome/PanelChrome.story.tsx  | 11 +++++------
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 29072afc566..02285a8b13c 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -873,9 +873,6 @@ exports[`better eslint`] = {
     "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/PanelChrome.story.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/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/PanelChrome/PanelChrome.mdx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.mdx
index ce94c04375c..d91e8f1ddc9 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.mdx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.mdx
@@ -3,10 +3,10 @@ import { Meta, Preview } from '@storybook/addon-docs/blocks';
 import { PanelChrome } from './PanelChrome';
 
 import { action } from '@storybook/addon-actions';
-import { HorizontalGroup } from '../Layout/Layout';
 import { LoadingState } from '@grafana/data';
 import { Button } from '../Button';
 import { Menu } from '../Menu/Menu';
+import { Stack } from '../Layout/Stack/Stack';
 import { IconButton } from '../IconButton/IconButton';
 
 <Meta title="MDX|PanelChrome" component={PanelChrome} />
@@ -109,7 +109,7 @@ Component used for rendering content wrapped in the same style as grafana panels
 
 <Preview>
 
-  <HorizontalGroup spacing="md" align="flex-start" wrap>
+  <Stack gap={2} alignItems="flex-start" wrap="wrap">
   <PanelChrome
     title="My awesome panel title"
     menu={() => (
@@ -182,7 +182,7 @@ Component used for rendering content wrapped in the same style as grafana panels
     }}
 
   </PanelChrome>
-</HorizontalGroup>
+</Stack>
 </Preview>
 
 ### States: Loading , Streaming, Error
@@ -217,7 +217,7 @@ Component used for rendering content wrapped in the same style as grafana panels
 
 <Preview>
 
-  <HorizontalGroup spacing="md" align="flex-start" wrap>
+  <Stack gap={2} alignItems="flex-start" wrap="wrap">
   <PanelChrome
     title="My awesome panel title"
     loadingState={LoadingState.Loading}
@@ -297,7 +297,7 @@ Component used for rendering content wrapped in the same style as grafana panels
     }}
 
   </PanelChrome>
-</HorizontalGroup>
+</Stack>
 </Preview>
 
 ### Extra options? Title items and actions
diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx
index 16ed96da300..9367b187d16 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx
@@ -5,10 +5,9 @@ import React, { CSSProperties, useState, ReactNode } from 'react';
 import { useInterval, useToggle } from 'react-use';
 
 import { LoadingState } from '@grafana/data';
-import { Button, Icon, PanelChrome, PanelChromeProps, RadioButtonGroup } from '@grafana/ui';
+import { Button, Icon, PanelChrome, PanelChromeProps, RadioButtonGroup, Stack } from '@grafana/ui';
 
 import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
-import { HorizontalGroup } from '../Layout/Layout';
 import { Menu } from '../Menu/Menu';
 
 import mdx from './PanelChrome.mdx';
@@ -124,7 +123,7 @@ export const Examples = () => {
   return (
     <DashboardStoryCanvas>
       <div>
-        <HorizontalGroup spacing="md" align="flex-start" wrap>
+        <Stack gap={2} alignItems="flex-start" wrap="wrap">
           {renderPanel('Has statusMessage', {
             title: 'Default title',
             statusMessage: 'Error text',
@@ -255,7 +254,7 @@ export const Examples = () => {
               </Button>
             ),
           })}
-        </HorizontalGroup>
+        </Stack>
       </div>
     </DashboardStoryCanvas>
   );
@@ -265,7 +264,7 @@ export const ExamplesHoverHeader = () => {
   return (
     <DashboardStoryCanvas>
       <div>
-        <HorizontalGroup spacing="md" align="flex-start" wrap>
+        <Stack gap={2} alignItems="flex-start" wrap="wrap">
           {renderPanel('Title items, menu, hover header', {
             title: 'Default title',
             description: 'This is a description',
@@ -316,7 +315,7 @@ export const ExamplesHoverHeader = () => {
               </a>
             ),
           })}
-        </HorizontalGroup>
+        </Stack>
       </div>
     </DashboardStoryCanvas>
   );