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

Storybook: Add controls to FieldSet story (#54964)

Browse Source
This commit is contained in:
Tima Gixe 2022-09-09 15:23:50 +03:00 committed by GitHub
parent a37fa758a2
commit 7104d90b39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/grafana-ui/src/components/Forms/FieldSet.story.tsx
View File

@ -1,4 +1,4 @@
import { ComponentMeta } from '@storybook/react';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import React from 'react';
import { Input, Form, FieldSet, Field } from '@grafana/ui';
@ -6,34 +6,41 @@ import { Input, Form, FieldSet, Field } from '@grafana/ui';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { Button } from '../Button';
import { Props } from './FieldSet';
import mdx from './FieldSet.mdx';
const meta: ComponentMeta<typeof FieldSet> = {
title: 'Forms/FieldSet',
component: FieldSet,
decorators: [withCenteredStory],
args: {
label: 'Default label',
},
parameters: {
docs: {
page: mdx,
},
controls: {
exclude: ['children'],
},
},
argTypes: {
label: { control: 'text' },
},
};
export const basic = () => {
export const Basic: ComponentStory<typeof FieldSet> = (args: Props) => {
return (
<Form onSubmit={() => console.log('Submit')}>
{() => (
<>
<FieldSet label="Details">
<FieldSet {...args}>
<Field label="Name">
<Input name="name" />
</Field>
<Field label="Email">
<Input name="email" />
</Field>
</FieldSet>
<FieldSet label="Preferences">
<Field label="Color">
<Input name="color" />
</Field>