diff --git a/.yarn/versions/261792a0.yml b/.yarn/versions/261792a0.yml new file mode 100644 index 00000000..8493bcbc --- /dev/null +++ b/.yarn/versions/261792a0.yml @@ -0,0 +1,6 @@ +releases: + "@nimbus-ds/components": patch + "@nimbus-ds/modal": patch + +declined: + - nimbus-design-system diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 95c951f6..a4ef9c93 100644 --- a/packages/react/CHANGELOG.md +++ b/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 diff --git a/packages/react/package.json b/packages/react/package.json index 017d736b..654a7181 100644 --- a/packages/react/package.json +++ b/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" } diff --git a/packages/react/src/composite/Modal/CHANGELOG.md b/packages/react/src/composite/Modal/CHANGELOG.md index 2d20b686..5ac94e68 100644 --- a/packages/react/src/composite/Modal/CHANGELOG.md +++ b/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 diff --git a/packages/react/src/composite/Modal/package.json b/packages/react/src/composite/Modal/package.json index 6bec54a1..a792d942 100644 --- a/packages/react/src/composite/Modal/package.json +++ b/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" } diff --git a/packages/react/src/composite/Modal/src/Modal.tsx b/packages/react/src/composite/Modal/src/Modal.tsx index 73a58613..5edc0ca4 100644 --- a/packages/react/src/composite/Modal/src/Modal.tsx +++ b/packages/react/src/composite/Modal/src/Modal.tsx @@ -43,7 +43,9 @@ const Modal: React.FC & 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]); diff --git a/packages/react/src/composite/Modal/src/modal.spec.tsx b/packages/react/src/composite/Modal/src/modal.spec.tsx index 7723a58c..31731ae6 100644 --- a/packages/react/src/composite/Modal/src/modal.spec.tsx +++ b/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) => { - render( - - ); +const makeSut = ( + rest: Pick +) => { + render(); }; describe("GIVEN ", () => { @@ -25,10 +20,21 @@ describe("GIVEN ", () => { }); it("AND should correctly call the onDismiss function when closing the modal", () => { - makeSut({ children:
My content
}); + makeSut({ children:
My content
, 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:
My content
}); + 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", () => { diff --git a/packages/react/src/composite/Modal/src/modal.stories.tsx b/packages/react/src/composite/Modal/src/modal.stories.tsx index 1083878d..9bc9a3b8 100644 --- a/packages/react/src/composite/Modal/src/modal.stories.tsx +++ b/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 ( + <> + + + + ); + }, + args: { + onDismiss: undefined, + children: ( + <> + + + + This modal cannot be dismissed by clicking the X icon or clicking + outside. + + + + + + + + ), + }, +}; diff --git a/packages/react/src/composite/Modal/src/modal.types.ts b/packages/react/src/composite/Modal/src/modal.types.ts index 73403465..f1898c56 100644 --- a/packages/react/src/composite/Modal/src/modal.types.ts +++ b/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 */