removes disabled hover state for ToggleSwitchField (#5507)

* removes disabled hover state for ToggleSwitchField * Label component handles disabled styling for ToggleSwitchField * adds disabled state back to ToggleSwitch with comments
cultureamp · Feb 10, 2025 · 5b1265d · 5b1265d
1 parent 538d1b9
commit 5b1265d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/.changeset/slow-students-hear.md b/.changeset/slow-students-hear.md
@@ -0,0 +1,5 @@
+---
+'@kaizen/components': patch
+---
+
+ToggleSwitchField: removes hover style from disabled state
diff --git a/packages/components/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss b/packages/components/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss
@@ -36,7 +36,7 @@ $focus-ring-offset: 1px;
   }
 
   .checkbox:not(.disabled) + &:hover,
-  label:hover .checkbox + & {
+  label:hover .checkbox:not(.disabled) + & {
     background-color: $color-purple-500;
     background-color: $color-gray-600;
   }
@@ -55,6 +55,7 @@ $focus-ring-offset: 1px;
   transition:
     left $animation-timing,
     right $animation-timing;
+  cursor: default;
 }
 
 .checkIcon {
@@ -72,7 +73,7 @@ $focus-ring-offset: 1px;
 
   .checkbox:focus + .track {
     border-color: transparent;
-    background-color: $color-green-500;
+    background-color: $color-green-600;
   }
 
   .thumb {
@@ -88,7 +89,7 @@ $focus-ring-offset: 1px;
   }
 
   .checkbox:not(.disabled) + .track:hover,
-  label:hover & .checkbox + .track {
+  label:hover & .checkbox:not(.disabled) + .track {
     background-color: $color-green-600;
   }
 }
@@ -118,10 +119,19 @@ $focus-ring-offset: 1px;
     }
 
     .checkbox:not(.disabled) + .track:hover,
-    label:hover & .checkbox + .track {
+    label:hover & .checkbox:not(.disabled) + .track {
       background-color: rgba($color-white-rgb, 0.65);
     }
   }
 }
 
+// When the ToggleSwitch is used as part of the ToggleSwitchField, the disabled state opacity is set on the Label component
+label .disabled.track {
+  opacity: 100%;
+}
+
+.disabled.track {
+  opacity: 30%;
+}
+
 /* stylelint-enable no-descending-specificity */