diff --git a/packages/ui/src/components/Modal/Modal.test.tsx b/packages/ui/src/components/Modal/Modal.test.tsx index fcfde70bf..aa522c9b7 100644 --- a/packages/ui/src/components/Modal/Modal.test.tsx +++ b/packages/ui/src/components/Modal/Modal.test.tsx @@ -26,6 +26,34 @@ describe("Components / Modal", () => { expect(modal).not.toBeInTheDocument(); }); + it("should not render close button when modal is not dismissible", async () => { + const user = userEvent.setup(); + + render(); + + await user.click(triggerButton()); + + const modal = dialog(); + expect(modal).toBeInTheDocument(); + + const closeButton = screen.queryByLabelText("Close"); + expect(closeButton).not.toBeInTheDocument(); + }); + + it("should render close button when modal is dismissible", async () => { + const user = userEvent.setup(); + + render(); + + await user.click(triggerButton()); + + const modal = dialog(); + expect(modal).toBeInTheDocument(); + + const closeButton = screen.queryByLabelText("Close"); + expect(closeButton).toBeInTheDocument(); + }); + it("should append to root element when root prop is provided", async () => { const root = document.createElement("div"); const user = userEvent.setup(); @@ -82,7 +110,7 @@ describe("Components / Modal", () => { it("should close `Modal` when `Space` is pressed on any of its buttons", async () => { const user = userEvent.setup(); - render(); + render(); const openButton = triggerButton(); diff --git a/packages/ui/src/components/Modal/Modal.tsx b/packages/ui/src/components/Modal/Modal.tsx index 18c0252d9..be383283c 100644 --- a/packages/ui/src/components/Modal/Modal.tsx +++ b/packages/ui/src/components/Modal/Modal.tsx @@ -117,6 +117,7 @@ export const Modal = forwardRef((props, ref) => { clearTheme: props.clearTheme, applyTheme: props.applyTheme, popup, + dismissible, onClose, setHeaderId, }} diff --git a/packages/ui/src/components/Modal/ModalContext.tsx b/packages/ui/src/components/Modal/ModalContext.tsx index 8476bbfbe..67a4e844a 100644 --- a/packages/ui/src/components/Modal/ModalContext.tsx +++ b/packages/ui/src/components/Modal/ModalContext.tsx @@ -6,6 +6,7 @@ import type { ModalTheme } from "./Modal"; export interface ModalContextValue extends ThemingProps { popup?: boolean; + dismissible?: boolean; setHeaderId: (id: string | undefined) => void; onClose?: () => void; } diff --git a/packages/ui/src/components/Modal/ModalHeader.tsx b/packages/ui/src/components/Modal/ModalHeader.tsx index db2291c02..fc15f0306 100644 --- a/packages/ui/src/components/Modal/ModalHeader.tsx +++ b/packages/ui/src/components/Modal/ModalHeader.tsx @@ -31,6 +31,7 @@ export const ModalHeader = forwardRef((props, clearTheme: rootClearTheme, applyTheme: rootApplyTheme, popup, + dismissible, onClose, setHeaderId, } = useModalContext(); @@ -64,9 +65,11 @@ export const ModalHeader = forwardRef((props, {children} - + {dismissible && ( + + )} ); });