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 89ee84a909)

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

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 = () => {

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">

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

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 = () => {

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

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