From f1de8940dcf7e4432fe45ca58513149c8758a299 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Tue, 16 Apr 2024 10:46:01 +0200
Subject: [PATCH] Grafana UI: `StackingEditor` and `addHideFrom` - Replace
 `HorizontalGroup` with `Stack` (#86192)

---
 packages/grafana-ui/src/options/builder/hideSeries.tsx | 6 +++---
 packages/grafana-ui/src/options/builder/stacking.tsx   | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/options/builder/hideSeries.tsx b/packages/grafana-ui/src/options/builder/hideSeries.tsx
index 90ae2deb6c5..6acb16ad363 100644
--- a/packages/grafana-ui/src/options/builder/hideSeries.tsx
+++ b/packages/grafana-ui/src/options/builder/hideSeries.tsx
@@ -5,7 +5,7 @@ import { FieldConfigEditorBuilder, StandardEditorProps } from '@grafana/data';
 import { HideableFieldConfig, HideSeriesConfig } from '@grafana/schema';
 
 import { FilterPill } from '../../components/FilterPill/FilterPill';
-import { HorizontalGroup } from '../../components/Layout/Layout';
+import { Stack } from '../../components/Layout/Stack/Stack';
 
 const SeriesConfigEditor = ({ value, onChange }: StandardEditorProps<HideSeriesConfig, {}>) => {
   const onChangeToggle = useCallback(
@@ -16,7 +16,7 @@ const SeriesConfigEditor = ({ value, onChange }: StandardEditorProps<HideSeriesC
   );
 
   return (
-    <HorizontalGroup spacing="xs">
+    <Stack gap={0.5}>
       {Object.keys(value).map((k) => {
         const key = k as keyof HideSeriesConfig;
         return (
@@ -29,7 +29,7 @@ const SeriesConfigEditor = ({ value, onChange }: StandardEditorProps<HideSeriesC
           />
         );
       })}
-    </HorizontalGroup>
+    </Stack>
   );
 };
 
diff --git a/packages/grafana-ui/src/options/builder/stacking.tsx b/packages/grafana-ui/src/options/builder/stacking.tsx
index 5d561c824a2..b099157cbff 100644
--- a/packages/grafana-ui/src/options/builder/stacking.tsx
+++ b/packages/grafana-ui/src/options/builder/stacking.tsx
@@ -12,7 +12,7 @@ import { GraphFieldConfig, StackingConfig, StackingMode } from '@grafana/schema'
 import { RadioButtonGroup } from '../../components/Forms/RadioButtonGroup/RadioButtonGroup';
 import { IconButton } from '../../components/IconButton/IconButton';
 import { Input } from '../../components/Input/Input';
-import { HorizontalGroup } from '../../components/Layout/Layout';
+import { Stack } from '../../components/Layout/Stack/Stack';
 import { graphFieldOptions } from '../../components/uPlot/config';
 
 export const StackingEditor = ({
@@ -22,7 +22,7 @@ export const StackingEditor = ({
   item,
 }: StandardEditorProps<StackingConfig, { options: Array<SelectableValue<StackingMode>> }>) => {
   return (
-    <HorizontalGroup>
+    <Stack>
       <RadioButtonGroup
         value={value?.mode || StackingMode.None}
         options={item.settings?.options ?? []}
@@ -47,7 +47,7 @@ export const StackingEditor = ({
           }}
         />
       )}
-    </HorizontalGroup>
+    </Stack>
   );
 };