From cd79fe1a7c1b3d6670024ae1f20d533d634fd77f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Wed, 10 Apr 2024 18:23:31 +0200
Subject: [PATCH] Grafana UI: `ThemeDemo` - Replace `HorizontalGroup` and
 `VerticalGroup` with `Stack` and `Box` (#85888)

---
 .betterer.results                             |   4 -
 .../src/components/ThemeDemos/ThemeDemo.tsx   | 119 +++++++++---------
 2 files changed, 56 insertions(+), 67 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 041c00af5e6..866eb02a62b 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -991,10 +991,6 @@ exports[`better eslint`] = {
     "packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.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/ThemeDemos/ThemeDemo.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/ToolbarButton/ToolbarButton.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"]
diff --git a/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
index ccfea2e4dff..7ef26ad74ef 100644
--- a/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
+++ b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
@@ -13,47 +13,40 @@ import { InlineFieldRow } from '../Forms/InlineFieldRow';
 import { RadioButtonGroup } from '../Forms/RadioButtonGroup/RadioButtonGroup';
 import { Icon } from '../Icon/Icon';
 import { Input } from '../Input/Input';
-import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';
+import { BackgroundColor, BorderColor, Box } from '../Layout/Box/Box';
+import { Stack } from '../Layout/Stack/Stack';
 import { Select } from '../Select/Select';
 import { Switch } from '../Switch/Switch';
+import { Text, TextProps } from '../Text/Text';
 
 interface DemoBoxProps {
-  bg?: string;
-  border?: string;
-  textColor?: string;
+  bg?: BackgroundColor;
+  border?: BorderColor;
+  textColor?: TextProps['color'];
 }
 
 const DemoBox = ({ bg, border, children }: React.PropsWithChildren<DemoBoxProps>) => {
-  const style = cx(
-    css({
-      padding: '16px',
-      background: bg ?? 'inherit',
-      width: '100%',
-    }),
-    border
-      ? css({
-          border: `1px solid ${border}`,
-        })
-      : null
+  return (
+    <Box backgroundColor={bg ? bg : undefined} padding={2} borderStyle={border ? 'solid' : undefined}>
+      {children}
+    </Box>
   );
-
-  return <div className={style}>{children}</div>;
 };
 
 const DemoText = ({
   color,
   bold,
-  size,
   children,
-}: React.PropsWithChildren<{ color?: string; bold?: boolean; size?: number }>) => {
-  const style = css({
-    padding: '4px',
-    color: color ?? 'inherit',
-    fontWeight: bold ? 500 : 400,
-    fontSize: `${size ?? 14}px`,
-  });
-
-  return <div className={style}>{children}</div>;
+}: React.PropsWithChildren<{ color?: TextProps['color']; bold?: boolean; size?: number }>) => {
+  return (
+    <Box padding={0.5}>
+      {children && (
+        <Text color={color ? color : undefined} weight={bold ? 'bold' : undefined}>
+          {children}
+        </Text>
+      )}
+    </Box>
+  );
 };
 
 export const ThemeDemo = () => {
@@ -90,31 +83,31 @@ export const ThemeDemo = () => {
         color: t.colors.text.primary,
       })}
     >
-      <DemoBox bg={t.colors.background.canvas}>
+      <DemoBox bg="canvas">
         <CollapsableSection label="Layers" isOpen={true}>
           <DemoText>t.colors.background.canvas</DemoText>
-          <DemoBox bg={t.colors.background.primary} border={t.colors.border.weak}>
+          <DemoBox bg="primary" border="weak">
             <DemoText>t.colors.background.primary is the main & preferred content </DemoText>
-            <DemoBox bg={t.colors.background.secondary} border={t.colors.border.weak}>
+            <DemoBox bg="secondary" border="weak">
               <DemoText>t.colors.background.secondary and t.colors.border.layer1</DemoText>
             </DemoBox>
           </DemoBox>
         </CollapsableSection>
         <CollapsableSection label="Text colors" isOpen={true}>
-          <HorizontalGroup>
+          <Stack justifyContent="flex-start">
             <DemoBox>
               <TextColors t={t} />
             </DemoBox>
-            <DemoBox bg={t.colors.background.primary}>
+            <DemoBox bg="primary">
               <TextColors t={t} />
             </DemoBox>
-            <DemoBox bg={t.colors.background.secondary}>
+            <DemoBox bg="secondary">
               <TextColors t={t} />
             </DemoBox>
-          </HorizontalGroup>
+          </Stack>
         </CollapsableSection>
         <CollapsableSection label="Rich colors" isOpen={true}>
-          <DemoBox bg={t.colors.background.primary}>
+          <DemoBox bg="primary">
             <table className={colorsTableStyle}>
               <thead>
                 <tr>
@@ -134,7 +127,7 @@ export const ThemeDemo = () => {
           </DemoBox>
         </CollapsableSection>
         <CollapsableSection label="Forms" isOpen={true}>
-          <DemoBox bg={t.colors.background.primary}>
+          <DemoBox bg="primary">
             <Field label="Input label" description="Field description">
               <Input placeholder="Placeholder" />
             </Field>
@@ -147,7 +140,7 @@ export const ThemeDemo = () => {
             <Field label="Radio label">
               <RadioButtonGroup options={radioOptions} value={radioValue} onChange={setRadioValue} />
             </Field>
-            <HorizontalGroup>
+            <Stack>
               <Field label="Switch">
                 <Switch value={boolValue} onChange={(e) => setBoolValue(e.currentTarget.checked)} />
               </Field>
@@ -157,8 +150,8 @@ export const ThemeDemo = () => {
               <Field label="Switch false disabled" disabled={true}>
                 <Switch value={false} />
               </Field>
-            </HorizontalGroup>
-            <VerticalGroup>
+            </Stack>
+            <Stack direction="column">
               <div>Inline forms</div>
               <InlineFieldRow>
                 <InlineField label="Label">
@@ -168,22 +161,22 @@ export const ThemeDemo = () => {
                   <Input placeholder="Disabled" />
                 </InlineField>
               </InlineFieldRow>
-            </VerticalGroup>
+            </Stack>
           </DemoBox>
         </CollapsableSection>
         <CollapsableSection label="Shadows" isOpen={true}>
-          <DemoBox bg={t.colors.background.primary}>
-            <HorizontalGroup>
+          <DemoBox bg="primary">
+            <Stack>
               {Object.entries(t.shadows).map(([key, value]) => (
                 <ShadowDemo name={key} shadow={value} key={key} />
               ))}
-            </HorizontalGroup>
+            </Stack>
           </DemoBox>
         </CollapsableSection>
         <CollapsableSection label="Buttons" isOpen={true}>
-          <DemoBox bg={t.colors.background.primary}>
-            <VerticalGroup spacing="lg">
-              <HorizontalGroup>
+          <DemoBox bg="primary">
+            <Stack direction="column" gap={3}>
+              <Stack>
                 {allButtonVariants.map((variant) => (
                   <Button variant={variant} key={variant}>
                     {variant}
@@ -192,7 +185,7 @@ export const ThemeDemo = () => {
                 <Button variant="primary" disabled>
                   Disabled
                 </Button>
-              </HorizontalGroup>
+              </Stack>
               <Card>
                 <Card.Heading>Button inside card</Card.Heading>
                 <Card.Actions>
@@ -206,7 +199,7 @@ export const ThemeDemo = () => {
                   </Button>
                 </Card.Actions>
               </Card>
-            </VerticalGroup>
+            </Stack>
           </DemoBox>
         </CollapsableSection>
         <CollapsableSection label="Actions" isOpen={true}>
@@ -290,16 +283,16 @@ const colorsTableStyle = css({
 export function TextColors({ t }: { t: GrafanaTheme2 }) {
   return (
     <>
-      <DemoText color={t.colors.text.primary}>
+      <DemoText color="primary">
         text.primary <Icon name="trash-alt" />
       </DemoText>
-      <DemoText color={t.colors.text.secondary}>
+      <DemoText color="secondary">
         text.secondary <Icon name="trash-alt" />
       </DemoText>
-      <DemoText color={t.colors.text.disabled}>
+      <DemoText color="disabled">
         text.disabled <Icon name="trash-alt" />
       </DemoText>
-      <DemoText color={t.colors.primary.text}>
+      <DemoText color="primary">
         primary.text <Icon name="trash-alt" />
       </DemoText>
     </>
@@ -334,34 +327,34 @@ export function ActionsDemo() {
   });
 
   return (
-    <HorizontalGroup>
-      <DemoBox bg={t.colors.background.canvas}>
-        <VerticalGroup>
+    <Stack justifyContent="flex-start">
+      <DemoBox bg="canvas">
+        <Stack direction="column">
           <div className={item}>item</div>
           <div className={item}>item</div>
           <div className={cx(item, hover)}>item hover</div>
           <div className={cx(item, selected)}>item selected</div>
           <div className={cx(item, focused)}>item focused</div>
-        </VerticalGroup>
+        </Stack>
       </DemoBox>
-      <DemoBox bg={t.colors.background.primary}>
-        <VerticalGroup>
+      <DemoBox bg="primary">
+        <Stack direction="column">
           <div className={item}>item</div>
           <div className={item}>item</div>
           <div className={cx(item, hover)}>item hover</div>
           <div className={cx(item, selected)}>item selected</div>
           <div className={cx(item, focused)}>item focused</div>
-        </VerticalGroup>
+        </Stack>
       </DemoBox>
-      <DemoBox bg={t.colors.background.secondary}>
-        <VerticalGroup>
+      <DemoBox bg="secondary">
+        <Stack direction="column">
           <div className={item}>item</div>
           <div className={item}>item</div>
           <div className={cx(item, hover)}>item hover</div>
           <div className={cx(item, selected)}>item selected</div>
           <div className={cx(item, focused)}>item focused</div>
-        </VerticalGroup>
+        </Stack>
       </DemoBox>
-    </HorizontalGroup>
+    </Stack>
   );
 }