fix storybook rendering

target · Feb 9, 2024 · e8984bd · e8984bd
1 parent 851bb92
commit e8984bd
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/web/src/app/dialogs/FormDialog.jsx b/web/src/app/dialogs/FormDialog.jsx
@@ -62,6 +62,7 @@ function FormDialog(props) {
     onBack,
     fullHeight,
     disableBackdropClose,
+    disablePortal,
     ...dialogProps
   } = props
 
@@ -178,6 +179,7 @@ function FormDialog(props) {
   const fs = fullScreen || (!isWideScreen && !confirm)
   return (
     <Dialog
+      disablePortal={disablePortal}
       classes={classesProp}
       fullScreen={fs}
       maxWidth={maxWidth}
@@ -233,6 +235,8 @@ FormDialog.propTypes = {
   confirm: p.bool,
   maxWidth: p.string,
 
+  disablePortal: p.bool, // disable the portal behavior of the dialog
+
   // overrides any of the main action button titles with this specific text
   primaryActionLabel: p.string,
 

diff --git a/web/src/app/users/UserContactMethodCreateDialogDest.stories.tsx b/web/src/app/users/UserContactMethodCreateDialogDest.stories.tsx
@@ -11,6 +11,12 @@ const meta = {
   component: UserContactMethodCreateDialogDest,
   tags: ['autodocs'],
   parameters: {
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 500,
+      },
+    },
     msw: {
       handlers: [
         handleDefaultConfig,
@@ -64,7 +70,13 @@ const meta = {
       if (args.onClose) args.onClose(contactMethodID)
       setArgs({ value: contactMethodID })
     }
-    return <UserContactMethodCreateDialogDest {...args} onClose={onClose} />
+    return (
+      <UserContactMethodCreateDialogDest
+        {...args}
+        disablePortal
+        onClose={onClose}
+      />
+    )
   },
 } satisfies Meta<typeof UserContactMethodCreateDialogDest>
 

diff --git a/web/src/app/users/UserContactMethodCreateDialogDest.tsx b/web/src/app/users/UserContactMethodCreateDialogDest.tsx
@@ -41,6 +41,8 @@ export default function UserContactMethodCreateDialogDest(props: {
   onClose: (contactMethodID?: string) => void
   title?: string
   subtitle?: string
+
+  disablePortal?: boolean
 }): React.ReactNode {
   const defaultType = useContactMethodTypes()[0] // will be sorted by priority, and enabled first
 
@@ -73,7 +75,11 @@ export default function UserContactMethodCreateDialogDest(props: {
   if (!defaultType.enabled) {
     // default type will be the first enabled type, so if it's not enabled, none are enabled
     return (
-      <Dialog open onClose={() => props.onClose()}>
+      <Dialog
+        disablePortal={props.disablePortal}
+        open
+        onClose={() => props.onClose()}
+      >
         <DialogTitle>No Contact Types Available</DialogTitle>
         <DialogContentError error='There are no contact types currently enabled by the administrator.' />
         <DialogActions>
@@ -115,6 +121,7 @@ export default function UserContactMethodCreateDialogDest(props: {
 
   return (
     <FormDialog
+      disablePortal={props.disablePortal}
       data-cy='create-form'
       title={title}
       subTitle={subtitle}