From 3fffb2872e20c895b0acdf48800ba81b9d5fa2f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Tue, 11 Mar 2025 11:47:59 +0100
Subject: [PATCH] InlineField: Use `Combobox` instead of `Select` (#101923)

Use Combobox instead of Select
---
 .../components/Forms/InlineField.story.tsx    | 24 +++++++++----------
 .../src/components/Forms/InlineField.test.tsx |  8 +++++--
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/grafana-ui/src/components/Forms/InlineField.story.tsx b/packages/grafana-ui/src/components/Forms/InlineField.story.tsx
index 384e5aa98de..da42f012f3a 100644
--- a/packages/grafana-ui/src/components/Forms/InlineField.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/InlineField.story.tsx
@@ -1,8 +1,8 @@
-import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/react';
+import { useState } from 'react';
 
+import { Combobox } from '../Combobox/Combobox';
 import { Input } from '../Input/Input';
-import { Select } from '../Select/Select';
 
 import { InlineField } from './InlineField';
 import mdx from './InlineField.mdx';
@@ -75,24 +75,22 @@ grow.args = {
   grow: true,
 };
 
-export const withSelect: StoryFn<typeof InlineField> = (args) => {
+export const withCombobox: StoryFn<typeof InlineField> = (args) => {
+  const comboboxOptions = [
+    { value: 1, label: 'One' },
+    { value: 2, label: 'Two' },
+  ];
+  const [selected, setSelected] = useState(1);
   return (
     <InlineField {...args}>
-      <Select
-        width={16}
-        onChange={action('item selected')}
-        options={[
-          { value: 1, label: 'One' },
-          { value: 2, label: 'Two' },
-        ]}
-      />
+      <Combobox width={16} onChange={(v) => setSelected(v.value)} options={comboboxOptions} value={selected} />
     </InlineField>
   );
 };
 
-withSelect.args = {
+withCombobox.args = {
   ...basic.args,
-  label: 'Select option',
+  label: 'Combobox option',
 };
 
 export const multiple: StoryFn<typeof InlineField> = () => {
diff --git a/packages/grafana-ui/src/components/Forms/InlineField.test.tsx b/packages/grafana-ui/src/components/Forms/InlineField.test.tsx
index 657c11875c6..cd7cd0e7fed 100644
--- a/packages/grafana-ui/src/components/Forms/InlineField.test.tsx
+++ b/packages/grafana-ui/src/components/Forms/InlineField.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 
+import { Combobox } from '../Combobox/Combobox';
 import { Input } from '../Input/Input';
-import { Select } from '../Select/Select';
 
 import { InlineField } from './InlineField';
 
@@ -27,9 +27,13 @@ describe('InlineField', () => {
   });
 
   it('renders with the inputId of its children', () => {
+    const comboboxOptions = [
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' },
+    ];
     render(
       <InlineField label="My other label">
-        <Select inputId="my-select-input" onChange={() => {}} />
+        <Combobox id="my-select-input" options={comboboxOptions} onChange={() => {}} />
       </InlineField>
     );