From bc07eedaa9a9eca0aea34391140354d5e2e11630 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Thu, 18 Apr 2024 12:16:57 +0200
Subject: [PATCH] Grafana UI: Replace `VerticalGroup` with `Stack` on alerts
 documentation in Storybook (#86400)

---
 .betterer.results                             |  6 -----
 .../grafana-ui/src/components/Alert/Alert.mdx |  8 ++-----
 .../components/Alert/InlineBanner.story.tsx   | 24 ++++++-------------
 .../src/components/Alert/Toast.story.tsx      | 14 +++++------
 4 files changed, 15 insertions(+), 37 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 6b23e7d65a7..31648327a82 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -782,12 +782,6 @@ exports[`better eslint`] = {
     "packages/grafana-sql/src/components/visual-query-builder/SQLWhereRow.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "packages/grafana-ui/src/components/Alert/InlineBanner.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/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/ColorPicker/ColorPicker.tsx: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/Alert/Alert.mdx b/packages/grafana-ui/src/components/Alert/Alert.mdx
index 96c05104a45..16916f92069 100644
--- a/packages/grafana-ui/src/components/Alert/Alert.mdx
+++ b/packages/grafana-ui/src/components/Alert/Alert.mdx
@@ -104,9 +104,7 @@ Inline Banners are task-oriented alerts that notify users of the status of an ac
 
 ```jsx
 <Alert title={title} severity={severity} buttonContent={buttonContent} onRemove={onRemove}>
-  <VerticalGroup>
-    <div>Child content that includes some alert details, like maybe what actually happened.</div>
-  </VerticalGroup>
+  Child content that includes some alert details, like maybe what actually happened.</div>
 </Alert>
 ```
 
@@ -149,9 +147,7 @@ appEvents.publish({
 
 ```jsx
 <Alert title={title} severity={severity} onRemove={onRemove} elevated>
-  <VerticalGroup>
-    <div>Child content that includes some alert details, like maybe what actually happened.</div>
-  </VerticalGroup>
+  Child content that includes some alert details, like maybe what actually happened.
 </Alert>
 ```
 
diff --git a/packages/grafana-ui/src/components/Alert/InlineBanner.story.tsx b/packages/grafana-ui/src/components/Alert/InlineBanner.story.tsx
index 1e13af573d6..baa8dd04d67 100644
--- a/packages/grafana-ui/src/components/Alert/InlineBanner.story.tsx
+++ b/packages/grafana-ui/src/components/Alert/InlineBanner.story.tsx
@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { StoryFn, Meta } from '@storybook/react';
 import React from 'react';
 
-import { Alert, AlertVariant, VerticalGroup } from '@grafana/ui';
+import { Alert, AlertVariant, Stack } from '@grafana/ui';
 
 import { StoryExample } from '../../utils/storybook/StoryExample';
 
@@ -29,11 +29,7 @@ const meta: Meta = {
 export const Basic: StoryFn<typeof Alert> = (args) => {
   return (
     <div>
-      <Alert {...args}>
-        <VerticalGroup>
-          <div>Child content that includes some alert details, like maybe what actually happened.</div>
-        </VerticalGroup>
-      </Alert>
+      <Alert {...args}>Child content that includes some alert details, like maybe what actually happened.</Alert>
     </div>
   );
 };
@@ -44,13 +40,7 @@ Basic.args = {
 };
 
 export const WithActions: StoryFn<typeof Alert> = (args) => {
-  return (
-    <Alert {...args}>
-      <VerticalGroup>
-        <div>Child content that includes some alert details, like maybe what actually happened.</div>
-      </VerticalGroup>
-    </Alert>
-  );
+  return <Alert {...args}>Child content that includes some alert details, like maybe what actually happened.</Alert>;
 };
 
 WithActions.args = {
@@ -62,7 +52,7 @@ WithActions.args = {
 
 export const Examples: StoryFn<typeof Alert> = () => {
   return (
-    <VerticalGroup>
+    <Stack direction="column">
       <StoryExample name="With buttonContent and children">
         <Alert
           title={'The title of the alert'}
@@ -77,15 +67,15 @@ export const Examples: StoryFn<typeof Alert> = () => {
         <Alert title={'No dismiss'} severity={'success'} />
       </StoryExample>
       <StoryExample name="Severities">
-        <VerticalGroup>
+        <Stack direction="column">
           {severities.map((severity) => (
             <Alert title={`Severity: ${severity}`} severity={severity} key={severity}>
               Child content
             </Alert>
           ))}
-        </VerticalGroup>
+        </Stack>
       </StoryExample>
-    </VerticalGroup>
+    </Stack>
   );
 };
 
diff --git a/packages/grafana-ui/src/components/Alert/Toast.story.tsx b/packages/grafana-ui/src/components/Alert/Toast.story.tsx
index 1352fe33256..001ae0faa0e 100644
--- a/packages/grafana-ui/src/components/Alert/Toast.story.tsx
+++ b/packages/grafana-ui/src/components/Alert/Toast.story.tsx
@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { StoryFn, Meta } from '@storybook/react';
 import React from 'react';
 
-import { Alert, AlertVariant, VerticalGroup } from '@grafana/ui';
+import { Alert, AlertVariant, Stack } from '@grafana/ui';
 
 import { StoryExample } from '../../utils/storybook/StoryExample';
 
@@ -33,9 +33,7 @@ export const Basic: StoryFn<typeof Alert> = (args) => {
   return (
     <div className="page-alert-list">
       <Alert {...args} elevated>
-        <VerticalGroup>
-          <div>Child content that includes some alert details, like maybe what actually happened.</div>
-        </VerticalGroup>
+        Child content that includes some alert details, like maybe what actually happened.
       </Alert>
     </div>
   );
@@ -43,9 +41,9 @@ export const Basic: StoryFn<typeof Alert> = (args) => {
 
 export function Examples() {
   return (
-    <VerticalGroup>
+    <Stack direction="column">
       <StoryExample name="Severities">
-        <VerticalGroup>
+        <Stack direction="column">
           {severities.map((severity) => (
             <Alert
               title={`Severity: ${severity}`}
@@ -55,7 +53,7 @@ export function Examples() {
               elevated={true}
             />
           ))}
-        </VerticalGroup>
+        </Stack>
       </StoryExample>
       <StoryExample name="With huge payload">
         <Alert title="Alert with huge payload" severity="error" elevated={true}>
@@ -124,7 +122,7 @@ export function Examples() {
           Vivamus sit amet dui semper, suscipit est nec, elementum arcu. Praesent ante turpis, convallis ac leo eget,
         </Alert>
       </StoryExample>
-    </VerticalGroup>
+    </Stack>
   );
 }