fix(checkbox): tickmark not rendered correctly in indigo theme (#15080)

Author: simeonoff

projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts

@@ -12,13 +12,15 @@ import {
     Renderer2,
     Optional,
     Self,
-    booleanAttribute
+    booleanAttribute,
+    inject,
+    DestroyRef
 } from '@angular/core';
 import { ControlValueAccessor, NgControl, Validators } from '@angular/forms';
 import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
 import { IBaseEventArgs, mkenum } from '../core/utils';
 import { EditorProvider, EDITOR_PROVIDER } from '../core/edit-provider';
-import { noop, Subject } from 'rxjs';
+import { noop, Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { IgxTheme, ThemeService } from '../services/theme/theme.service';
 
@@ -287,6 +289,58 @@ export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, Cont
     @HostBinding('class.igx-checkbox')
     public cssClass = 'igx-checkbox';
 
+    /**
+     * Returns if the component is of type `material`.
+     *
+     * @example
+     * ```typescript
+     * let checkbox = this.checkbox.material;
+     * ```
+     */
+    @HostBinding('class.igx-checkbox--material')
+    protected get material() {
+        return this.theme === 'material';
+    }
+
+    /**
+     * Returns if the component is of type `indigo`.
+     *
+     * @example
+     * ```typescript
+     * let checkbox = this.checkbox.indigo;
+     * ```
+     */
+    @HostBinding('class.igx-checkbox--indigo')
+    protected get indigo() {
+        return this.theme === 'indigo';
+    }
+
+    /**
+     * Returns if the component is of type `bootstrap`.
+     *
+     * @example
+     * ```typescript
+     * let checkbox = this.checkbox.bootstrap;
+     * ```
+     */
+    @HostBinding('class.igx-checkbox--bootstrap')
+    protected get bootstrap() {
+        return this.theme === 'bootstrap';
+    }
+
+    /**
+     * Returns if the component is of type `fluent`.
+     *
+     * @example
+     * ```typescript
+     * let checkbox = this.checkbox.fluent;
+     * ```
+     */
+    @HostBinding('class.igx-checkbox--fluent')
+    protected get fluent() {
+        return this.theme === 'fluent';
+    }
+
     /**
      * Sets/gets whether the checkbox component is on focus.
      * Default value is `false`.
@@ -410,42 +464,57 @@ export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, Cont
      * @internal
      */
     public inputId = `${this.id}-input`;
+
     /**
      * @hidden
      */
     protected _onChangeCallback: (_: any) => void = noop;
+
     /**
      * @hidden
      */
     private _onTouchedCallback: () => void = noop;
+
     /**
      * @hidden
      * @internal
      */
     protected _checked = false;
+
     /**
      * @hidden
      * @internal
      */
-    private _required = false;
+    protected theme: IgxTheme;
 
     /**
      * @hidden
      * @internal
      */
-    protected theme: IgxTheme = 'material';
+    private _required = false;
+    private elRef = inject(ElementRef);
+    private _theme$ = new Subject<IgxTheme>();
+    private _subscription: Subscription;
+    private destroyRef = inject(DestroyRef);
 
     constructor(
         protected cdr: ChangeDetectorRef,
         protected renderer: Renderer2,
         protected themeService: ThemeService,
         @Optional() @Self() public ngControl: NgControl,
     ) {
-        this.theme = this.themeService?.globalTheme;
-
         if (this.ngControl !== null) {
             this.ngControl.valueAccessor = this;
         }
+
+        this.theme = this.themeService.globalTheme;
+
+        this._subscription = this._theme$.asObservable().subscribe(value => {
+            this.theme = value as IgxTheme;
+            this.cdr.detectChanges();
+        });
+
+        this.destroyRef.onDestroy(() => this._subscription.unsubscribe());
     }
 
     /**
@@ -461,6 +530,13 @@ export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, Cont
                 this.cdr.detectChanges();
             }
         }
+
+        const theme = this.themeService.getComponentTheme(this.elRef);
+
+        if (theme) {
+            this._theme$.next(theme);
+            this.cdr.markForCheck();
+        }
     }
 
     /** @hidden @internal */

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss

@@ -18,17 +18,9 @@
                 @extend %cbx-ripple--hover !optional;
             }
 
-            @include e(composite) {
-                @extend %cbx-composite--hover !optional;
-            }
-
             @include e(composite-mark) {
                 @extend %cbx-composite-mark--fluent !optional;
             }
-
-            @include e(label) {
-                @extend %cbx-label--hover !optional;
-            }
         }
 
         &:active {
@@ -68,6 +60,32 @@
             @extend %cbx-ripple !optional;
         }
 
+        @include m(bootstrap) {
+            @include e(composite) {
+                &:hover {
+                    @extend %cbx-composite--hover !optional;
+                }
+            }
+        }
+
+        @include m(indigo) {
+            @include e(composite) {
+                &:hover {
+                    @extend %cbx-composite--hover !optional;
+                }
+            }
+
+            @include e(composite-mark) {
+                @extend %cbx-composite-mark-indigo !optional;
+            }
+
+            @include e(label) {
+                &:hover {
+                    @extend %cbx-label--hover !optional;
+                }
+            }
+        }
+
         @include m(invalid) {
             @include e(composite) {
                 @extend %cbx-composite--invalid !optional;
@@ -127,26 +145,54 @@
             }
 
             &:hover {
-                @extend %igx-checkbox--focused-hovered !optional;
-                
                 @include e(ripple) {
                     @extend %cbx-ripple--focused !optional;
                 }
             }
         }
 
+        @include mx(indigo, focused) {
+            @extend %igx-checkbox--focused-indigo !optional;
+        }
+
+        @include mx(fluent, focused) {
+            @extend %igx-checkbox--focused-fluent !optional;
+        }
+
+        @include mx(bootstrap, focused) {
+            @extend %igx-checkbox--focused-bootstrap !optional;
+
+            &:hover {
+                @extend %igx-checkbox--focused-hovered !optional;
+            }
+        }
+
+        @include mx(indigo, focused, checked) {
+            @extend %igx-checkbox--focused-checked-indigo !optional;
+        }
+
+        @include mx(bootstrap, focused, checked) {
+            @extend %igx-checkbox--focused-checked-bootstrap !optional;
+        }
+
         @include mx(focused, checked) {
             @extend %igx-checkbox--focused-checked !optional;
         }
 
         @include mx(focused, invalid) {
-            @extend %igx-checkbox--focused-invalid !optional;
-
             @include e(ripple) {
                 @extend %cbx-ripple--focused-invalid !optional;
             }
         }
 
+        @include mx(indigo, focused, invalid) {
+            @extend %igx-checkbox--focused-invalid-indigo !optional;
+        }
+
+        @include mx(bootstrap, focused, invalid) {
+            @extend %igx-checkbox--focused-invalid-bootstrap !optional;
+        }
+
         @include m(indeterminate) {
             @extend %igx-checkbox--indeterminate !optional;
 
@@ -178,6 +224,18 @@
             }
         }
 
+        @include mx(indigo, indeterminate) {
+            @extend %igx-checkbox--indeterminate-indigo !optional;
+        }
+
+        @include mx(fluent, indeterminate) {
+            @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;
 
@@ -188,8 +246,12 @@
             }
         }
 
-        @include mx(focused, indeterminate) {
-            @extend %igx-checkbox--focused-checked !optional;
+        @include mx(indigo, focused, indeterminate) {
+            @extend %igx-checkbox--focused-checked-indigo !optional;
+        }
+
+        @include mx(bootstrap, focused, indeterminate) {
+            @extend %igx-checkbox--focused-checked-bootstrap !optional;
         }
 
         @include m(checked) {