fix(checkbox): disabled state issues (#15197)

IgniteUI · Jan 6, 2025 · d1feefe · d1feefe
1 parent 5ee60f7
commit d1feefe
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.21.1",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^14.3.0",
+    "igniteui-theming": "^14.3.1",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",

diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json
@@ -73,7 +73,7 @@
         "tslib": "^2.3.0",
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
-        "igniteui-theming": "^14.3.0",
+        "igniteui-theming": "^14.3.1",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss
@@ -232,10 +232,6 @@
             @extend %igx-checkbox--indeterminate-fluent !optional;
         }
 
-        @include mx(material, indeterminate) {
-            @extend %igx-checkbox--indeterminate-material !optional;
-        }
-
         @include mx(invalid, indeterminate) {
             @extend %igx-checkbox--indeterminate--invalid !optional;
 
@@ -246,6 +242,18 @@
             }
         }
 
+        @include mx(material, disabled, indeterminate) {
+            @extend %igx-checkbox--disabled-indeterminate-material !optional;
+        }
+
+        @include mx(fluent, disabled, indeterminate) {
+            @extend %igx-checkbox--disabled-indeterminate-fluent !optional;
+        }
+
+        @include mx(indigo, disabled, indeterminate) {
+            @extend %igx-checkbox--disabled-indeterminate-indigo !optional;
+        }
+
         @include mx(indigo, focused, indeterminate) {
             @extend %igx-checkbox--focused-checked-indigo !optional;
         }

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
@@ -23,6 +23,7 @@
 /// @param {Color} $tick-color [null] - The checked mark color.
 /// @param {Color} $tick-color-hover [null] - The checked mark color on hover.
 /// @param {Color} $disabled-color [null] - The disabled border and fill colors.
+/// @param {Color} $disabled-tick-color [null] - The checked mark color in disabled state.
 /// @param {Color} $disabled-indeterminate-color [null] - The disabled border and fill colors in indeterminate state.
 /// @param {Color} $disabled-color-label [null] - The disabled label color.
 /// @param {List} $border-radius [null] - The border radius used for checkbox component.
@@ -52,6 +53,7 @@
     $tick-color: null,
     $tick-color-hover: null,
     $disabled-color: null,
+    $disabled-tick-color: null,
     $disabled-indeterminate-color: null,
     $disabled-color-label: null,
     $border-radius-ripple: null,
@@ -83,6 +85,7 @@
         tick-color: $tick-color,
         tick-color-hover: $tick-color-hover,
         disabled-color: $disabled-color,
+        disabled-tick-color: $disabled-tick-color,
         disabled-indeterminate-color: $disabled-indeterminate-color,
         disabled-color-label: $disabled-color-label,
         border-radius: $border-radius,
@@ -278,15 +281,20 @@
             background: var-get($theme, 'disabled-color');
         }
 
-        @if $variant == 'indigo' {
+        @if $variant == 'indigo' or $variant == 'bootstrap' {
             background: var-get($theme, 'disabled-indeterminate-color');
             border-color: transparent;
-            stroke-opacity: 40%;
         }
 
-        @if $bootstrap-theme {
-            background: var-get($theme, 'disabled-indeterminate-color');
-            border-color: transparent;
+        @if $variant != 'indigo' {
+            %cbx-composite-mark {
+                stroke: var-get($theme, 'disabled-tick-color');
+            }
+        } @else {
+            %cbx-composite-mark {
+                stroke: unset;
+                fill: var-get($theme, 'disabled-tick-color');
+            }
         }
     }
 
@@ -346,7 +354,7 @@
 
     %igx-checkbox--indeterminate-indigo {
         %cbx-composite-mark {
-            fill: none;
+            fill: none !important;
             stroke-dashoffset: unset !important;
             transform: none !important;
 
@@ -357,6 +365,16 @@
         }
     }
 
+    %igx-checkbox--disabled-indeterminate-indigo {
+        @extend %igx-checkbox--indeterminate-indigo;
+
+        %cbx-composite-mark {
+            rect {
+                fill: var-get($theme, 'disabled-tick-color');
+            }
+        }
+    }
+
     %igx-checkbox--indeterminate-fluent {
         %cbx-composite-mark {
             stroke: transparent;
@@ -377,6 +395,12 @@
                 z-index: 1;
             }
         }
+    }
+
+    %igx-checkbox--disabled-indeterminate-fluent {
+        %cbx-composite-mark {
+            stroke: transparent;
+        }
 
         %cbx-composite--x--disabled {
             background: transparent;
@@ -387,7 +411,7 @@
         }
     }
 
-    %igx-checkbox--indeterminate-material {
+    %igx-checkbox--disabled-indeterminate-material {
         %cbx-composite--x--disabled {
             border-color: var-get($theme, 'disabled-indeterminate-color');
             background: var-get($theme, 'disabled-indeterminate-color');