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

Storybook: Add controls to button story (#54389)

Browse Source
This commit is contained in:
Piotr Pomierski 2022-08-31 12:42:47 +02:00 committed by GitHub
parent 87f2b13efa
commit e95bab1f2b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/grafana-ui/src/components/Button/Button.story.tsx
View File

@ -1,15 +1,17 @@
import { ComponentStory, ComponentMeta } from '@storybook/react'; import { ComponentStory } from '@storybook/react';
import React from 'react'; import React from 'react';
import { ComponentSize } from '../../types/size'; import { ComponentSize } from '../../types/size';
import { Card } from '../Card/Card'; import { Card } from '../Card/Card';
import { HorizontalGroup, VerticalGroup } from '../Layout/Layout'; import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';
import { allButtonVariants, allButtonFills, Button } from './Button'; import { allButtonVariants, allButtonFills, Button, ButtonProps } from './Button';
import mdx from './Button.mdx'; import mdx from './Button.mdx';
import { ButtonGroup } from './ButtonGroup'; import { ButtonGroup } from './ButtonGroup';
const meta: ComponentMeta<typeof Button> = { const sizes: ComponentSize[] = ['lg', 'md', 'sm'];
export default {
title: 'Buttons/Button', title: 'Buttons/Button',
component: Button, component: Button,
parameters: { parameters: {
@ -17,10 +19,29 @@ const meta: ComponentMeta<typeof Button> = {
page: mdx, page: mdx,
}, },
}, },
argTypes: {
size: {
options: sizes,
},
tooltip: {
table: {
disable: true,
},
},
tooltipPlacement: {
table: {
disable: true,
},
},
className: {
table: {
disable: true,
},
},
},
}; };
export const Variants: ComponentStory<typeof Button> = () => { export const Examples: ComponentStory<typeof Button> = () => {
const sizes: ComponentSize[] = ['lg', 'md', 'sm'];
return ( return (
<VerticalGroup> <VerticalGroup>
{allButtonFills.map((buttonFill) => ( {allButtonFills.map((buttonFill) => (
@ -88,4 +109,12 @@ export const Variants: ComponentStory<typeof Button> = () => {
); );
}; };
export default meta; export const Basic: ComponentStory<typeof Button> = (args: ButtonProps) => <Button {...args} />;
Basic.args = {
children: 'Example button',
size: 'md',
variant: 'primary',
fill: 'solid',
type: 'button',
};