Grafana UI: Checkbox.story.tsx - Replace VerticalGroupwith Stack (

#86524)

.betterer.results

@@ -797,9 +797,6 @@ exports[`better eslint`] = {
       [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/Forms/Checkbox.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/Forms/FieldArray.story.tsx:5381": [
       [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
     ],

packages/grafana-ui/src/components/Forms/Checkbox.story.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryFn } from '@storybook/react';
 import React, { useState, useCallback } from 'react';
 
-import { VerticalGroup } from '../Layout/Layout';
+import { Stack } from '../Layout/Stack/Stack';
 
 import { Checkbox } from './Checkbox';
 import mdx from './Checkbox.mdx';
@@ -26,11 +26,7 @@ export const Basic: StoryFn<typeof Checkbox> = (args) => {
     (e: React.FormEvent<HTMLInputElement>) => setChecked(e.currentTarget.checked),
     [setChecked]
   );
-  return (
-    <div>
-      <Checkbox value={checked} onChange={onChange} {...args} />
-    </div>
-  );
+  return <Checkbox value={checked} onChange={onChange} {...args} />;
 };
 
 Basic.args = {
@@ -44,7 +40,7 @@ Basic.args = {
 export const StackedList = () => {
   return (
     <div>
-      <VerticalGroup>
+      <Stack direction="column" alignItems="flex-start">
         <Checkbox
           defaultChecked={true}
           label="Skip TLS cert validation"
@@ -60,18 +56,16 @@ export const StackedList = () => {
           label="Another checkbox times 2"
           description="Another long description that does not make any sense or does it?"
         />
-      </VerticalGroup>
+      </Stack>
     </div>
   );
 };
 
 export const InAField: StoryFn<typeof Checkbox> = (args) => {
   return (
-    <div>
-      <Field {...args}>
-        <Checkbox name="hide" id="hide" defaultChecked={true} />
-      </Field>
-    </div>
+    <Field {...args}>
+      <Checkbox name="hide" id="hide" defaultChecked={true} />
+    </Field>
   );
 };
 
@@ -93,14 +87,14 @@ export const AllStates: StoryFn<typeof Checkbox> = (args) => {
 
   return (
     <div>
-      <VerticalGroup>
+      <Stack direction="column" alignItems="flex-start">
         <Checkbox value={checked} onChange={onChange} {...args} />
         <Checkbox value={true} label="Checked" />
         <Checkbox value={false} label="Unchecked" />
         <Checkbox value={false} indeterminate={true} label="Interdeterminate" />
         <Checkbox value={false} invalid={true} label="Invalid and unchecked" />
         <Checkbox value={true} invalid={true} label="Invalid and checked" />
-      </VerticalGroup>
+      </Stack>
     </div>
   );
 };