From cb008657cb02f1184a782231f4f544ac445377ae Mon Sep 17 00:00:00 2001
From: Kyle Cunningham <codeincarnate@users.noreply.github.com>
Date: Tue, 5 Mar 2024 13:54:31 -0600
Subject: [PATCH] Table Panel: Update column filters to use Stack component
 (#83800)

* Update filter list to use stack

* Remove dead comments
---
 .../src/components/Table/FilterList.tsx          | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/FilterList.tsx b/packages/grafana-ui/src/components/Table/FilterList.tsx
index 9a65476e6f4..1ea721809d5 100644
--- a/packages/grafana-ui/src/components/Table/FilterList.tsx
+++ b/packages/grafana-ui/src/components/Table/FilterList.tsx
@@ -4,7 +4,7 @@ import { FixedSizeList as List } from 'react-window';
 
 import { GrafanaTheme2, formattedValueToString, getValueFormat, SelectableValue } from '@grafana/data';
 
-import { ButtonSelect, Checkbox, FilterInput, HorizontalGroup, Label, VerticalGroup } from '..';
+import { ButtonSelect, Checkbox, FilterInput, Label, Stack } from '..';
 import { useStyles2, useTheme2 } from '../../themes';
 
 interface Props {
@@ -169,11 +169,11 @@ export const FilterList = ({
   }, [onChange, values, items, selectedItems]);
 
   return (
-    <VerticalGroup spacing="md">
+    <Stack direction="column" gap={0.25}>
       {!showOperators && <FilterInput placeholder="Filter values" onChange={setSearchFilter} value={searchFilter} />}
       {showOperators && (
-        <HorizontalGroup>
-          <ButtonSelect<string>
+        <Stack direction="row" gap={0}>
+          <ButtonSelect
             variant="canvas"
             options={OPERATORS}
             onChange={setOperator}
@@ -181,7 +181,7 @@ export const FilterList = ({
             tooltip={operator.description}
           />
           <FilterInput placeholder="Filter values" onChange={setSearchFilter} value={searchFilter} />
-        </HorizontalGroup>
+        </Stack>
       )}
       {!items.length && <Label>No values</Label>}
       {items.length && (
@@ -206,7 +206,7 @@ export const FilterList = ({
         </List>
       )}
       {items.length && (
-        <VerticalGroup spacing="xs">
+        <Stack direction="column" gap={0.25}>
           <div className={cx(styles.selectDivider)} />
           <div className={cx(styles.filterListRow)}>
             <Checkbox
@@ -217,9 +217,9 @@ export const FilterList = ({
               onChange={onSelectChanged}
             />
           </div>
-        </VerticalGroup>
+        </Stack>
       )}
-    </VerticalGroup>
+    </Stack>
   );
 };