From 0e12f60ee63256413056ffab42af1945abfb8ec1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Mon, 8 Apr 2024 17:21:58 +0200
Subject: [PATCH] Grafana UI: `FilterPill.story.tsx` - Replace
 `HorizontalGroup` with `Stack` (#85736)

---
 .betterer.results                                           | 3 ---
 .../src/components/FilterPill/FilterPill.story.tsx          | 6 +++---
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index a6e30ae9f67..ffc43a7a85e 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -820,9 +820,6 @@ exports[`better eslint`] = {
     "packages/grafana-ui/src/components/Dropdown/Dropdown.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/FilterPill/FilterPill.story.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'../Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "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"]
     ],
diff --git a/packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx b/packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx
index aba8951b91c..40590ae4011 100644
--- a/packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx
+++ b/packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx
@@ -2,7 +2,7 @@ import { Meta, StoryFn } from '@storybook/react';
 import React, { useState } from 'react';
 
 import { getAvailableIcons } from '../../types';
-import { HorizontalGroup } from '../Layout/Layout';
+import { Stack } from '../Layout/Stack/Stack';
 
 import { FilterPill } from './FilterPill';
 import mdx from './FilterPill.mdx';
@@ -30,11 +30,11 @@ export const Example = () => {
   const elements = ['Singapore', 'Paris', 'Stockholm', 'New York', 'London'];
 
   return (
-    <HorizontalGroup>
+    <Stack>
       {elements.map((item) => (
         <FilterPill key={item} label={item} selected={item === selected} onClick={() => setSelected(item)} />
       ))}
-    </HorizontalGroup>
+    </Stack>
   );
 };