fix(Modal, Dialog, Alert): adding modal props to Dialog and pass enableBackgroundUI

src/__internal__/popover/popover.test.tsx

@@ -79,7 +79,7 @@ test("when mounted, renders popup in the reference's nearest dialog ancestor if
     const buttonRef = React.useRef<HTMLButtonElement>(null);
 
     return (
-      <Dialog open>
+      <Dialog open enableBackgroundUI={false}>
         <button
           ref={buttonRef}
           type="button"

src/components/action-popover/action-popover.stories.tsx

@@ -728,7 +728,12 @@ OpeningAModal.storyName = "Opening a Modal";
 export const ActionPopoverNestedInDialog: Story = () => {
   const [isOpen, setIsOpen] = useState(true);
   return (
-    <Dialog open={isOpen} onCancel={() => setIsOpen(false)} title="Dialog">
+    <Dialog
+      open={isOpen}
+      onCancel={() => setIsOpen(false)}
+      title="Dialog"
+      enableBackgroundUI={false}
+    >
       <ActionPopover>
         <ActionPopoverItem icon="email" onClick={() => {}}>
           Email Invoice

src/components/action-popover/components.test-pw.tsx

@@ -1255,7 +1255,12 @@ export const SubmenuPositionedRight = () => {
 export const ActionPopoverNestedInDialog = () => {
   const [isOpen, setIsOpen] = useState(true);
   return (
-    <Dialog open={isOpen} onCancel={() => setIsOpen(false)} title="Dialog">
+    <Dialog
+      open={isOpen}
+      onCancel={() => setIsOpen(false)}
+      title="Dialog"
+      enableBackgroundUI={false}
+    >
       <ActionPopover>
         <ActionPopoverItem icon="email" onClick={() => {}}>
           Email Invoice

src/components/advanced-color-picker/advanced-color-picker.component.tsx

@@ -256,6 +256,7 @@ export const AdvancedColorPicker = ({
         focusFirstElement={selectedColorRef}
         role={role}
         restoreFocusOnClose={restoreFocusOnClose}
+        enableBackgroundUI={false}
       >
         <StyledAdvancedColorPickerPreview
           data-element="color-picker-preview"

src/components/alert/alert-test.stories.tsx

@@ -58,6 +58,7 @@ export const DefaultStory = ({
     <>
       <Button onClick={handleOpen}>Open Alert</Button>
       <Alert
+        enableBackgroundUI={false}
         onCancel={handleCancel}
         open={isOpen}
         title={title}
@@ -103,6 +104,7 @@ export const AlertComponentTest = ({
         showCloseIcon
         size="extra-small"
         open={isOpen}
+        enableBackgroundUI={false}
         {...props}
       >
         {children}

src/components/alert/alert.stories.tsx

@@ -52,6 +52,7 @@ export const Default: Story = () => {
         showCloseIcon
         size="extra-small"
         open={isOpen}
+        enableBackgroundUI={false}
       >
         This is an example of an alert
       </Alert>

src/components/alert/alert.test.tsx

@@ -10,6 +10,7 @@ const ControlledAlert = ({ onCancel, ...rest }: Partial<AlertProps>) => {
     <Alert
       {...rest}
       open={open}
+      enableBackgroundUI={false}
       onCancel={(ev) => {
         setOpen(false);
         onCancel?.(ev);
@@ -24,6 +25,7 @@ test("include correct component, element and role data tags", () => {
     <Alert
       open
       onCancel={() => undefined}
+      enableBackgroundUI={false}
       title="Alert title"
       subtitle="Alert Subtitle"
       data-element="bar"
@@ -48,6 +50,7 @@ test("has the expected border radius styling", () => {
     <Alert
       open
       onCancel={() => undefined}
+      enableBackgroundUI={false}
       title="Alert title"
       subtitle="Alert Subtitle"
       data-element="bar"
@@ -69,6 +72,7 @@ test("should allow custom data props on close button to be assigned", () => {
     <Alert
       open
       onCancel={() => undefined}
+      enableBackgroundUI={false}
       title="Alert title"
       subtitle="Alert Subtitle"
       data-element="bar"

src/components/alert/components.test-pw.tsx

@@ -22,6 +22,7 @@ export const AlertComponent = ({
         showCloseIcon
         size="extra-small"
         open={isOpen}
+        enableBackgroundUI={false}
         {...props}
       >
         {children}
@@ -55,6 +56,7 @@ export const TopModalOverride = () => {
         onCancel={() => setIsOpenAlert(false)}
         title="Alert"
         topModalOverride
+        enableBackgroundUI={false}
       >
         <Textbox label="Alert textbox" />
       </Alert>

src/components/confirm/confirm.component.tsx

@@ -192,6 +192,7 @@ export const Confirm = ({
       size={size}
       showCloseIcon={showCloseIcon}
       topModalOverride={topModalOverride}
+      enableBackgroundUI={false}
       {...ariaProps}
       {...rest}
     >

src/components/date/components.test-pw.tsx

@@ -148,7 +148,12 @@ export const DateInputInsideDialog = ({
   };
 
   return (
-    <Dialog open={isOpen} onCancel={() => setIsOpen(false)} title="Dialog">
+    <Dialog
+      open={isOpen}
+      onCancel={() => setIsOpen(false)}
+      title="Dialog"
+      enableBackgroundUI={false}
+    >
       <DateInput
         label="Date"
         name="date-input"

src/components/dialog-full-screen/components.test-pw.tsx

@@ -89,6 +89,7 @@ export const NestedDialog = () => {
           open={nestedDialogOpen}
           onCancel={handleNestedDialogCancel}
           title={nestedDialogTitle}
+          enableBackgroundUI={false}
         >
           Nested Dialog Content
         </Dialog>
@@ -117,7 +118,11 @@ export const MultipleDialogsInDifferentProviders = () => {
       </CarbonProvider>
       <CarbonProvider>
         <Box>
-          <Dialog open={isModal2Open} onCancel={() => setIsModal2Open(false)}>
+          <Dialog
+            open={isModal2Open}
+            onCancel={() => setIsModal2Open(false)}
+            enableBackgroundUI={false}
+          >
             This is Modal 2
           </Dialog>
         </Box>
@@ -951,6 +956,7 @@ export const TopModalOverride = () => {
         open={isOpenDialog}
         onCancel={() => setIsOpenDialog(false)}
         title="Dialog"
+        enableBackgroundUI={false}
       >
         <Textbox label="Dialog textbox" />
       </Dialog>

src/components/dialog-full-screen/dialog-full-screen-test.stories.tsx

@@ -128,6 +128,7 @@ export const Nested: StoryType = () => {
           open={nestedDialogOpen}
           onCancel={handleNestedDialogCancel}
           title="Nested Dialog"
+          enableBackgroundUI={false}
         >
           Nested Dialog Content
         </Dialog>

src/components/dialog/components.test-pw.tsx

@@ -27,6 +27,7 @@ export const DialogComponent = (props: Partial<DialogProps>) => {
   return (
     <Dialog
       open={isOpen}
+      enableBackgroundUI={false}
       title="My dialog"
       showCloseIcon
       onCancel={() => setIsOpen(false)}
@@ -45,7 +46,13 @@ export const DialogWithFirstFocusableElement = (
   const ref = useRef<HTMLButtonElement>(null);
 
   return (
-    <Dialog open title="My dialog" focusFirstElement={ref} {...props}>
+    <Dialog
+      open
+      title="My dialog"
+      focusFirstElement={ref}
+      {...props}
+      enableBackgroundUI={false}
+    >
       <Button ref={ref} onClick={() => {}}>
         Press me
       </Button>
@@ -68,7 +75,7 @@ export const DialogWithToast = () => {
       >
         Toast message 1
       </Toast>
-      <Dialog open title="My dialog">
+      <Dialog open title="My dialog" enableBackgroundUI={false}>
         <Button onClick={() => setOpenToast(true)}>Open Toast</Button>
       </Dialog>
     </>
@@ -81,7 +88,12 @@ export const DialogBackgroundScrollTest = () => {
       <Box height="100px" position="absolute" bottom="0px">
         I should not be scrolled into view
       </Box>
-      <Dialog open title="My dialog" onCancel={() => {}}>
+      <Dialog
+        open
+        title="My dialog"
+        onCancel={() => {}}
+        enableBackgroundUI={false}
+      >
         <Textbox label="textbox" />
       </Dialog>
     </Box>
@@ -101,6 +113,7 @@ export const DialogWithOpenToastsBackgroundScrollTest = () => {
         title="My dialog"
         onCancel={() => {}}
         focusableContainers={[toast1Ref, toast2Ref]}
+        enableBackgroundUI={false}
       >
         <Textbox label="textbox" />
       </Dialog>
@@ -139,6 +152,7 @@ export const TopModalOverride = () => {
         onCancel={() => setIsOpenDialog(false)}
         title="Dialog"
         topModalOverride
+        enableBackgroundUI={false}
       >
         <Textbox label="Dialog textbox" />
       </Dialog>
@@ -155,7 +169,12 @@ export const TopModalOverride = () => {
 
 export const DialogWithAutoFocusSelect = () => {
   return (
-    <Dialog open title="My dialog" onCancel={() => {}}>
+    <Dialog
+      open
+      title="My dialog"
+      onCancel={() => {}}
+      enableBackgroundUI={false}
+    >
       <Select autoFocus label="select">
         <Option value="1" text="one" />
       </Select>
@@ -180,6 +199,7 @@ export const DialogComponentFocusableSelectors = (
         focusableContainers={[toastRef]}
         focusableSelectors={CUSTOM_SELECTOR}
         {...props}
+        enableBackgroundUI={false}
       >
         <Box className="focusable-container">
           <Textbox label="First Name" />
@@ -227,6 +247,7 @@ export const DefaultStory = ({
         title="Title"
         subtitle="Subtitle"
         restoreFocusOnClose={restoreFocusOnClose}
+        enableBackgroundUI={false}
       >
         <Form
           stickyFooter
@@ -273,6 +294,7 @@ export const DefaultNestedStory = () => {
         open={isFirstDialogOpen}
         onCancel={() => setIsFirstDialogOpen(false)}
         title="First Dialog"
+        enableBackgroundUI={false}
       >
         <Button onClick={() => setIsNestedDialogOpen(true)}>
           Open Nested Dialog
@@ -281,6 +303,7 @@ export const DefaultNestedStory = () => {
           open={isNestedDialogOpen}
           onCancel={() => setIsNestedDialogOpen(false)}
           title="Nested Dialog"
+          enableBackgroundUI={false}
         >
           <Textbox label="Nested Dialog Textbox" />
         </Dialog>
@@ -301,6 +324,7 @@ export const Editable = () => {
         open={isOpen}
         onCancel={() => setIsOpen(false)}
         title="Add an address"
+        enableBackgroundUI={false}
       >
         <Form
           stickyFooter
@@ -366,6 +390,7 @@ export const WithHelp = () => {
         onCancel={() => setIsOpen(false)}
         title="Add an address"
         help="Some help text"
+        enableBackgroundUI={false}
       >
         <Form
           stickyFooter
@@ -414,6 +439,7 @@ export const LoadingContent = () => {
         open={isOpen}
         title="Dialog with dynamic content"
         onCancel={() => setIsOpen(false)}
+        enableBackgroundUI={false}
       >
         {isLoading ? (
           <Loader isActive isInsideButton={false} size="small" />
@@ -447,6 +473,7 @@ export const FocusingADifferentFirstElement = () => {
         open={isOpenOne}
         onCancel={() => setIsOpenOne(false)}
         aria-label="Demo using focusFirstElement"
+        enableBackgroundUI={false}
       >
         <Typography>
           Focus an element that does not support autofocus
@@ -472,6 +499,7 @@ export const FocusingADifferentFirstElement = () => {
         open={isOpenTwo}
         onCancel={() => setIsOpenTwo(false)}
         aria-label="Demo using autoFocus"
+        enableBackgroundUI={false}
       >
         <Typography>Focus an element that supports autoFocus</Typography>
         <Box
@@ -500,6 +528,7 @@ export const OverridingContentPadding = () => {
         title="Title"
         subtitle="Subtitle"
         contentPadding={{ p: 0 }}
+        enableBackgroundUI={false}
       >
         <Form
           stickyFooter
@@ -549,6 +578,7 @@ export const OtherFocusableContainers = () => {
         title="Title"
         subtitle="Subtitle"
         focusableContainers={[toast1Ref, toast2Ref]}
+        enableBackgroundUI={false}
       >
         <Form
           stickyFooter
@@ -620,6 +650,7 @@ export const Responsive = () => {
         onCancel={() => setIsOpen(false)}
         title="Title"
         subtitle="Subtitle"
+        enableBackgroundUI={false}
       >
         <Form
           stickyFooter
@@ -668,6 +699,7 @@ export const UsingHandle = () => {
         title={isSubmitted ? "Thank you for your feedback." : "Give feedback"}
         showCloseIcon
         ref={dialogHandle}
+        enableBackgroundUI={false}
       >
         {isSubmitted ? (
           <Typography>