From 892c96f50b0d6e83609c3dfb5b13d8147970a907 Mon Sep 17 00:00:00 2001 From: Juan Manuel Gallego Date: Wed, 17 Apr 2024 10:28:38 -0300 Subject: [PATCH] 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 Co-authored-by: Juan Manuel Gallego --- .yarn/versions/6aac88c0.yml | 7 ++++ packages/react/CHANGELOG.md | 12 +++++++ packages/react/package.json | 3 +- packages/react/src/atomic/Toast/CHANGELOG.md | 6 ++++ packages/react/src/atomic/Toast/package.json | 5 +-- packages/react/src/atomic/Toast/src/Toast.tsx | 18 ++++++++-- .../react/src/atomic/Toast/src/toast.types.ts | 8 ++++- .../react/src/composite/Sidebar/CHANGELOG.md | 10 ++++++ .../react/src/composite/Sidebar/package.json | 8 +++-- .../src/composite/Sidebar/src/Sidebar.tsx | 9 +++-- .../composite/Sidebar/src/sidebar.types.ts | 5 +++ yarn.lock | 36 +++++++++++++++++++ 12 files changed, 115 insertions(+), 12 deletions(-) create mode 100644 .yarn/versions/6aac88c0.yml diff --git a/.yarn/versions/6aac88c0.yml b/.yarn/versions/6aac88c0.yml new file mode 100644 index 00000000..47f0f7ea --- /dev/null +++ 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 index 49a17253..9944a324 100644 --- 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 `react-remove-scroll@2.5.7` 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 index f3cf5927..645910ba 100644 --- 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 index 85e5c9e6..6f38548f 100644 --- 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 index cf787806..be0aab87 100644 --- 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 index 4db59f7d..6e9fd46b 100644 --- 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 & ToastComponents = ({ [type] ) as TypesColors; + const colorMapping: Record = { + primary: "primary-surface", + success: "success-surface", + danger: "danger-surface", + neutral: "neutral-surface", + }; + return (
& ToastComponents = ({ {!isProgress && ( )} @@ -109,7 +121,7 @@ const Toast: React.FC & ToastComponents = ({ size="small" /> )} - + {text}
diff --git a/packages/react/src/atomic/Toast/src/toast.types.ts b/packages/react/src/atomic/Toast/src/toast.types.ts index 8b651662..1a71a678 100644 --- 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 & "neutral"; +export type TypesColors = Exclude | "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 index ccdf4a4c..0c9eebbc 100644 --- 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 `react-remove-scroll@2.5.7`. ([#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 index e97158f7..a2847a4a 100644 --- 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 index ae204d08..0d1f3e80 100644 --- 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 & SidebarComponents = ({ position = "right", maxWidth = "375px", open = false, + needRemoveScroll = false, children, onRemove, ...rest @@ -44,7 +46,6 @@ const Sidebar: React.FC & SidebarComponents = ({ @@ -61,7 +62,11 @@ const Sidebar: React.FC & SidebarComponents = ({ open && sidebar.classnames.isVisible, ].join(" ")} > - {children} + {needRemoveScroll ? ( + {children} + ) : ( + children + )} diff --git a/packages/react/src/composite/Sidebar/src/sidebar.types.ts b/packages/react/src/composite/Sidebar/src/sidebar.types.ts index 1ed24e2a..579b2544 100644 --- 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; diff --git a/yarn.lock b/yarn.lock index 4eb9a1af..84433ec6 100644 --- 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"