From da25d97ffde0d9af934b10cdc3e5ac4e1e3e8101 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Tue, 11 Mar 2025 10:59:55 +0100
Subject: [PATCH] AutoSaveField: Change the story to use `Combobox` instead of
 `Select` (#101922)

---
 .../AutoSaveField/AutoSaveField.story.tsx     | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.story.tsx b/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.story.tsx
index 7e5d0f911d8..1f033fcf69c 100644
--- a/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.story.tsx
+++ b/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.story.tsx
@@ -1,10 +1,10 @@
 import { StoryFn, Meta } from '@storybook/react';
 import { useState } from 'react';
 
+import { Combobox } from '../Combobox/Combobox';
 import { Checkbox } from '../Forms/Checkbox';
 import { RadioButtonGroup } from '../Forms/RadioButtonGroup/RadioButtonGroup';
 import { Input } from '../Input/Input';
-import { Select } from '../Select/Select';
 import { Switch } from '../Switch/Switch';
 import { TextArea } from '../TextArea/TextArea';
 
@@ -97,11 +97,12 @@ Basic.args = {
 };
 
 export const AllComponents: StoryFn = (args) => {
-  const [selected, setSelected] = useState('');
-  const [checkBoxTest, setCheckBoxTest] = useState(false);
-  const [textAreaValue, setTextAreaValue] = useState('');
   const [inputTextValue, setInputTextValue] = useState('');
-  const [switchTest, setSwitchTest] = useState(false);
+  const [comoboboxValue, setComboboxValue] = useState('');
+  const [radioButtonValue, setRadioButtonValue] = useState('');
+  const [checkBoxValue, setCheckBoxValue] = useState(false);
+  const [textAreaValue, setTextAreaValue] = useState('');
+  const [switchValue, setSwitchValue] = useState(false);
 
   return (
     <div>
@@ -117,13 +118,14 @@ export const AllComponents: StoryFn = (args) => {
           />
         )}
       </AutoSaveField>
-      <AutoSaveField onFinishChange={args.inputSuccessful ? getSuccess : getError} label="Select as child" {...args}>
+      <AutoSaveField onFinishChange={args.inputSuccessful ? getSuccess : getError} label="Combobox as child" {...args}>
         {(onChange) => (
-          <Select
+          <Combobox
             options={themeOptions}
-            value={args.weekPickerValue}
+            value={comoboboxValue}
             onChange={(v) => {
               onChange(v.value);
+              setComboboxValue(v.value);
             }}
           />
         )}
@@ -136,9 +138,9 @@ export const AllComponents: StoryFn = (args) => {
         {(onChange) => (
           <RadioButtonGroup
             options={themeOptions}
-            value={selected}
+            value={radioButtonValue}
             onChange={(themeOption) => {
-              setSelected(themeOption);
+              setRadioButtonValue(themeOption);
               onChange(themeOption);
             }}
           />
@@ -154,11 +156,11 @@ export const AllComponents: StoryFn = (args) => {
             label="Checkbox test"
             description="This is a checkbox input"
             name="checkbox-test"
-            value={checkBoxTest}
+            value={checkBoxValue}
             onChange={(e) => {
               const value = e.currentTarget.checked;
               onChange(value);
-              setCheckBoxTest(value);
+              setCheckBoxValue(value);
             }}
           />
         )}
@@ -188,10 +190,10 @@ export const AllComponents: StoryFn = (args) => {
           <Switch
             label="Switch test"
             name="switch-test"
-            value={switchTest}
+            value={switchValue}
             onChange={(e) => {
               onChange(e.currentTarget.checked);
-              setSwitchTest(e.currentTarget.checked);
+              setSwitchValue(e.currentTarget.checked);
             }}
           />
         )}