IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-13 09:05:45 -06:00
Code Issues Packages Projects Releases Wiki Activity

FormField: update story from knobs to controls (#32018)

Browse Source
This commit is contained in:
Uchechukwu Obasi 2021-03-16 12:49:46 +01:00 committed by GitHub
parent cc29bc3c5d
commit ec95049a95
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx
View File

@ -1,30 +1,39 @@
import React from 'react';
import { number, text } from '@storybook/addon-knobs';
import { Story } from '@storybook/react';
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { FormField } from './FormField';
const getKnobs = () => {
return {
label: text('label', 'Test'),
tooltip: text('tooltip', 'This is a tooltip with information about this FormField'),
labelWidth: number('labelWidth', 10),
inputWidth: number('inputWidth', 20),
};
};
import { FormField, Props } from './FormField';
export default {
title: 'Forms/Legacy/FormField',
component: FormField,
decorators: [withCenteredStory],
parameters: {
knobs: {
disable: true,
},
},
args: {
inputWidth: 20,
labelWidth: 10,
label: 'Test',
},
argTypes: {
inputWidth: { control: { type: 'range', min: 5, max: 30 } },
labelWidth: { control: { type: 'range', min: 5, max: 30 } },
tooltip: { control: { type: 'text' } },
inputEl: NOOP_CONTROL,
},
};
export const basic = () => {
const { inputWidth, label, labelWidth } = getKnobs();
return <FormField label={label} labelWidth={labelWidth} inputWidth={inputWidth} />;
export const Basic: Story<Props> = (args) => {
return <FormField {...args} />;
};
export const withTooltip = () => {
const { inputWidth, label, labelWidth, tooltip } = getKnobs();
return <FormField label={label} labelWidth={labelWidth} inputWidth={inputWidth} tooltip={tooltip} />;
export const WithTooltip: Story<Props> = ({ tooltip, ...args }) => {
return <FormField {...args} tooltip={tooltip} />;
};
WithTooltip.args = {
tooltip: 'This is a tooltip with information about this FormField',
};