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

Docs: Drawer component (#27267)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/grafana-ui/src/components/Drawer/Drawer.mdx
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'; 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} /> <Props of={Drawer} />

45
packages/grafana-ui/src/components/Drawer/Drawer.story.tsx
View File

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

1
packages/grafana-ui/src/components/Drawer/Drawer.tsx
View File

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