Grafana UI: StackingEditor and addHideFrom - Replace HorizontalGroup with Stack (#86192)

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>
   );
 };
 

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>
   );
 };