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,
-
+ {dismissible && (
+
+ )}
);
});