fix: modal dismiss

.yarn/versions/261792a0.yml

@@ -0,0 +1,6 @@
+releases:
+  "@nimbus-ds/components": patch
+  "@nimbus-ds/modal": patch
+
+declined:
+  - nimbus-design-system

packages/react/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 Nimbus is an open-source Design System created by Tiendanube / Nuvesmhop’s team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
 
+## 2024-08-05 `5.5.5`
+
+### 🐛 Bug fixes
+
+- Made `onDismiss` property optional for `Modal` component. If `onDismiss` is not provided, the modal can no longer be closed by clicking outside or pressing the close button
+- Removed the close button (X) from `Modal` component when `onDismiss` is not provided. ([#246](https://github.com/TiendaNube/nimbus-design-system/pull/246) by [@dommirr](https://github.com/dommirr))
+
 ## 2024-04-22 `5.5.4`
 
 ### 💡 Others

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nimbus-ds/components",
-  "version": "5.5.4",
+  "version": "5.5.5-rc.1",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [
@@ -31,5 +31,6 @@
   },
   "devDependencies": {
     "@nimbus-ds/webpack": "workspace:^"
-  }
+  },
+  "stableVersion": "5.5.4"
 }

packages/react/src/composite/Modal/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 The Modal component allows us to call the user's attention to a floating box that can have text, actions or forms to perform tasks by changing the focus from the background. It is an intrusive component as it interrupts the user's operation to present a message or content.
 
+## 2024-08-05 `1.5.3`
+
+### 🐛 Bug fixes
+
+- Made `onDismiss` property optional for `Modal` component. If `onDismiss` is not provided, the modal can no longer be closed by clicking outside or pressing the close button
+- Removed the close button (X) from `Modal` component when `onDismiss` is not provided. ([#246](https://github.com/TiendaNube/nimbus-design-system/pull/246) by [@dommirr](https://github.com/dommirr))
+
 ## 2023-12-22 `1.5.1`
 
 #### 🎉 New features

packages/react/src/composite/Modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nimbus-ds/modal",
-  "version": "1.5.2",
+  "version": "1.5.3-rc.1",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [
@@ -36,5 +36,6 @@
     "@nimbus-ds/text": "workspace:^",
     "@nimbus-ds/title": "workspace:^",
     "@nimbus-ds/webpack": "workspace:^"
-  }
+  },
+  "stableVersion": "1.5.2"
 }

packages/react/src/composite/Modal/src/Modal.tsx

@@ -43,7 +43,9 @@ const Modal: React.FC<ModalProps> & ModalComponents = ({
 
   const click = useClick(context);
   const role = useRole(context);
-  const dismiss = useDismiss(context, { outsidePressEvent: "mousedown" });
+  const dismiss = useDismiss(context, {
+    outsidePressEvent: onDismiss ? "mousedown" : undefined,
+  });
 
   const { getFloatingProps } = useInteractions([click, role, dismiss]);
 

packages/react/src/composite/Modal/src/modal.spec.tsx

@@ -6,15 +6,10 @@ import { ModalProps } from "./modal.types";
 
 const mockedOnDismiss = jest.fn();
 
-const makeSut = (rest: Pick<ModalProps, "children" | "padding">) => {
-  render(
-    <Modal
-      {...rest}
-      onDismiss={mockedOnDismiss}
-      open
-      data-testid="modal-element"
-    />
-  );
+const makeSut = (
+  rest: Pick<ModalProps, "children" | "padding" | "onDismiss">
+) => {
+  render(<Modal {...rest} open data-testid="modal-element" />);
 };
 
 describe("GIVEN <Modal />", () => {
@@ -25,10 +20,21 @@ describe("GIVEN <Modal />", () => {
     });
 
     it("AND should correctly call the onDismiss function when closing the modal", () => {
-      makeSut({ children: <div>My content</div> });
+      makeSut({ children: <div>My content</div>, onDismiss: mockedOnDismiss });
       fireEvent.click(screen.getByTestId("dismiss-modal-button"));
       expect(mockedOnDismiss).toBeCalledWith(false);
     });
+
+    it("THEN should not close the modal if the close function is not provided", () => {
+      makeSut({ children: <div>My content</div> });
+      fireEvent.keyDown(document, {
+        key: "Escape",
+        code: "Escape",
+        keyCode: 27,
+      });
+      expect(screen.queryByTestId("dismiss-modal-button")).toBeNull();
+      expect(screen.getByText("My content")).toBeDefined();
+    });
   });
 
   describe("THEN should correctly render the submitted padding", () => {

packages/react/src/composite/Modal/src/modal.stories.tsx

@@ -141,3 +141,34 @@ export const skeleton: Story = {
     ),
   },
 };
+
+export const noDismiss: Story = {
+  render: (args: ModalProps) => {
+    const [open, setOpen] = useState(false);
+    const handleClose = () => setOpen((prevState) => !prevState);
+    return (
+      <>
+        <Button onClick={handleClose}>Open</Button>
+        <Modal {...args} open={open} />
+      </>
+    );
+  },
+  args: {
+    onDismiss: undefined,
+    children: (
+      <>
+        <Modal.Header title="Undismissable Modal" />
+        <Modal.Body padding="none">
+          <Text textAlign="left">
+            This modal cannot be dismissed by clicking the X icon or clicking
+            outside.
+          </Text>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button appearance="neutral">Button</Button>
+          <Button appearance="primary">Button</Button>
+        </Modal.Footer>
+      </>
+    ),
+  },
+};

packages/react/src/composite/Modal/src/modal.types.ts

@@ -22,7 +22,7 @@ export interface ModalProperties extends ModalSprinkle {
    * Callback fired when the component requests to be closed.
    * @TJS-type (open: boolean) => void;
    */
-  onDismiss: (open: boolean) => void;
+  onDismiss?: (open: boolean) => void;
   /**
    * Id to be embedded in the portal element
    */