Handle close on Tag cross click (#633)

nordcloud · Aug 4, 2023 · 647498f · 647498f
1 parent 8351a7c
commit 647498f
Showing 4 changed files with 8 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@nordcloud/gnui",
   "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products",
-  "version": "8.13.3",
+  "version": "8.13.4",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/src/components/tag/Tag.stories.mdx b/src/components/tag/Tag.stories.mdx
@@ -66,6 +66,7 @@ import { Breadcrumbs } from "../breadcrumbs";
       text="Help"
       showClose
       onClick={() => alert("clicked")}
+      onCloseClick={() => alert("clicked close")}
     />
     <Tag
       color="purple"

diff --git a/src/components/tag/Tag.tsx b/src/components/tag/Tag.tsx
@@ -12,6 +12,7 @@ type TagProps = {
   text?: string;
   icon?: SVGIconProps["name"];
   onClick?: () => void;
+  onCloseClick?: () => void;
   showClose?: boolean;
   isTransparent?: boolean;
 };
@@ -125,16 +126,17 @@ export function Tag({
   onClick,
   showClose,
   isTransparent,
+  onCloseClick,
   ...props
 }: TagProps) {
   return (
     <StyledTag
       color={color}
       colorText={colorText}
       icon={icon}
-      onClick={onClick}
       showClose={showClose}
       isTransparent={isTransparent}
+      onClick={onCloseClick ? undefined : onClick}
       {...props}
     >
       {icon && (
@@ -145,7 +147,7 @@ export function Tag({
       {text && <div className="tag-text">{text}</div>}
       {showClose && (
         <div className="tag-close-button">
-          <SVGIcon name="close" size="sm" />
+          <SVGIcon name="close" size="sm" onClick={onCloseClick} />
         </div>
       )}
     </StyledTag>