From 4f433ada14065e46b0da033f879db231dcc0c679 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Mon, 11 Nov 2024 12:02:58 +0100
Subject: [PATCH] Combobox: Fix stories (#96206)

Spread args onto component in stories
---
 .../src/components/Combobox/Combobox.story.tsx     | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/Combobox/Combobox.story.tsx b/packages/grafana-ui/src/components/Combobox/Combobox.story.tsx
index 1d73722378e..b1c528cc2a7 100644
--- a/packages/grafana-ui/src/components/Combobox/Combobox.story.tsx
+++ b/packages/grafana-ui/src/components/Combobox/Combobox.story.tsx
@@ -122,6 +122,7 @@ const SelectComparisonStory: StoryFn<typeof Combobox> = (args) => {
     <div style={{ border: '1px solid ' + theme.colors.border.weak, padding: 16 }}>
       <Field label="Combobox with default size">
         <Combobox
+          {...args}
           id="combobox-default-size"
           value={comboboxValue}
           options={args.options}
@@ -147,7 +148,9 @@ const SelectComparisonStory: StoryFn<typeof Combobox> = (args) => {
       <Divider />
 
       <Field label="Combobox with explicit size (25)">
+        {/*@ts-ignore minWidth and maxWidth has never, which is incompatible with args. It lacks the context that width=25 on the component*/}
         <Combobox
+          {...args}
           id="combobox-explicit-size"
           width={25}
           value={comboboxValue}
@@ -176,6 +179,7 @@ const SelectComparisonStory: StoryFn<typeof Combobox> = (args) => {
 
       <Field label="Combobox with auto width, minWidth 15">
         <Combobox
+          {...args}
           id="combobox-auto-size"
           width="auto"
           minWidth={15}
@@ -203,6 +207,7 @@ const SelectComparisonStory: StoryFn<typeof Combobox> = (args) => {
 
       <Field label="Combobox with auto width, minWidth 15, empty value">
         <Combobox
+          {...args}
           id="combobox-auto-size-empty"
           width="auto"
           minWidth={15}
@@ -288,6 +293,7 @@ const AsyncStory: StoryFn<PropsAndCustomArgs> = (args) => {
         description="This tests when options have both a label and a value. Consumers are required to pass in a full ComboboxOption as a value with a label"
       >
         <Combobox
+          {...args}
           id="test-combobox-one"
           placeholder="Select an option"
           options={loadOptionsWithLabels}
@@ -305,6 +311,7 @@ const AsyncStory: StoryFn<PropsAndCustomArgs> = (args) => {
         description="Or without labels, where consumer can just pass in a raw scalar value Value"
       >
         <Combobox
+          {...args}
           id="test-combobox-two"
           placeholder="Select an option"
           options={loadOptionsOnlyValues}
@@ -319,6 +326,7 @@ const AsyncStory: StoryFn<PropsAndCustomArgs> = (args) => {
 
       <Field label="Async with error" description="An odd number of characters throws an error">
         <Combobox
+          {...args}
           id="test-combobox-error"
           placeholder="Select an option"
           options={loadOptionsWithErrors}
@@ -366,9 +374,9 @@ const PositioningTestStory: StoryFn<PropsAndCustomArgs> = (args) => {
           flex: 1,
         }}
       >
-        <Combobox placeholder={`${pos} top`} options={args.options} value={null} onChange={noop} />
-        <Combobox placeholder={`${pos} middle`} options={args.options} value={null} onChange={noop} />
-        <Combobox placeholder={`${pos} bottom`} options={args.options} value={null} onChange={noop} />
+        <Combobox {...args} placeholder={`${pos} top`} options={args.options} value={null} onChange={noop} />
+        <Combobox {...args} placeholder={`${pos} middle`} options={args.options} value={null} onChange={noop} />
+        <Combobox {...args} placeholder={`${pos} bottom`} options={args.options} value={null} onChange={noop} />
       </div>
     );
   }