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
- - setModalOpen(false)} - closeButtonLabel="Close" - > - {defaultModalChildren} - - setModalOpen2(false)} - closeButtonLabel="Close" - > - {() =>
hi
} -
- - ); -}; - -const NestedModal = () => { - const [modalOpen, setModalOpen] = useState(false); - return ( - <> - - setModalOpen(false)} - closeButtonLabel="Close" - > - {defaultModalChildren} - - - ); -}; - -export const Nested = () => { - const [modalOpen, setModalOpen] = useState(false); - return ( - <> - - setModalOpen(false)} - closeButtonLabel="Close" - > - {() => } - - - ); -}; - -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 = () => ( -
- - Are you sure you want to proceed ? - - -
- - -
-
-); - -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 = () => ( -
- - Please enter recipient information - - -
- - - -
- -
- - -
-
-); +InitiallyOpen.args = { + children: defaultModalChildren, + variant: 'contextual', + closeButtonLabel: 'Close modal', +}; -export const WithInteractiveContent = () => { +export const Immersive = () => { const [modalOpen, setModalOpen] = useState(false); - return ( <> - setModalOpen(false)} closeButtonLabel="Close" aria-label="Hello World!" aria-describedby="log1" - variant={isImmersive ? 'immersive' : 'contextual'} > {defaultModalChildren} @@ -336,19 +180,14 @@ export const Variants = () => { ); }; -Variants.args = { - children: defaultModalChildren, - closeButtonLabel: 'Close modal', -}; -Variants.parameters = { +Immersive.parameters = { chromatic: { disableSnapshot: true }, -}; -withUseModal.args = { - children: defaultModalChildren, - closeButtonLabel: 'Close', - onClose: () => console.log('closed'), - open: true, - 'aria-label': 'Hello World!', + viewport: { + defaultViewport: 'smallMobile', + }, }; +InitiallyOpen.play = openModal; +Immersive.play = openModal; +PreventClose.play = openModal; Base.play = openModal;