Grafana UI: PanelChrome - Replace HorizontalGroup with Stack in documentation and stories (#85843)

.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"]

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

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>
   );