Docs: Drawer component (#27267)

* Add documentation and example to mdx

* Update packages/grafana-ui/src/components/Drawer/Drawer.mdx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update packages/grafana-ui/src/components/Drawer/Drawer.mdx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Fix button and update text

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
This commit is contained in:
Peter Holmberg 2020-09-01 14:12:23 +02:00 committed by GitHub
parent f323ae6b67
commit d07755b624
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 30 deletions

View File

@ -1,4 +1,35 @@
import { Props } from '@storybook/addon-docs/blocks';
import { Meta, Props } from '@storybook/addon-docs/blocks';
import { Drawer } from './Drawer';
<Meta title="MDX|Drawer" component={Drawer} />
# Drawer
### When to use
Drawer is a slide in overlay that can be used to display additional information without hiding the main page content. It can be anchored to the left or right edge of the screen.
One example of the Drawer in use is in Grafana's [panel inspector](https://grafana.com/docs/grafana/latest/panels/inspect-panel/).
### Usage
```tsx
import { Drawer } from '@grafana/ui';
onClose = () => {
// handle the show or hide Drawer logic
}
return (
<Drawer
title="This a Drawer"
width="60%"
onClose={this.onClose}
>
<div>
Put your Drawer content here
</div>
</Drawer>
)
```
<Props of={Drawer} />

View File

@ -1,6 +1,6 @@
import React from 'react';
import { text } from '@storybook/addon-knobs';
import { Drawer } from '@grafana/ui';
import { Button, Drawer } from '@grafana/ui';
import { UseState } from '../../utils/storybook/UseState';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import mdx from './Drawer.mdx';
@ -17,19 +17,14 @@ export default {
};
export const global = () => {
const drawerTitle = text('title', 'Storybook');
const drawerTitle = text('title', 'Drawer title');
return (
<UseState initialState={{ isOpen: false }}>
{(state, updateValue) => {
return (
<>
<div
style={{ border: '1px solid gray', borderRadius: '4px', padding: '10px', cursor: 'pointer' }}
onClick={() => updateValue({ isOpen: !state.isOpen })}
>
Open drawer
</div>
<Button onClick={() => updateValue({ isOpen: !state.isOpen })}>Open drawer</Button>
{state.isOpen && (
<Drawer
title={drawerTitle}
@ -38,15 +33,17 @@ export const global = () => {
updateValue({ isOpen: !state.isOpen });
}}
>
<ul>
<li>this</li>
<li>is</li>
<li>a</li>
<li>list</li>
<li>of</li>
<li>menu</li>
<li>items</li>
</ul>
<div style={{ padding: '10px' }}>
<ul>
<li>this</li>
<li>is</li>
<li>a</li>
<li>list</li>
<li>of</li>
<li>menu</li>
<li>items</li>
</ul>
</div>
</Drawer>
)}
</>
@ -62,12 +59,7 @@ export const longContent = () => {
{(state, updateValue) => {
return (
<>
<div
style={{ border: '1px solid gray', borderRadius: '4px', padding: '10px', cursor: 'pointer' }}
onClick={() => updateValue({ isOpen: !state.isOpen })}
>
Open drawer
</div>
<Button onClick={() => updateValue({ isOpen: !state.isOpen })}>Open drawer</Button>
{state.isOpen && (
<Drawer
scrollableContent
@ -174,12 +166,7 @@ export const inLine = () => {
overflow: 'hidden',
}}
>
<div
style={{ border: '1px solid gray', borderRadius: '4px', padding: '10px', cursor: 'pointer' }}
onClick={() => updateValue({ isOpen: !state.isOpen })}
>
Open drawer
</div>
<Button onClick={() => updateValue({ isOpen: !state.isOpen })}>Open drawer</Button>
{state.isOpen && (
<Drawer
inline={true}

View File

@ -26,6 +26,7 @@ export interface Props {
/** Set to true if the component rendered within in drawer content has its own scroll */
scrollableContent?: boolean;
/** Callback for closing the drawer */
onClose: () => void;
}