fix(chip): trigger onClick when press close icon (#240)

* fix(chip): removable click * fix: changelog pr reference * fix: add styles changelog * fix: nimbus-styles changelog update * fix: update changelog date * fix: sidebar
TiendaNube · Apr 23, 2024 · a99ace2 · a99ace2
1 parent 8551621
commit a99ace2
Show file tree

Hide file tree

Showing 13 changed files with 73 additions and 19 deletions.
diff --git a/.yarn/versions/35d7933f.yml b/.yarn/versions/35d7933f.yml
@@ -0,0 +1,8 @@
+releases:
+  "@nimbus-ds/chip": patch
+  "@nimbus-ds/components": patch
+  "@nimbus-ds/sidebar": patch
+  "@nimbus-ds/styles": 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-04-22 `9.11.5`
+
+#### 💡 Others
+
+- Added `chip_close_icon_container` class for `Chip` component. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/240) by [@nachozullo](https://github.com/nachozullo))
+
 ## 2024-02-29 `9.11.0`
 
 #### 🎉 New features

diff --git a/packages/core/styles/package.json b/packages/core/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nimbus-ds/styles",
-  "version": "9.11.4",
+  "version": "9.11.5-rc.3",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [
@@ -32,5 +32,6 @@
     "glob": "^8.0.3",
     "rainbow-sprinkles": "^0.14.0",
     "ts-node": "^10.9.1"
-  }
+  },
+  "stableVersion": "9.11.4"
 }
diff --git a/packages/core/styles/src/packages/atomic/chip/nimbus-chip.css.ts b/packages/core/styles/src/packages/atomic/chip/nimbus-chip.css.ts
@@ -6,7 +6,7 @@ export const base = vanillaStyle({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  cursor: "pointer",
+  cursor: "default",
 
   padding: `${varsThemeBase.spacing[1]} ${varsThemeBase.spacing[2]}`,
   gap: varsThemeBase.spacing[1],
@@ -39,3 +39,11 @@ export const base = vanillaStyle({
     borderColor: varsThemeBase.colors.neutral.interactivePressed,
   },
 });
+
+export const chip_close_icon_container = vanillaStyle({
+  background: "transparent",
+  border: "none",
+  padding: 0,
+  fontSize: 0,
+  cursor: "pointer",
+});
diff --git 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-04-22 `5.5.4`
+
+### 💡 Others
+
+- Trigger `onClick` only when close icon is pressed on `Chip` component. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/240) by [@nachozullo](https://github.com/nachozullo))
+- Added `lockScroll` to prevent scroll outside of the body of `Sidebar` component. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/240) by [@nachozullo](https://github.com/nachozullo))
+
 ## 2024-03-18 `5.5.3`
 
 ### 🐛 Bug fixes

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nimbus-ds/components",
-  "version": "5.5.3",
+  "version": "5.5.4-rc.3",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [
@@ -31,5 +31,6 @@
   },
   "devDependencies": {
     "@nimbus-ds/webpack": "workspace:^"
-  }
+  },
+  "stableVersion": "5.5.3"
 }
diff --git a/packages/react/src/atomic/Chip/CHANGELOG.md b/packages/react/src/atomic/Chip/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 The Chip component is used to flag criteria or attributes related to searches or filters of a list of information.
 
+## 2024-04-22 `2.3.3`
+
+### 💡 Others
+
+- Trigger `onClick` only when close icon is pressed. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/240) by [@nachozullo](https://github.com/nachozullo))
+
 ## 2024-02-07 `2.3.2`
 
 ### 🐛 Bug fixes

diff --git a/packages/react/src/atomic/Chip/package.json b/packages/react/src/atomic/Chip/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nimbus-ds/chip",
-  "version": "2.3.2",
+  "version": "2.3.3-rc.3",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [
@@ -34,5 +34,6 @@
   "devDependencies": {
     "@nimbus-ds/box": "workspace:^",
     "@nimbus-ds/webpack": "workspace:^"
-  }
+  },
+  "stableVersion": "2.3.2"
 }
diff --git a/packages/react/src/atomic/Chip/src/Chip.tsx b/packages/react/src/atomic/Chip/src/Chip.tsx
@@ -3,7 +3,6 @@ import { CloseIcon } from "@nimbus-ds/icons";
 import { chip } from "@nimbus-ds/styles";
 import { Text } from "@nimbus-ds/text";
 import { Icon } from "@nimbus-ds/icon";
-
 import { ChipProps, ChipComponents } from "./chip.types";
 import { ChipSkeleton } from "./components";
 
@@ -13,9 +12,10 @@ const Chip: React.FC<ChipProps> & ChipComponents = ({
   text,
   icon,
   removable,
+  onClick,
   ...rest
 }: ChipProps) => (
-  <button type="button" {...rest} className={chip.classnames.base}>
+  <div {...rest} className={chip.classnames.base}>
     {icon && <Icon source={icon} color="neutral-textHigh" />}
     <Text
       color="neutral-textHigh"
@@ -27,13 +27,21 @@ const Chip: React.FC<ChipProps> & ChipComponents = ({
       {text}
     </Text>
     {removable && (
-      <Icon
-        data-testid="close-chip"
-        source={<CloseIcon size={12} />}
-        color="neutral-textHigh"
-      />
+      <button
+        aria-label="Dismiss chip"
+        data-testid="dismiss-chip-button"
+        type="button"
+        onClick={onClick}
+        className={chip.classnames.chip_close_icon_container}
+      >
+        <Icon
+          data-testid="close-chip"
+          source={<CloseIcon size={12} />}
+          color="neutral-textHigh"
+        />
+      </button>
     )}
-  </button>
+  </div>
 );
 
 Chip.Skeleton = ChipSkeleton;

diff --git a/packages/react/src/atomic/Chip/src/chip.types.ts b/packages/react/src/atomic/Chip/src/chip.types.ts
@@ -22,4 +22,4 @@ export interface ChipProperties {
 }
 
 export type ChipProps = ChipProperties &
-  ButtonHTMLAttributes<HTMLButtonElement>;
+  ButtonHTMLAttributes<HTMLButtonElement | HTMLDivElement>;
diff --git a/packages/react/src/composite/Sidebar/CHANGELOG.md b/packages/react/src/composite/Sidebar/CHANGELOG.md
@@ -2,7 +2,13 @@
 
 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`
+## 2024-04-22 `3.3.1`
+
+#### 🐛 Bug fixes
+
+- Added `lockScroll` to prevent scroll outside of the body of `Sidebar` component. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/240) by [@nachozullo](https://github.com/nachozullo))
+
+## 2024-04-15 `3.3.0`
 
 #### 🐛 Bug fixes
 

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.3.0",
+  "version": "3.3.1-rc.1",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [
@@ -35,5 +35,6 @@
     "@nimbus-ds/button": "workspace:^",
     "@nimbus-ds/text": "workspace:^",
     "@nimbus-ds/webpack": "workspace:^"
-  }
+  },
+  "stableVersion": "3.3.0"
 }
diff --git a/packages/react/src/composite/Sidebar/src/Sidebar.tsx b/packages/react/src/composite/Sidebar/src/Sidebar.tsx
@@ -47,6 +47,7 @@ const Sidebar: React.FC<SidebarProps> & SidebarComponents = ({
       <FloatingOverlay
         className={sidebar.classnames.overlay}
         data-testid="overlay-sidebar-button"
+        lockScroll={!needRemoveScroll}
       >
         <FloatingFocusManager context={context}>
           <div