diff --git a/packages/circuit-ui/components/Dialog/Dialog.module.css b/packages/circuit-ui/components/Dialog/Dialog.module.css
index efb865c30d..bf13658ffa 100644
--- a/packages/circuit-ui/components/Dialog/Dialog.module.css
+++ b/packages/circuit-ui/components/Dialog/Dialog.module.css
@@ -102,6 +102,11 @@
max-height: unset;
border-radius: unset;
}
+
+ .immersive .content {
+ border: none;
+ border-radius: unset;
+ }
}
/* Content */
diff --git a/packages/circuit-ui/components/Dialog/Dialog.stories.tsx b/packages/circuit-ui/components/Dialog/Dialog.stories.tsx
index bbced56525..825a2cc258 100644
--- a/packages/circuit-ui/components/Dialog/Dialog.stories.tsx
+++ b/packages/circuit-ui/components/Dialog/Dialog.stories.tsx
@@ -13,14 +13,13 @@
* limitations under the License.
*/
-import { Fragment, type ReactNode, useRef, useState } from 'react';
+import { Fragment, type ReactNode, useState } from 'react';
import { screen, userEvent, within } from '@storybook/test';
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 { Input } from '../Input/index.js';
import { Dialog, type DialogProps, useModal } from './Dialog.js';
import { ModalDialogProvider } from './ModalDialogContext.js';
@@ -30,6 +29,9 @@ export default {
component: Dialog,
tags: ['status:experimental'],
parameters: {
+ viewport: {
+ defaultViewport: 'reset',
+ },
chromatic: {
modes: {
mobile: modes.smallMobile,
@@ -87,86 +89,7 @@ export const Base = () => {
);
};
-export const Simultaneous = () => {
- const [modalOpen, setModalOpen] = useState(false);
- const [modalOpen2, setModalOpen2] = useState(false);
- return (
- <>
-
TODO handle closing of simultaneous modals
-
-
-
- >
- );
-};
-
-const NestedModal = () => {
- const [modalOpen, setModalOpen] = useState(false);
- return (
- <>
-
-
- >
- );
-};
-
-export const Nested = () => {
- const [modalOpen, setModalOpen] = useState(false);
- return (
- <>
-
-
- >
- );
-};
-
-export const withUseModal = (modal: DialogProps) => {
+export const WithUseModal = (modal: DialogProps) => {
const ComponentWithModal = () => {
const { setModal } = useModal();
@@ -183,100 +106,30 @@ export const withUseModal = (modal: DialogProps) => {
);
};
-const ConfirmContent = () => (
-
-);
-
-export const ConfirmationModal = () => {
- const [modalOpen, setModalOpen] = useState(false);
- const dialogRef = useRef(null);
+WithUseModal.args = {
+ children: defaultModalChildren,
+ variant: 'contextual',
+ closeButtonLabel: 'Close modal',
+};
- const onDialogClosed = () => {
- setModalOpen(false);
- setTimeout(() => {
- // wait for animation to finish
- alert(`user chose: ${dialogRef?.current?.returnValue}`);
- }, 300);
- };
+export const InitiallyOpen = (modal: DialogProps) => {
+ const initialModal = { id: 'initial', component: Dialog, ...modal };
return (
- <>
-
-
- >
+
+
+
);
};
-const FormContent = () => (
-
-);
+InitiallyOpen.args = {
+ children: defaultModalChildren,
+ variant: 'contextual',
+ closeButtonLabel: 'Close modal',
+};
-export const WithInteractiveContent = () => {
+export const Immersive = () => {
const [modalOpen, setModalOpen] = useState(false);
-
return (
<>