Grafana UI: `Button.story.tsx` - Replace HorizontalGroup and VerticalGroup with Stack and Box (#85644)

.betterer.results

@@ -823,10 +823,6 @@ exports[`better eslint`] = {
     "packages/grafana-ui/src/components/Alert/Toast.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/Button/Button.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/ColorPicker/ColorPicker.tsx: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/Button/Button.story.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { ComponentSize } from '../../types';
 import { Card } from '../Card/Card';
-import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';
+import { Stack } from '../Layout/Stack/Stack';
 
 import { allButtonVariants, allButtonFills, Button, ButtonProps } from './Button';
 import mdx from './Button.mdx';
@@ -36,12 +36,12 @@ export default {
 
 export const Examples: StoryFn<typeof Button> = () => {
   return (
-    <VerticalGroup>
+    <Stack direction="column">
       {allButtonFills.map((buttonFill) => (
-        <VerticalGroup key={buttonFill}>
-          <HorizontalGroup spacing="lg">
+        <Stack direction="column" key={buttonFill}>
+          <Stack gap={3}>
             {allButtonVariants.map((variant) => (
-              <VerticalGroup spacing="lg" key={`${buttonFill}-${variant}`}>
+              <Stack direction="column" gap={3} alignItems="flex-start" key={`${buttonFill}-${variant}`}>
                 {sizes.map((size) => (
                   <Button variant={variant} fill={buttonFill} size={size} key={size}>
                     {variant} {size}
@@ -50,13 +50,13 @@ export const Examples: StoryFn<typeof Button> = () => {
                 <Button variant={variant} fill={buttonFill} disabled>
                   {variant} disabled
                 </Button>
-              </VerticalGroup>
+              </Stack>
             ))}
-          </HorizontalGroup>
+          </Stack>
           <div style={{ padding: '20px 0', width: '100%' }} />
-        </VerticalGroup>
+        </Stack>
       ))}
-      <HorizontalGroup spacing="lg">
+      <Stack alignItems="center" gap={3}>
         <div>With icon and text</div>
         <Button icon="cloud" size="sm">
           Configure
@@ -65,20 +65,20 @@ export const Examples: StoryFn<typeof Button> = () => {
         <Button icon="cloud" size="lg">
           Configure
         </Button>
-      </HorizontalGroup>
+      </Stack>
       <div />
       <div />
       <Button icon="plus" fullWidth>
         Button with fullWidth
       </Button>
       <div />
-      <HorizontalGroup spacing="lg">
+      <Stack alignItems="center" gap={3}>
         <div>Inside ButtonGroup</div>
         <ButtonGroup>
           <Button icon="sync">Run query</Button>
           <Button icon="angle-down" />
         </ButtonGroup>
-      </HorizontalGroup>
+      </Stack>
       <Card>
         <Card.Heading>Button inside card</Card.Heading>
         <Card.Actions>
@@ -92,7 +92,7 @@ export const Examples: StoryFn<typeof Button> = () => {
           </Button>
         </Card.Actions>
       </Card>
-    </VerticalGroup>
+    </Stack>
   );
 };