From 413cc7c5a882b5496d1bac37a7c7072d19505e7e Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Sat, 2 May 2020 12:52:22 +0300
Subject: [PATCH] Storybook/fix modal docs (#24150)

* Convert modal

* Storybook: Add mdx for Modal

* Storybook: Add mdx for ConfirmModal

Co-authored-by: Tobias Skarhed <tobias.skarhed@gmail.com>
(cherry picked from commit 89ee84a9091b9aa824bba1d92076b4ac72b2c7e0)
---
 .../components/ConfirmModal/ConfirmModal.mdx    | 10 ++++++++++
 .../ConfirmModal/ConfirmModal.story.tsx         |  6 ++++++
 .../components/ConfirmModal/ConfirmModal.tsx    |  6 ++----
 .../grafana-ui/src/components/Modal/Modal.mdx   | 17 +++++++++++++++++
 .../src/components/Modal/Modal.story.tsx        |  6 ++++++
 .../grafana-ui/src/components/Modal/Modal.tsx   |  3 ++-
 .../src/components/Modal/ModalsContext.tsx      |  4 ++--
 7 files changed, 45 insertions(+), 7 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.mdx
 create mode 100644 packages/grafana-ui/src/components/Modal/Modal.mdx

diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.mdx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.mdx
new file mode 100644
index 00000000000..d9bebe6c2a8
--- /dev/null
+++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.mdx
@@ -0,0 +1,10 @@
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { ConfirmModal } from './ConfirmModal';
+
+<Meta title="MDX|ConfirmModal" component={ConfirmModal} />
+
+# ConfirmModal
+
+Used to request user for action confirmation, e.g. deleting items. Triggers provided 'onConfirm' callback.
+
+<Props of={ConfirmModal} />
diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx
index 226b0df5d3f..3e6fa9f1407 100644
--- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx
+++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx
@@ -3,6 +3,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { ConfirmModal } from './ConfirmModal';
+import mdx from './ConfirmModal.mdx';
 
 const getKnobs = () => {
   return {
@@ -27,6 +28,11 @@ export default {
   title: 'Overlays/ConfirmModal',
   component: ConfirmModal,
   decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 export const basic = () => {
diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
index 79a49beb76d..9beea2bc4dc 100644
--- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
+++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
@@ -7,8 +7,6 @@ import { stylesFactory, ThemeContext } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
 import { HorizontalGroup } from '..';
 
-const defaultIcon: IconName = 'exclamation-triangle';
-
 export interface Props {
   isOpen: boolean;
   title: string;
@@ -26,7 +24,7 @@ export const ConfirmModal: FC<Props> = ({
   body,
   confirmText,
   dismissText = 'Cancel',
-  icon,
+  icon = 'exclamation-triangle',
   onConfirm,
   onDismiss,
 }) => {
@@ -34,7 +32,7 @@ export const ConfirmModal: FC<Props> = ({
   const styles = getStyles(theme);
 
   return (
-    <Modal className={styles.modal} title={title} icon={icon || defaultIcon} isOpen={isOpen} onDismiss={onDismiss}>
+    <Modal className={styles.modal} title={title} icon={icon} isOpen={isOpen} onDismiss={onDismiss}>
       <div className={styles.modalContent}>
         <div className={styles.modalText}>{body}</div>
         <HorizontalGroup justify="center">
diff --git a/packages/grafana-ui/src/components/Modal/Modal.mdx b/packages/grafana-ui/src/components/Modal/Modal.mdx
new file mode 100644
index 00000000000..8b99c51155e
--- /dev/null
+++ b/packages/grafana-ui/src/components/Modal/Modal.mdx
@@ -0,0 +1,17 @@
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Modal } from './Modal';
+import { ModalTabsHeader } from './ModalTabsHeader';
+
+<Meta title="MDX|Modal" component={Modal} />
+
+# Modal
+
+Generic Modal component
+
+<Props of={Modal} />
+
+# ModalTabsHeader
+
+Custom header element with tabs
+
+<Props of={ModalTabsHeader} />
diff --git a/packages/grafana-ui/src/components/Modal/Modal.story.tsx b/packages/grafana-ui/src/components/Modal/Modal.story.tsx
index b731fc8b4fa..b15c9873845 100644
--- a/packages/grafana-ui/src/components/Modal/Modal.story.tsx
+++ b/packages/grafana-ui/src/components/Modal/Modal.story.tsx
@@ -7,6 +7,7 @@ import { Modal } from './Modal';
 import { Icon } from '../Icon/Icon';
 import { ModalTabsHeader } from './ModalTabsHeader';
 import { TabContent } from '../Tabs/TabContent';
+import mdx from './Modal.mdx';
 
 const getKnobs = () => {
   return {
@@ -30,6 +31,11 @@ export default {
   title: 'Overlays/Modal',
   component: Modal,
   decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 export const basic = () => {
diff --git a/packages/grafana-ui/src/components/Modal/Modal.tsx b/packages/grafana-ui/src/components/Modal/Modal.tsx
index 68242fff503..ef213e47abe 100644
--- a/packages/grafana-ui/src/components/Modal/Modal.tsx
+++ b/packages/grafana-ui/src/components/Modal/Modal.tsx
@@ -10,13 +10,14 @@ import { IconButton } from '../IconButton/IconButton';
 
 export interface Props extends Themeable {
   icon?: IconName;
+  /** Title for the modal or custom header element */
   title: string | JSX.Element;
   className?: string;
 
   isOpen?: boolean;
   onDismiss?: () => void;
 
-  // If not set will call onDismiss if that is set.
+  /** If not set will call onDismiss if that is set. */
   onClickBackdrop?: () => void;
 }
 
diff --git a/packages/grafana-ui/src/components/Modal/ModalsContext.tsx b/packages/grafana-ui/src/components/Modal/ModalsContext.tsx
index 3ff0c6381c9..7445a8ecdba 100644
--- a/packages/grafana-ui/src/components/Modal/ModalsContext.tsx
+++ b/packages/grafana-ui/src/components/Modal/ModalsContext.tsx
@@ -16,9 +16,9 @@ const ModalsContext = React.createContext<ModalsContextState>({
 
 interface ModalsProviderProps {
   children: React.ReactNode;
-  /** Set default component to render as modal. Usefull when rendering modals from Angular */
+  /** Set default component to render as modal. Useful when rendering modals from Angular */
   component?: React.ComponentType<any> | null;
-  /** Set default component props. Usefull when rendering modals from Angular */
+  /** Set default component props. Useful when rendering modals from Angular */
   props?: any;
 }