Fix sidebar (#233)

* fix: scroll in Sidebar * fix: toast types bug * chore: prepare versions * chore: update changelog * fix: add needRemoveScroll prop * fix: add versions * fix: update changelog --------- Co-authored-by: Ignacio Zullo Salvucci <[email protected]> Co-authored-by: Juan Manuel Gallego <[email protected]>
TiendaNube · Apr 17, 2024 · 892c96f · 892c96f
1 parent 5c60baa
commit 892c96f
Show file tree

Hide file tree

Showing 12 changed files with 115 additions and 12 deletions.
diff --git a/.yarn/versions/6aac88c0.yml b/.yarn/versions/6aac88c0.yml
@@ -0,0 +1,7 @@
+releases:
+  "@nimbus-ds/components": patch
+  "@nimbus-ds/sidebar": minor
+  "@nimbus-ds/toast": patch
+
+declined:
+  - nimbus-design-system
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 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-03-18 `5.5.2`
+
+### 🐛 Bug fixes
+
+- Added `RemoveScroll` component from `react-remove-scroll` library to prevent scroll resetting on the body of the `Sidebar` component. ([#233](https://github.com/TiendaNube/nimbus-design-system/pull/233) by [@juanchigallego](https://github.com/juanchigallego))
+- Added `needRemoveScroll` optional prop to `Sidebar` component. ([#233](https://github.com/TiendaNube/nimbus-design-system/pull/233) by [@juanchigallego](https://github.com/juanchigallego))
+- Fixed type bug on expected icon and text color values on `Toast` component. ([#233](https://github.com/TiendaNube/nimbus-design-system/pull/233) by [@juanchigallego](https://github.com/juanchigallego))
+
+### 📚 3rd party library updates
+
+- Added `[email protected]` to `Sidebar` component. ([#233](https://github.com/TiendaNube/nimbus-design-system/pull/233) by [@juanchigallego](https://github.com/juanchigallego))
+
 ## 2024-03-01 `5.4.2`
 
 ### 🎉 New features

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -31,5 +31,6 @@
   },
   "devDependencies": {
     "@nimbus-ds/webpack": "workspace:^"
-  }
+  },
+  "stableVersion": "5.5.1"
 }
diff --git a/packages/react/src/atomic/Toast/CHANGELOG.md b/packages/react/src/atomic/Toast/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 The Toast component allows us to notify users in an informational tone, describing that something has happened or is happening, without interrupting navigation.
 
+## 2024-03-18 `2.3.1`
+
+### 🐛 Bug fixes
+
+- Fixed type bug on expected icon and text color values. ([#233](https://github.com/TiendaNube/nimbus-design-system/pull/233) by [@juanchigallego](https://github.com/juanchigallego))
+
 ## 2023-03-13 `2.3.0`
 
 ### 💡 Others

diff --git a/packages/react/src/atomic/Toast/package.json b/packages/react/src/atomic/Toast/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nimbus-ds/toast",
-  "version": "2.3.0",
+  "version": "2.3.1-rc.1",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [
@@ -33,5 +33,6 @@
   },
   "devDependencies": {
     "@nimbus-ds/webpack": "workspace:^"
-  }
+  },
+  "stableVersion": "2.3.0"
 }
diff --git a/packages/react/src/atomic/Toast/src/Toast.tsx b/packages/react/src/atomic/Toast/src/Toast.tsx
@@ -15,7 +15,12 @@ import {
 } from "@nimbus-ds/icons";
 import { toast } from "@nimbus-ds/styles";
 
-import { ToastComponents, ToastProps, TypesColors } from "./toast.types";
+import {
+  IconColor,
+  ToastComponents,
+  ToastProps,
+  TypesColors,
+} from "./toast.types";
 import { useToast } from "./hooks";
 import { ToastProvider } from "./components";
 
@@ -83,6 +88,13 @@ const Toast: React.FC<ToastProps> & ToastComponents = ({
     [type]
   ) as TypesColors;
 
+  const colorMapping: Record<TypesColors, IconColor> = {
+    primary: "primary-surface",
+    success: "success-surface",
+    danger: "danger-surface",
+    neutral: "neutral-surface",
+  };
+
   return (
     <div
       id={id}
@@ -98,7 +110,7 @@ const Toast: React.FC<ToastProps> & ToastComponents = ({
       {!isProgress && (
         <Icon
           data-testid={`toast-icon-${types}`}
-          color={`${types}-surface`}
+          color={colorMapping[types]}
           source={icons[type]}
         />
       )}
@@ -109,7 +121,7 @@ const Toast: React.FC<ToastProps> & ToastComponents = ({
           size="small"
         />
       )}
-      <Text color={`${types}-surface`} fontSize="caption" lineHeight="caption">
+      <Text color={colorMapping[types]} fontSize="caption" lineHeight="caption">
         {text}
       </Text>
     </div>

diff --git a/packages/react/src/atomic/Toast/src/toast.types.ts b/packages/react/src/atomic/Toast/src/toast.types.ts
@@ -7,7 +7,13 @@ export interface ToastComponents {
 }
 
 export type Types = "primary" | "success" | "danger" | "progress";
-export type TypesColors = Omit<Types, "progress"> & "neutral";
+export type TypesColors = Exclude<Types, "progress"> | "neutral";
+
+export type IconColor =
+  | "primary-surface"
+  | "success-surface"
+  | "danger-surface"
+  | "neutral-surface";
 
 export interface ToastProperties {
   /**

diff --git a/packages/react/src/composite/Sidebar/CHANGELOG.md b/packages/react/src/composite/Sidebar/CHANGELOG.md
@@ -2,6 +2,16 @@
 
 The Sidebar component is a large floating container that goes into the page from the corners. It allows us to present actions, forms or sections with a lot of information about the context of the page.
 
+## 2024-04-15gs `3.3.0`
+
+#### 🐛 Bug fixes
+
+- Added `RemoveScroll` component from `react-remove-scroll` library to prevent scroll resetting on the body of the `Sidebar` component. ([#233](https://github.com/TiendaNube/nimbus-design-system/pull/233) by [@juanchigallego](https://github.com/juanchigallego))
+
+#### 📚 3rd party library updates
+
+- Added `[email protected]`. ([#233](https://github.com/TiendaNube/nimbus-design-system/pull/233) by [@juanchigallego](https://github.com/juanchigallego))
+
 ## 2023-12-22 `3.2.1`
 
 #### 🎉 New features

diff --git a/packages/react/src/composite/Sidebar/package.json b/packages/react/src/composite/Sidebar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nimbus-ds/sidebar",
-  "version": "3.2.2",
+  "version": "3.3.0-rc.2",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [
@@ -15,7 +15,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.0",
-    "@nimbus-ds/title": "workspace:^"
+    "@nimbus-ds/title": "workspace:^",
+    "react-remove-scroll": "2.5.7"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0",
@@ -34,5 +35,6 @@
     "@nimbus-ds/button": "workspace:^",
     "@nimbus-ds/text": "workspace:^",
     "@nimbus-ds/webpack": "workspace:^"
-  }
+  },
+  "stableVersion": "3.2.2"
 }
diff --git a/packages/react/src/composite/Sidebar/src/Sidebar.tsx b/packages/react/src/composite/Sidebar/src/Sidebar.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { RemoveScroll } from "react-remove-scroll";
 import {
   FloatingFocusManager,
   FloatingOverlay,
@@ -18,6 +19,7 @@ const Sidebar: React.FC<SidebarProps> & SidebarComponents = ({
   position = "right",
   maxWidth = "375px",
   open = false,
+  needRemoveScroll = false,
   children,
   onRemove,
   ...rest
@@ -44,7 +46,6 @@ const Sidebar: React.FC<SidebarProps> & SidebarComponents = ({
     <FloatingPortal id="nimbus-sidebar" root={refThemeProvider?.current}>
       <FloatingOverlay
         className={sidebar.classnames.overlay}
-        lockScroll
         data-testid="overlay-sidebar-button"
       >
         <FloatingFocusManager context={context}>
@@ -61,7 +62,11 @@ const Sidebar: React.FC<SidebarProps> & SidebarComponents = ({
               open && sidebar.classnames.isVisible,
             ].join(" ")}
           >
-            {children}
+            {needRemoveScroll ? (
+              <RemoveScroll>{children}</RemoveScroll>
+            ) : (
+              children
+            )}
           </div>
         </FloatingFocusManager>
       </FloatingOverlay>

diff --git a/packages/react/src/composite/Sidebar/src/sidebar.types.ts b/packages/react/src/composite/Sidebar/src/sidebar.types.ts
@@ -34,6 +34,11 @@ export interface SidebarProperties extends SidebarSprinkle {
    * @default true
    */
   open?: boolean;
+  /**
+   * Determines if RemoveScroll wraps sidebar's children component.
+   * @default true
+   */
+  needRemoveScroll?: boolean;
 }
 
 export type SidebarProps = SidebarProperties & HTMLAttributes<HTMLDivElement>;
diff --git a/yarn.lock b/yarn.lock
@@ -4754,6 +4754,7 @@ __metadata:
     "@nimbus-ds/text": "workspace:^"
     "@nimbus-ds/title": "workspace:^"
     "@nimbus-ds/webpack": "workspace:^"
+    react-remove-scroll: 2.5.7
   peerDependencies:
     react: ^16.8 || ^17.0 || ^18.0
     react-dom: ^16.8 || ^17.0 || ^18.0
@@ -18100,6 +18101,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-remove-scroll-bar@npm:^2.3.4":
+  version: 2.3.6
+  resolution: "react-remove-scroll-bar@npm:2.3.6"
+  dependencies:
+    react-style-singleton: ^2.2.1
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: e793fe110e2ea60d5724d0b60f09de1f6cd1b080df00df9e68bb9a1b985895830e703194647059fdc22402a67a89b7673a5260773b89bcd98031fd99bc91aefa
+  languageName: node
+  linkType: hard
+
 "react-remove-scroll@npm:2.5.5":
   version: 2.5.5
   resolution: "react-remove-scroll@npm:2.5.5"
@@ -18119,6 +18136,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-remove-scroll@npm:2.5.7":
+  version: 2.5.7
+  resolution: "react-remove-scroll@npm:2.5.7"
+  dependencies:
+    react-remove-scroll-bar: ^2.3.4
+    react-style-singleton: ^2.2.1
+    tslib: ^2.1.0
+    use-callback-ref: ^1.3.0
+    use-sidecar: ^1.1.2
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: e0dbb6856beaed2cff4996d9ca62d775686ff72e3e9de34043034d932223b588993b2fc7a18644750dd3d73eb19bd3f2cedb8d91f0e424c1ef8403010da24b1d
+  languageName: node
+  linkType: hard
+
 "react-style-singleton@npm:^2.2.1":
   version: 2.2.1
   resolution: "react-style-singleton@npm:2.2.1"