mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ValuePicker: refactors story from knobs to control (#33122)
* ValuePicker: refactors story from knobs to control * fixes wrong type issue
This commit is contained in:
parent
13cb34bbca
commit
f92b6518c5
@ -1,11 +1,11 @@
|
||||
import React from 'react';
|
||||
import { boolean, select, text } from '@storybook/addon-knobs';
|
||||
import { ButtonVariant, ValuePicker } from '@grafana/ui';
|
||||
import { Story } from '@storybook/react';
|
||||
import { ValuePicker } from '@grafana/ui';
|
||||
import { generateOptions } from '../Select/mockOptions';
|
||||
import { getIconKnob } from '../../utils/storybook/knobs';
|
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
import { ComponentSize } from '../../types/size';
|
||||
import { getAvailableIcons } from '../../types';
|
||||
import mdx from './ValuePicker.mdx';
|
||||
import { ValuePickerProps } from './ValuePicker';
|
||||
|
||||
export default {
|
||||
title: 'Pickers and Editors/ValuePicker',
|
||||
@ -15,33 +15,42 @@ export default {
|
||||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
knobs: {
|
||||
disabled: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['onChange', 'options'],
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['primary', 'secondary', 'destructive', 'link'],
|
||||
},
|
||||
},
|
||||
icon: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: getAvailableIcons(),
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
const VISUAL_GROUP = 'Visual options';
|
||||
const variants = ['primary', 'secondary', 'destructive', 'link'];
|
||||
const sizes = ['sm', 'md', 'lg'];
|
||||
const options = generateOptions();
|
||||
|
||||
export const simple = () => {
|
||||
const label = text('Label', 'Pick an option', VISUAL_GROUP);
|
||||
const variant = select('Variant', variants, 'primary', VISUAL_GROUP);
|
||||
const size = select('Size', sizes, 'md', VISUAL_GROUP);
|
||||
const isFullWidth = boolean('Is full width', false, VISUAL_GROUP);
|
||||
const icon = getIconKnob();
|
||||
const menuPlacement = select('Menu placement', ['auto', 'bottom', 'top'], 'auto', VISUAL_GROUP);
|
||||
|
||||
export const Simple: Story<ValuePickerProps<string>> = (args) => {
|
||||
return (
|
||||
<div style={{ width: '200px' }}>
|
||||
<ValuePicker
|
||||
options={options}
|
||||
label={label}
|
||||
onChange={(v) => console.log(v)}
|
||||
variant={variant as ButtonVariant}
|
||||
icon={icon}
|
||||
isFullWidth={isFullWidth}
|
||||
size={size as ComponentSize}
|
||||
menuPlacement={menuPlacement}
|
||||
/>
|
||||
<ValuePicker {...args} options={options} onChange={(v) => console.log(v)} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Simple.args = {
|
||||
label: 'Pick an option',
|
||||
variant: 'primary',
|
||||
size: 'md',
|
||||
isFullWidth: false,
|
||||
icon: 'plus',
|
||||
menuPlacement: 'auto',
|
||||
};
|
||||
|
@ -7,7 +7,7 @@ import { FullWidthButtonContainer } from '../Button/FullWidthButtonContainer';
|
||||
import { ComponentSize } from '../../types/size';
|
||||
import { selectors } from '@grafana/e2e-selectors';
|
||||
|
||||
interface ValuePickerProps<T> {
|
||||
export interface ValuePickerProps<T> {
|
||||
/** Label to display on the picker button */
|
||||
label: string;
|
||||
/** Icon to display on the picker button */
|
||||
|
Loading…
Reference in New Issue
Block a user