From 4a24a1773cdce70acd69a85b06be43e03cd51eb9 Mon Sep 17 00:00:00 2001
From: Tal Koren <talko@monday.com>
Date: Sun, 7 Apr 2024 12:37:08 +0100
Subject: [PATCH] fix(Label): changes selectors

---
 .../src/components/Label/Label.module.scss    | 30 +++++++++----------
 packages/core/src/components/Label/Label.tsx  |  7 +++--
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/core/src/components/Label/Label.module.scss b/packages/core/src/components/Label/Label.module.scss
index 536efb0fe4..330fb959e2 100644
--- a/packages/core/src/components/Label/Label.module.scss
+++ b/packages/core/src/components/Label/Label.module.scss
@@ -2,7 +2,7 @@
 @import "../../styles/typography";
 @import "../../styles/keyframes";
 
-.clickable {
+.clickableWrapper {
   @include clickable.clickable;
 
   &:active {
@@ -46,8 +46,8 @@
       fill: var(--primary-color);
     }
 
-    .clickable:hover &,
-    .clickable:active & {
+    &.clickable:hover,
+    &.clickable:active {
       background-color: var(--primary-hover-color);
     }
   }
@@ -67,8 +67,8 @@
       fill: var(--negative-color);
     }
 
-    .clickable:hover &,
-    .clickable:active & {
+    &.clickable:hover,
+    &.clickable:active {
       background-color: var(--negative-color-hover);
     }
   }
@@ -80,8 +80,8 @@
       fill: var(--positive-color);
     }
 
-    .clickable:hover &,
-    .clickable:active & {
+    &.clickable:hover,
+    &.clickable:active {
       background-color: var(--positive-color-hover);
     }
   }
@@ -103,8 +103,8 @@
       fill: var(--primary-color);
     }
 
-    .clickable:hover &,
-    .clickable:active & {
+    &.clickable:hover,
+    &.clickable:active {
       background-color: var(--primary-background-hover-color);
     }
   }
@@ -116,8 +116,8 @@
       fill: var(--inverted-color-background);
     }
 
-    .clickable:hover &,
-    .clickable:active & {
+    &.clickable:hover,
+    &.clickable:active {
       background-color: var(--primary-background-hover-color);
     }
   }
@@ -129,8 +129,8 @@
       fill: var(--negative-color);
     }
 
-    .clickable:hover &,
-    .clickable:active & {
+    &.clickable:hover,
+    &.clickable:active {
       background-color: var(--negative-color-selected);
     }
   }
@@ -142,8 +142,8 @@
       fill: var(--positive-color);
     }
 
-    .clickable:hover &,
-    .clickable:active & {
+    &.clickable:hover,
+    &.clickable:active {
       background-color: var(--positive-color-selected);
     }
   }
diff --git a/packages/core/src/components/Label/Label.tsx b/packages/core/src/components/Label/Label.tsx
index 9a6004d848..23b099fd26 100644
--- a/packages/core/src/components/Label/Label.tsx
+++ b/packages/core/src/components/Label/Label.tsx
@@ -68,11 +68,12 @@ const Label: VibeComponent<LabelProps> & {
           {
             // When celebrationAnimation is active it wins over the default animation
             [styles.withAnimation]: !isAnimationDisabled && !isCelebrationAnimation,
-            [styles.withLeg]: isLegIncluded
+            [styles.withLeg]: isLegIncluded,
+            [styles.clickable]: isClickable
           },
           labelClassName
         ),
-      [kind, color, isAnimationDisabled, isLegIncluded, labelClassName, isCelebrationAnimation]
+      [kind, color, isAnimationDisabled, isLegIncluded, labelClassName, isCelebrationAnimation, isClickable]
     );
 
     const onClickCallback = useCallback(
@@ -104,7 +105,7 @@ const Label: VibeComponent<LabelProps> & {
       return (
         <span
           {...(isClickable && clickableProps)}
-          className={cx({ [styles.clickable]: isClickable }, overrideClassName)}
+          className={cx({ [styles.clickableWrapper]: isClickable }, overrideClassName)}
           data-testid={dataTestId || getTestId(ComponentDefaultTestId.LABEL, id)}
           ref={mergedRef}
         >