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

Chore: Added controls to IconButton & renamed Simple story to Examples (#54371)

Browse Source
This commit is contained in:
Orlando Ortega Jr 2022-09-12 07:03:25 -04:00 committed by GitHub
parent 58e17f8144
commit 28619d7a55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/grafana-ui/src/components/IconButton/IconButton.story.tsx
View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { ComponentMeta } from '@storybook/react'; import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react'; import React from 'react';
import { useTheme2 } from '../../themes'; import { useTheme2 } from '../../themes';
@ -7,7 +7,7 @@ import { IconSize, IconName } from '../../types';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { VerticalGroup } from '../Layout/Layout'; import { VerticalGroup } from '../Layout/Layout';
import { IconButton, IconButtonVariant } from './IconButton'; import { IconButton, IconButtonVariant, Props as IconButtonProps } from './IconButton';
import mdx from './IconButton.mdx'; import mdx from './IconButton.mdx';
const meta: ComponentMeta<typeof IconButton> = { const meta: ComponentMeta<typeof IconButton> = {
@ -19,9 +19,23 @@ const meta: ComponentMeta<typeof IconButton> = {
page: mdx, page: mdx,
}, },
}, },
args: {
name: 'apps',
size: 'md',
iconType: 'default',
tooltip: 'sample tooltip message',
tooltipPlacement: 'top',
variant: 'secondary',
ariaLabel: 'sample aria-label content',
},
argTypes: {
tooltip: {
control: 'text',
},
},
}; };
export const Simple = () => { export const Examples = () => {
return ( return (
<div> <div>
<RenderScenario background="canvas" /> <RenderScenario background="canvas" />
@ -31,6 +45,10 @@ export const Simple = () => {
); );
}; };
export const Basic: ComponentStory<typeof IconButton> = (args: IconButtonProps) => {
return <IconButton {...args} />;
};
interface ScenarioProps { interface ScenarioProps {
background: 'canvas' | 'primary' | 'secondary'; background: 'canvas' | 'primary' | 'secondary';
} }