Release 18/12/2024 (#263)

* fix: modal dismiss (#246) * fix(modal): make `onDismiss` optional and conditionally render close button * feat: add change * feat: fix change * feat: add change log * feat: add change log * feat: fix change log * feat: fix change log * feat: fix change logs * fix: versions yml * feat: fix test --------- Co-authored-by: dommirr <[email protected]> Co-authored-by: Ignacio Zullo Salvucci <[email protected]> Co-authored-by: Harry Barzola <[email protected]> * fix(tabs): align center buttons (#261) * fix: tabs align center when is full * chore: include patch to components * docs: add changelog * chore: fix version release --------- Co-authored-by: dommirr <[email protected]> Co-authored-by: dommirr <[email protected]> Co-authored-by: Ignacio Zullo Salvucci <[email protected]>
TiendaNube · Dec 18, 2024 · 2c6415f · 2c6415f
1 parent 4ae87d8
commit 2c6415f
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 19 deletions.
diff --git a/.yarn/versions/4ea2028c.yml b/.yarn/versions/4ea2028c.yml
@@ -0,0 +1,8 @@
+releases:
+  "@nimbus-ds/components": patch
+  "@nimbus-ds/modal": patch
+  "@nimbus-ds/styles": patch
+  "@nimbus-ds/tabs": patch
+
+declined:
+  - nimbus-design-system
diff --git a/packages/core/styles/CHANGELOG.md b/packages/core/styles/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 Nimbus Styles deprive all styles needed to build nimbus components.
 
+## 2024-12-18 `9.11.6`
+
+#### 🐛 Bug fixes
+
+- We detected that the content of the Tabs, when set to full, was not centered but aligned to the left. ([#261](https://github.com/TiendaNube/nimbus-design-system/pull/261) by [@harrytiendanube](https://github.com/harrytiendanube) )
+
 ## 2024-04-22 `9.11.5`
 
 #### 💡 Others

diff --git a/packages/core/styles/src/packages/composite/tabs/nimbus-tabs.css.ts b/packages/core/styles/src/packages/composite/tabs/nimbus-tabs.css.ts
@@ -72,6 +72,9 @@ export const container__button = styleVariants({
       },
     },
   ],
+  fullWidth: {
+    justifyContent: "center",
+  },
 });
 
 export const container__panel = vanillaStyle({

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 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-12-18 `5.5.5`
+
+#### 🐛 Bug fixes
+
+- We detected that the content of the Tabs, when set to full, was not centered but aligned to the left. ([#261](https://github.com/TiendaNube/nimbus-design-system/pull/261) by [@harrytiendanube](https://github.com/harrytiendanube) )
+- 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
@@ -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
@@ -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
@@ -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
@@ -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]);
 

diff --git 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<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", () => {

diff --git 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 (
+      <>
+        <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>
+      </>
+    ),
+  },
+};
diff --git 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
    */

diff --git a/packages/react/src/composite/Tabs/CHANGELOG.md b/packages/react/src/composite/Tabs/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 The Tabs component allows us to separate content from the same hierarchy into different tabs.
 
+## 2024-12-18 `2.3.0`
+
+#### 🐛 Bug fixes
+
+- We detected that the content of the Tabs, when set to full, was not centered but aligned to the left. ([#261](https://github.com/TiendaNube/nimbus-design-system/pull/261) by [@harrytiendanube](https://github.com/harrytiendanube) )
+
 ## 2024-01-18 `2.3.0`
 
 ### 🎉 New features

diff --git a/packages/react/src/composite/Tabs/src/components/TabsButton/TabsButton.tsx b/packages/react/src/composite/Tabs/src/components/TabsButton/TabsButton.tsx
@@ -30,9 +30,10 @@ const TabsButton: React.FC<TabsButtonProps> = ({
       {...rest}
     >
       <button
-        className={
-          tabs.classnames.container__button[active ? "active" : "default"]
-        }
+        className={[
+          tabs.classnames.container__button[active ? "active" : "default"],
+          fullWidth ? tabs.classnames.container__button.fullWidth : "",
+        ].join(" ")}
         onClick={handleOnClick}
         type="button"
         id={`tab-${ariaID}`}
-Original file line number
+Diff line change
@@ Expand Up / @@ -72,6 +72,9 @@ export const container__button = styleVariants({ @@
           },
         },
       ],
+      fullWidth: {
+        justifyContent: "center",
+      },
     });
     export const container__panel = vanillaStyle({
@@ Expand Down @@