From c5ff10fc9debb767d1d5611a1f7873479e8ee769 Mon Sep 17 00:00:00 2001
From: sirineJ <112706079+sirineJ@users.noreply.github.com>
Date: Tue, 10 Dec 2024 17:35:55 +0100
Subject: [PATCH] test fallback backdrop color

---
 .../components/Modal/Modal.module.css         |  4 +--
 .../components/Modal/Modal.stories.tsx        | 36 ++++++-------------
 .../NotificationModal.stories.tsx             |  8 +++++
 3 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/packages/circuit-ui/components/Modal/Modal.module.css b/packages/circuit-ui/components/Modal/Modal.module.css
index 92195d0cef..25a409a1e9 100644
--- a/packages/circuit-ui/components/Modal/Modal.module.css
+++ b/packages/circuit-ui/components/Modal/Modal.module.css
@@ -78,7 +78,7 @@
 /* Native Backdrop */
 .dialog::backdrop {
   visibility: hidden;
-  background-color: var(--cui-bg-overlay);
+  background-color: var(--cui-bg-overlay, rgb(0 0 0 / 40%));
   opacity: 0;
   transition:
     opacity var(--cui-transitions-slow),
@@ -99,7 +99,7 @@
   bottom: 0;
   left: 0;
   visibility: hidden;
-  background-color: var(--cui-bg-overlay);
+  background-color: var(--cui-bg-overlay, rgb(0 0 0 / 40%));
   opacity: 0;
   transition:
     opacity var(--cui-transitions-slow),
diff --git a/packages/circuit-ui/components/Modal/Modal.stories.tsx b/packages/circuit-ui/components/Modal/Modal.stories.tsx
index b2c9a45068..eaeda9a024 100644
--- a/packages/circuit-ui/components/Modal/Modal.stories.tsx
+++ b/packages/circuit-ui/components/Modal/Modal.stories.tsx
@@ -17,14 +17,10 @@ import { Fragment, type ReactNode, useState } from 'react';
 import { screen, userEvent, within } from '@storybook/test';
 import type { Decorator } from '@storybook/react';
 
-import { modes } from '../../../../.storybook/modes.js';
 import { Headline } from '../Headline/index.js';
 import { Body } from '../Body/index.js';
 import { Button } from '../Button/index.js';
-import {
-  FullViewport,
-  Stack,
-} from '../../../../.storybook/components/index.js';
+import { FullViewport } from '../../../../.storybook/components/index.js';
 
 import { Modal, type ModalProps, useModal } from './Modal.js';
 import { ModalProvider } from './ModalContext.js';
@@ -35,24 +31,14 @@ export default {
   tags: ['status:stable'],
   parameters: {
     layout: 'padded',
-    viewport: {
-      defaultViewport: 'reset',
-    },
-    chromatic: {
-      modes: {
-        mobile: modes.smallMobile,
-        desktop: modes.desktop,
-      },
-      pauseAnimationAtEnd: true,
-    },
-    decorators: [
-      (Story) => (
-        <FullViewport>
-          <Story />
-        </FullViewport>
-      ),
-    ] as Decorator[],
   },
+  decorators: [
+    (Story) => (
+      <FullViewport>
+        <Story />
+      </FullViewport>
+    ),
+  ] as Decorator[],
 };
 
 const defaultModalChildren = (): ReactNode => (
@@ -91,7 +77,7 @@ const baseArgs: ModalProps = {
 export const Base = (modal: ModalProps) => {
   const [modalOpen, setModalOpen] = useState(false);
   return (
-    <Stack>
+    <>
       <Button
         type="button"
         onClick={() => {
@@ -101,11 +87,11 @@ export const Base = (modal: ModalProps) => {
         Open modal
       </Button>
       <Modal {...modal} open={modalOpen} onClose={() => setModalOpen(false)} />
-    </Stack>
+    </>
   );
 };
 Base.args = baseArgs;
-Base.play = openModal;
+// Base.play = openModal;
 
 export const WithUseModal = (modal: ModalProps) => {
   const ComponentWithModal = () => {
diff --git a/packages/circuit-ui/components/NotificationModal/NotificationModal.stories.tsx b/packages/circuit-ui/components/NotificationModal/NotificationModal.stories.tsx
index 873de65d91..4b3349b799 100644
--- a/packages/circuit-ui/components/NotificationModal/NotificationModal.stories.tsx
+++ b/packages/circuit-ui/components/NotificationModal/NotificationModal.stories.tsx
@@ -20,6 +20,7 @@ import { screen, userEvent, within } from '@storybook/test';
 import { FullViewport } from '../../../../.storybook/components/index.js';
 import { ModalProvider } from '../Modal/ModalContext.js';
 import { Button } from '../Button/index.js';
+import { modes } from '../../../../.storybook/modes.js';
 
 import {
   NotificationModal,
@@ -31,6 +32,13 @@ export default {
   title: 'Notification/NotificationModal',
   component: NotificationModal,
   tags: ['status:stable'],
+  chromatic: {
+    modes: {
+      mobile: modes.smallMobile,
+      desktop: modes.desktop,
+    },
+    pauseAnimationAtEnd: true,
+  },
   parameters: {
     layout: 'padded',
   },