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>

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

@@ -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} />

packages/grafana-ui/src/components/Drawer/Drawer.story.tsx

@@ -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}

packages/grafana-ui/src/components/Drawer/Drawer.tsx

@@ -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;
 }