feat: adds headerbuttonprops, headericon, bodypadding, and overlay props to surface ui

src/components/Dialog/BaseDialog/BaseDialog.tsx

@@ -18,26 +18,31 @@ export const BaseDialog: FC<BaseDialogProps> = React.forwardRef(
             actionButtonOneProps,
             actionButtonTwoProps,
             actionButtonThreeProps,
+            actions,
+            actionsClassNames,
+            body,
+            bodyClassNames,
+            bodyPadding = true,
+            closable = true,
             closeButtonProps,
             closeIcon = IconName.mdiClose,
-            parent = document.body,
-            visible,
-            onClose,
-            maskClosable = true,
-            onVisibleChange,
-            height,
-            width,
-            zIndex,
+            dialogClassNames,
+            dialogWrapperClassNames,
             header,
+            headerButtonProps,
             headerClassNames,
-            body,
-            bodyClassNames,
-            actions,
-            actionsClassNames,
-            dialogWrapperClassNames,
-            dialogClassNames,
+            headerIcon = IconName.mdiArrowLeftThick,
+            height,
+            maskClosable = true,
+            onClose,
+            onVisibleChange,
+            overlay = true,
+            parent = document.body,
             positionStrategy = 'fixed',
             style,
+            visible,
+            width,
+            zIndex,
             ...rest
         },
         ref: Ref<HTMLDivElement>
@@ -50,10 +55,15 @@ export const BaseDialog: FC<BaseDialogProps> = React.forwardRef(
             styles.dialogBackdrop,
             dialogWrapperClassNames,
             { [styles.visible]: visible },
+            {
+                [styles.modeless]: overlay === false,
+                [styles.modelessMask]: overlay === false && maskClosable,
+            },
         ]);
 
         const dialogClasses: string = mergeClasses([
             styles.dialog,
+            { [styles.noBodyPadding]: bodyPadding === false },
             dialogClassNames,
         ]);
 
@@ -62,6 +72,11 @@ export const BaseDialog: FC<BaseDialogProps> = React.forwardRef(
             headerClassNames,
         ]);
 
+        const actionsClasses: string = mergeClasses([
+            styles.footer,
+            actionsClassNames,
+        ]);
+
         const dialogBackdropStyle: React.CSSProperties = {
             position: positionStrategy,
             ...style,
@@ -96,7 +111,17 @@ export const BaseDialog: FC<BaseDialogProps> = React.forwardRef(
                     onClick={stopPropagation}
                 >
                     <div className={headerClasses}>
-                        <span id={labelId}>{header}</span>
+                        <span id={labelId}>
+                            {headerButtonProps && (
+                                <NeutralButton
+                                    ariaLabel={'Back'}
+                                    classNames={styles.headerButton}
+                                    iconProps={{ path: headerIcon }}
+                                    {...headerButtonProps}
+                                />
+                            )}
+                            {header}
+                        </span>
                         <span className={styles.headerButtons}>
                             {actionButtonThreeProps && (
                                 <NeutralButton {...actionButtonThreeProps} />
@@ -107,18 +132,18 @@ export const BaseDialog: FC<BaseDialogProps> = React.forwardRef(
                             {actionButtonOneProps && (
                                 <NeutralButton {...actionButtonOneProps} />
                             )}
-                            <NeutralButton
-                                ariaLabel={'Close'}
-                                iconProps={{ path: closeIcon }}
-                                onClick={onClose}
-                                {...closeButtonProps}
-                            />
+                            {closable && (
+                                <NeutralButton
+                                    ariaLabel={'Close'}
+                                    iconProps={{ path: closeIcon }}
+                                    onClick={onClose}
+                                    {...closeButtonProps}
+                                />
+                            )}
                         </span>
                     </div>
                     <div className={bodyClassNames}>{body}</div>
-                    {actions && (
-                        <div className={actionsClassNames}>{actions}</div>
-                    )}
+                    {actions && <div className={actionsClasses}>{actions}</div>}
                 </div>
             </div>
         );

src/components/Dialog/BaseDialog/BaseDialog.types.ts

@@ -26,88 +26,112 @@ export interface BaseDialogProps
      */
     actionButtonThreeProps?: ButtonProps;
     /**
-     * Close button extra props
+     * The actions of the dialog
      */
-    closeButtonProps?: CloseButtonProps;
+    actions?: React.ReactNode;
     /**
-     * Close icon name
+     * Custom classes for the actions wrapper
      */
-    closeIcon?: IconName;
+    actionsClassNames?: string;
     /**
-     * Dialog is visible or not
+     * The body of the dialog
      */
-    visible?: boolean;
+    body?: React.ReactNode;
     /**
-     * Clicking on mask should close modal or not
+     * Custom classes for the body
+     */
+    bodyClassNames?: string;
+    /**
+     * Enables body padding
      * @default true
      */
-    maskClosable?: boolean;
+    bodyPadding?: boolean;
     /**
-     * Callback fired on close on the modal
-     * @param e {EventType}
+     * Show close button on top right
+     * @default true
      */
-    onClose?: (e: EventType) => void;
+    closable?: boolean;
     /**
-     * Callback fired on visibility change of the modal
-     * @param visible {bool}
+     * Close button extra props
      */
-    onVisibleChange?: (visible: boolean) => void;
+    closeButtonProps?: CloseButtonProps;
     /**
-     * Custom classes for the dialog wrapper
+     * Close icon name
      */
-    dialogWrapperClassNames?: string;
+    closeIcon?: IconName;
     /**
      * Custom classes for the dialog
      */
     dialogClassNames?: string;
     /**
-     * Custom classes for the header
-     */
-    headerClassNames?: string;
-    /**
-     * Custom classes for the body
-     */
-    bodyClassNames?: string;
-    /**
-     * Custom classes for the actions wrapper
+     * Custom classes for the dialog wrapper
      */
-    actionsClassNames?: string;
+    dialogWrapperClassNames?: string;
     /**
      * The header of the dialog
      */
     header?: React.ReactNode;
     /**
-     * The body of the dialog
+     * Props for the header button
      */
-    body?: React.ReactNode;
+    headerButtonProps?: ButtonProps;
     /**
-     * The actions of the dialog
+     * Custom classes for the header
      */
-    actions?: React.ReactNode;
+    headerClassNames?: string;
     /**
-     * Custom width of the dialog
+     * Header icon name
      */
-    width?: number;
+    headerIcon?: IconName;
     /**
      * Custom height of the dialog
      */
     height?: number;
     /**
-     * Custom zIndex for the dialog
+     * Clicking on mask should close modal or not
+     * @default true
      */
-    zIndex?: number;
+    maskClosable?: boolean;
     /**
-     * Positioning strategy for the dialog
-     * @default absolute
+     * Callback fired on close on the modal
+     * @param e {EventType}
      */
-    positionStrategy?: Strategy;
+    onClose?: (e: EventType) => void;
+    /**
+     * Callback fired on visibility change of the modal
+     * @param visible {bool}
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * Whether the dialog should show the overlay
+     * if false: there will be no overlay.
+     * @default true
+     */
+    overlay?: boolean;
     /**
      * Element to which to attach the modal to
      * @default HTMLBodyElement
      */
     parent?: HTMLDivElement | HTMLBodyElement;
+    /**
+     * Positioning strategy for the dialog
+     * @default absolute
+     */
+    positionStrategy?: Strategy;
     /**
      * Ref for the dialog element
      */
     ref?: Ref<HTMLDivElement>;
+    /**
+     * Custom width of the dialog
+     */
+    width?: number;
+    /**
+     * Dialog is visible or not
+     */
+    visible?: boolean;
+    /**
+     * Custom zIndex for the dialog
+     */
+    zIndex?: number;
 }

src/components/Dialog/BaseDialog/base-dialog.module.scss

@@ -1,5 +1,12 @@
 .dialog-backdrop {
-    @include backdrop;
+    &:not(.modeless) {
+        @include backdrop;
+    }
+
+    &.modeless {
+        @include no-backdrop;
+    }
+
     display: flex;
     align-items: center;
     justify-content: center;
@@ -17,6 +24,10 @@
             justify-content: space-between;
             align-items: center;
 
+            &-button {
+                margin-right: $space-m;
+            }
+
             &-buttons {
                 align-items: flex-end;
                 align-self: start;
@@ -25,6 +36,18 @@
                 white-space: nowrap;
             }
         }
+
+        &.no-body-padding {
+            padding: 0;
+
+            .header {
+                padding: $space-ml $space-ml $space-s $space-ml;
+            }
+
+            .footer {
+                padding: $space-ml;
+            }
+        }
     }
 
     &.visible {
@@ -36,5 +59,17 @@
             animation: scaleIn $motion-duration-extra-fast
                 $motion-easing-easeinout 0s forwards;
         }
+
+        &.modeless {
+            pointer-events: none;
+
+            .dialog {
+                pointer-events: all;
+            }
+        }
+
+        &.modeless-mask {
+            pointer-events: auto;
+        }
     }
 }

src/components/Dialog/Dialog.stories.tsx

@@ -199,6 +199,7 @@ const dialogArgs: Object = {
     actionsClassNames: 'my-dialog-actions-class',
     body: 'Body 2 which is at 16px font size is used here in the body section of the dialog. The dialog body text can wrap to multiple lines.',
     bodyClassNames: 'my-dialog-body-class',
+    bodyPadding: true,
     cancelButtonProps: {
         ariaLabel: 'Cancel',
         classNames: 'my-cancel-btn-class',
@@ -213,6 +214,7 @@ const dialogArgs: Object = {
     header: 'Header 4 used in this dialog',
     headerClassNames: 'my-dialog-header-class',
     maskClosable: true,
+    overlay: true,
     okButtonProps: {
         ariaLabel: 'OK',
         classNames: 'my-ok-btn-class',

src/components/Dialog/Dialog.test.tsx

@@ -63,8 +63,8 @@ describe('Dialog', () => {
             onCancel,
             onClose,
         });
-        wrapper.find('.actions .button-primary').at(0).simulate('click');
-        wrapper.find('.actions .button-neutral').at(0).simulate('click');
+        wrapper.find('.footer .button-primary').at(0).simulate('click');
+        wrapper.find('.footer .button-neutral').at(0).simulate('click');
         wrapper.find('.button-neutral').at(0).simulate('click');
         wrapper.find('.dialog-backdrop').at(0).simulate('click');
 
@@ -79,4 +79,20 @@ describe('Dialog', () => {
         wrapper.find('.dialog-backdrop').at(0).simulate('click');
         expect(onClose).toHaveBeenCalledTimes(2);
     });
+
+    test('dialog no body padding', () => {
+        wrapper.setProps({
+            visible: true,
+            bodyPadding: false,
+        });
+        expect(wrapper.find('.no-body-padding').length).toBeTruthy();
+    });
+
+    test('dialog overlay is hidden', () => {
+        wrapper.setProps({
+            visible: true,
+            overlay: false,
+        });
+        expect(wrapper.find('.modeless').length).toBeTruthy();
+    });
 });