fix(Label): changes selectors

mondaycom · Apr 7, 2024 · 4a24a17 · 4a24a17
1 parent 03378ba
commit 4a24a17
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 18 deletions.
diff --git 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
@@ -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}
         >