IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ButtonSelect: updates story from knobs to controls (#32229)

Browse Source 
* ButtonStory: updates story from knobs to controls

* removed type in story

* changed to a much descriptive variable name

* adds type back to the story
This commit is contained in:
Uchechukwu Obasi 2021-03-23 09:52:48 +01:00 committed by GitHub
parent ed9b623b37
commit 61ea7b5290
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/grafana-ui/src/components/Dropdown/ButtonSelect.story.internal.tsx
View File

@ -1,33 +1,41 @@
import React, { FC } from 'react';
import React from 'react';
import { action } from '@storybook/addon-actions';
import { withKnobs, object } from '@storybook/addon-knobs';
import { Story } from '@storybook/react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { UseState } from '../../utils/storybook/UseState';
import { SelectableValue } from '@grafana/data';
import { ButtonSelect } from './ButtonSelect';
import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
export default {
title: 'Forms/Select/ButtonSelect',
component: ButtonSelect,
decorators: [withCenteredStory, withKnobs],
decorators: [withCenteredStory],
parameters: {
knobs: {
disable: true,
},
},
argTypes: {
className: NOOP_CONTROL,
options: NOOP_CONTROL,
value: NOOP_CONTROL,
tooltipContent: NOOP_CONTROL,
},
};
export const Basic: FC = () => {
const initialState: SelectableValue<string> = { label: 'A label', value: 'A value' };
const value = object<SelectableValue<string>>('Selected Value:', initialState);
const options = object<Array<SelectableValue<string>>>('Options:', [
initialState,
{ label: 'Another label', value: 'Another value' },
]);
export const Basic: Story = (args) => {
const initialValue: SelectableValue<string> = { label: 'A label', value: 'A value' };
const options: Array<SelectableValue<string>> = [initialValue, { label: 'Another label', value: 'Another value' }];
return (
<DashboardStoryCanvas>
<UseState initialState={value}>
<UseState initialState={initialValue}>
{(value, updateValue) => {
return (
<div style={{ marginLeft: '100px', position: 'relative', display: 'inline-block' }}>
<ButtonSelect
{...args}
value={value}
options={options}
onChange={(value) => {
@ -43,3 +51,7 @@ export const Basic: FC = () => {
</DashboardStoryCanvas>
);
};
Basic.args = {
narrow: true,
variant: 'default',
};