From d1feefee6b45e8a8c71c9e09ac973c8bc828e0f7 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Mon, 6 Jan 2025 15:07:48 +0200 Subject: [PATCH] fix(checkbox): disabled state issues (#15197) --- package-lock.json | 9 ++--- package.json | 2 +- projects/igniteui-angular/package.json | 2 +- .../checkbox/_checkbox-component.scss | 16 ++++++-- .../components/checkbox/_checkbox-theme.scss | 38 +++++++++++++++---- 5 files changed, 49 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index f6239e9cc17..4f6224f33c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,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", @@ -12431,10 +12431,9 @@ } }, "node_modules/igniteui-theming": { - "version": "14.3.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-14.3.0.tgz", - "integrity": "sha512-NF43En3g7Qrr2lDOd+nKRYk7T54RJ9OrdjtQplNVGnoxkKnQYeQ2iHEhd0lmmTMRUnNiJUUQwYqM4VUVQyo5dw==", - "license": "MIT", + "version": "14.3.1", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-14.3.1.tgz", + "integrity": "sha512-bh7a9b+VlNOE1tAk6yDbmS5I7VGch3mYtOU1jUvCXrUf6/vPDJYy4AjCRlwR5i/PHYraEj59Cmk0D7N4phxorQ==", "peerDependencies": { "sass": "^1.69.5" } diff --git a/package.json b/package.json index 7788d576653..9d586bc3119 100644 --- 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 index e616ee3095c..4c334e37943 100644 --- 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 index 2bea021daa0..ea5e85bc339 100644 --- 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 index ff07156f7f1..40362179022 100644 --- 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');