IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-26 00:41:20 -06:00
Code Issues Packages Projects Releases Wiki Activity

Combobox: Fix stories (#96206)

Browse Source 
Spread args onto component in stories
This commit is contained in:
Tobias Skarhed 2024-11-11 12:02:58 +01:00 committed by GitHub
parent 7112a79b35
commit 4f433ada14
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/grafana-ui/src/components/Combobox/Combobox.story.tsx
View File

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