Allow ModalDialogs with variant='custom'

src/components/feedback/Dialog.tsx

@@ -60,7 +60,7 @@ export type PanelDialogProps = PresentationalProps &
     variant?: 'panel';
   };
 
-type CustomDialogProps = PresentationalProps &
+export type CustomDialogProps = PresentationalProps &
   ComponentProps & {
     /** `custom` allows any layout of Dialog children */
     variant: 'custom';

src/components/feedback/ModalDialog.tsx

@@ -5,7 +5,7 @@ import { useTabKeyNavigation } from '../../hooks/use-tab-key-navigation';
 import { downcastRef } from '../../util/typing';
 import Overlay from '../layout/Overlay';
 import Dialog from './Dialog';
-import type { PanelDialogProps } from './Dialog';
+import type { CustomDialogProps, PanelDialogProps } from './Dialog';
 
 type ModalSize = 'sm' | 'md' | 'lg' | 'custom';
 
@@ -33,12 +33,20 @@ type ComponentProps = {
   size?: ModalSize;
 };
 
-export type ModalDialogProps = Omit<
+export type PanelModalDialogProps = Omit<
   PanelDialogProps,
   'restoreFocus' | 'closeOnEscape'
 > &
   ComponentProps;
 
+export type CustomModalDialogProps = Omit<
+  CustomDialogProps,
+  'restoreFocus' | 'closeOnEscape'
+> &
+  ComponentProps;
+
+export type ModalDialogProps = PanelModalDialogProps | CustomModalDialogProps;
+
 /**
  * Show a modal dialog
  */
@@ -47,7 +55,7 @@ export default function ModalDialog({
   disableCloseOnEscape = false,
   disableFocusTrap = false,
   disableRestoreFocus = false,
-  size,
+  size = 'md',
 
   classes,
   elementRef,
@@ -59,8 +67,6 @@ export default function ModalDialog({
 
   ...htmlAndPanelAttributes
 }: ModalDialogProps) {
-  // Prefer `size` prop but support deprecated `width` if present
-  const modalSize = size ?? 'md';
   const modalRef = useSyncedRef(elementRef);
 
   useTabKeyNavigation(modalRef, { enabled: !disableFocusTrap });
@@ -90,17 +96,15 @@ export default function ModalDialog({
           'tall:fixed tall:max-h-[80vh] tall:top-[10vh]',
           {
             // Max-width rules will ensure actual width never exceeds 90vw
-            'w-[30rem]': modalSize === 'sm',
-            'w-[36rem]': modalSize === 'md', // default
-            'w-[42rem]': modalSize === 'lg',
-            // No width classes are added if width is 'custom'
+            'w-[30rem]': size === 'sm',
+            'w-[36rem]': size === 'md', // default
+            'w-[42rem]': size === 'lg',
+            // No width classes are added if `size` is 'custom'
           },
           classes,
         )}
         elementRef={downcastRef(modalRef)}
-        // Testing affordance. TODO: Remove once deprecated `width` prop
-        // no longer supported.
-        data-modal-size={modalSize}
+        data-modal-size={size}
       >
         {children}
       </Dialog>

src/components/feedback/test/ModalDialog-test.js

@@ -116,7 +116,7 @@ describe('ModalDialog', () => {
         .getAttribute('data-modal-size');
     }
 
-    it('sets a default size if neither `size` nor `width` provided', () => {
+    it('sets a default size if `size` is not provided', () => {
       const wrapper = mount(
         <ModalDialog title="Test modal dialog">This is my dialog</ModalDialog>,
       );
@@ -129,11 +129,5 @@ describe('ModalDialog', () => {
 
       assert.equal(modalSize(wrapper), 'lg');
     });
-
-    it('prefers `size` over `width` to set size', () => {
-      const wrapper = sizedModal({ size: 'lg', width: 'sm' });
-
-      assert.equal(modalSize(wrapper), 'lg');
-    });
   });
 });

src/pattern-library/components/patterns/feedback/DialogPage.tsx

@@ -18,7 +18,10 @@ import {
   TabList,
 } from '../../../../';
 import { ModalDialog } from '../../../../components/feedback';
-import type { ModalDialogProps } from '../../../../components/feedback/ModalDialog';
+import type {
+  CustomModalDialogProps,
+  PanelModalDialogProps,
+} from '../../../../components/feedback/ModalDialog';
 import { confirm } from '../../../../util/prompts';
 import Library from '../../Library';
 import { LoremIpsum, nabokovNovels } from '../samples';
@@ -120,7 +123,7 @@ function Confirm() {
   );
 }
 
-type ModalDialog_Props = ModalDialogProps & {
+type ModalDialog_Props = PanelModalDialogProps & {
   /** Pattern-wrapping prop. Not visible in source view */
   _nonCloseable?: boolean;
   _alwaysShowButton?: boolean;
@@ -169,6 +172,25 @@ function ModalDialog_({
   );
 }
 
+function CustomModalDialog_(dialogProps: CustomModalDialogProps) {
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setDialogOpen(prev => !prev)} variant="primary">
+        {dialogOpen ? 'Hide' : 'Show'} dialog
+      </Button>
+      {dialogOpen && (
+        <ModalDialog
+          {...dialogProps}
+          onClose={() => setDialogOpen(false)}
+          closeOnClickAway
+        />
+      )}
+    </>
+  );
+}
+
 export default function DialogPage() {
   const inputRef = useRef(null);
 
@@ -728,6 +750,16 @@ export default function DialogPage() {
               </ModalDialog_>
             </Library.Demo>
           </Library.Example>
+          <Library.Example title="Custom layout">
+            <Library.Demo title="Modal dialog with custom layout" withSource>
+              <CustomModalDialog_ variant="custom">
+                <div className="flex gap-x-3 items-center border p-3 bg-white">
+                  <div className="grow">Custom dialog content</div>
+                  <CloseButton />
+                </div>
+              </CustomModalDialog_>
+            </Library.Demo>
+          </Library.Example>
         </Library.Pattern>
         <Library.Pattern title="ComponentAPI">
           <Library.Example title="title">