AutoSaveField: Change the story to use Combobox instead of Select (#101922)

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