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

ToolbarButton: Add back useful storybook story (#52683)

Browse Source 
* ToolbarButton: Add back useful storybook story

* Remove duplicate bits
This commit is contained in:
Torkel Ödegaard 2022-07-25 12:46:07 +02:00 committed by GitHub
parent 7f73f65bcd
commit 9d6994c565
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 67 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx
View File

@ -1,10 +1,12 @@
import { ComponentMeta, ComponentStory } from '@storybook/react'; import { ComponentMeta, ComponentStory } from '@storybook/react';
import React from 'react'; import React from 'react';
import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { ButtonGroup } from '../Button'; import { ButtonGroup } from '../Button';
import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';
import { ToolbarButton } from './ToolbarButton'; import { ToolbarButton, ToolbarButtonVariant } from './ToolbarButton';
import mdx from './ToolbarButton.mdx'; import mdx from './ToolbarButton.mdx';
import { ToolbarButtonRow } from './ToolbarButtonRow'; import { ToolbarButtonRow } from './ToolbarButtonRow';
@ -89,18 +91,71 @@ BasicWithIcon.args = {
iconOnly: true, iconOnly: true,
}; };
export const List: ComponentStory<typeof ToolbarButton> = (args) => { export const Examples: ComponentStory<typeof ToolbarButton> = (args) => {
const variants: ToolbarButtonVariant[] = ['default', 'active', 'primary', 'destructive'];
return ( return (
<ToolbarButtonRow> <DashboardStoryCanvas>
<ToolbarButton variant={args.variant} iconOnly={false} isOpen={false}> <VerticalGroup>
Last 6 hours Button states
</ToolbarButton> <ToolbarButtonRow>
<ButtonGroup> <ToolbarButton>Just text</ToolbarButton>
<ToolbarButton icon="search-minus" variant={args.variant} /> <ToolbarButton icon="sync" tooltip="Sync" />
<ToolbarButton icon="search-plus" variant={args.variant} /> <ToolbarButton imgSrc="./grafana_icon.svg">With imgSrc</ToolbarButton>
</ButtonGroup> <ToolbarButton icon="cloud" isOpen={true}>
<ToolbarButton icon="sync" isOpen={false} variant={args.variant} /> isOpen
</ToolbarButtonRow> </ToolbarButton>
<ToolbarButton icon="cloud" isOpen={false}>
isOpen = false
</ToolbarButton>
</ToolbarButtonRow>
<br />
disabled
<ToolbarButtonRow>
<ToolbarButton icon="sync" disabled>
Disabled
</ToolbarButton>
</ToolbarButtonRow>
<br />
Variants
<ToolbarButtonRow>
{variants.map((variant) => (
<ToolbarButton icon="sync" tooltip="Sync" variant={variant} key={variant}>
{variant}
</ToolbarButton>
))}
</ToolbarButtonRow>
<br />
Wrapped in noSpacing ButtonGroup
<ButtonGroup>
<ToolbarButton icon="clock-nine" tooltip="Time picker">
2020-10-02
</ToolbarButton>
<ToolbarButton icon="search-minus" />
</ButtonGroup>
<br />
<ButtonGroup>
<ToolbarButton icon="sync" />
<ToolbarButton isOpen={false} narrow />
</ButtonGroup>
<br />
Inside button group
<HorizontalGroup>
<ButtonGroup>
<ToolbarButton variant="primary" icon="sync">
Run query
</ToolbarButton>
<ToolbarButton isOpen={false} narrow variant="primary" />
</ButtonGroup>
<ButtonGroup>
<ToolbarButton variant="destructive" icon="sync">
Run query
</ToolbarButton>
<ToolbarButton isOpen={false} narrow variant="destructive" />
</ButtonGroup>
</HorizontalGroup>
</VerticalGroup>
</DashboardStoryCanvas>
); );
}; };