IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-29 20:24:18 -06:00
Code Issues Packages Projects Releases Wiki Activity

Storybook: CSF Modal conversion (#24085)

Browse Source 
* Convert modal

* Update packages/grafana-ui/src/components/Modal/Modal.story.tsx

Co-Authored-By: Alex Khomenko <Clarity-89@users.noreply.github.com>

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
This commit is contained in:
Tobias Skarhed 2020-04-30 16:47:29 +02:00 committed by GitHub
parent 2e4a8d4d5a
commit 7b7c365018
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/grafana-ui/src/components/Modal/Modal.story.tsx
View File

@ -1,5 +1,4 @@
import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';
import { oneLineTrim } from 'common-tags';
import { text, boolean } from '@storybook/addon-knobs';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@ -27,10 +26,13 @@ amet.`
};
};
const ModalStories = storiesOf('Overlays/Modal', module);
ModalStories.addDecorator(withCenteredStory);
export default {
title: 'Overlays/Modal',
component: Modal,
decorators: [withCenteredStory],
};
ModalStories.add('default', () => {
export const basic = () => {
const { body, visible } = getKnobs();
return (
<Modal
@ -45,7 +47,7 @@ ModalStories.add('default', () => {
{body}
</Modal>
);
});
};
const tabs = [
{ label: '1st child', value: 'first', active: true },
@ -53,7 +55,7 @@ const tabs = [
{ label: '3rd child', value: 'third', active: false },
];
ModalStories.add('with tabs', () => {
export const withTabs = () => {
const [activeTab, setActiveTab] = useState('first');
const modalHeader = (
<ModalTabsHeader
@ -83,4 +85,4 @@ ModalStories.add('with tabs', () => {
}}
</UseState>
);
});
};

2
packages/grafana-ui/src/components/Modal/Modal.tsx
View File

@ -8,7 +8,7 @@ import { getModalStyles } from './getModalStyles';
import { ModalHeader } from './ModalHeader';
import { IconButton } from '../IconButton/IconButton';
interface Props extends Themeable {
export interface Props extends Themeable {
icon?: IconName;
title: string | JSX.Element;
className?: string;