fix(checkbox,ripple): restore theme inheritance for scoped tick mark - #17571
Merged
Conversation
Fixed the tick-mark icon rendering with the Indigo shape (rounded rect + custom path) inside CSS-scoped subtrees that use a different design system than the application's global theme, e.g. a `material`-themed widget nested inside an `indigo`-themed app. Both tick-mark variants are now always rendered and toggled purely via CSS (`@container style(--ig-theme: indigo)`), removing the dependency on JS-side theme detection that could go stale in nested/multi-theme scenarios (#15021)
desig9stein
approved these changes
Sep 3, 2026
desig9stein
added
the
✅ status: verified
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
CheckboxBaseDirective uses takeUntil(this.destroy$) but never triggers destroy$, so statusChanges subscriptions can leak on teardown.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR fixes multi-theme behavior regressions by making theme selection fully CSS-driven (via --ig-theme scoping and container style queries), ensuring nested/scoped theme contexts render correctly without relying on potentially stale JS-side theme detection.
Changes:
- Update checkbox tick-mark rendering to always stamp both SVG variants and switch visibility purely via CSS-scoped theme signals.
- Fix ripple theme styling so
[igxRipple]no longer breaks runtime theme inheritance for nested content by overriding--ig-theme/--ig-theme-variantto inherit. - Add regression unit tests and update
getComponentTheme()to read--ig-theme(the live scoping source of truth).
File summaries
| File | Description |
|---|---|
| projects/igniteui-angular/input-group/src/input-group/input-group.component.spec.ts | Adds regression test ensuring getComponentTheme() reflects locally scoped --ig-theme rather than only global theme. |
| projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts | Removes ThemeToken-based theme tracking from the checkbox base directive. |
| projects/igniteui-angular/core/src/core/utils.ts | Switches getComponentTheme() to read --ig-theme and documents intended semantics. |
| projects/igniteui-angular/core/src/core/styles/components/ripple/_ripple-theme.scss | Restores theme inheritance under ripple hosts/wrappers by forcing --ig-theme/variant to inherit. |
| projects/igniteui-angular/checkbox/src/checkbox/themes/shared/_indigo.scss | Makes Indigo tick-mark styling target the Indigo mark variant and hides non-Indigo mark within Indigo theme scoping. |
| projects/igniteui-angular/checkbox/src/checkbox/themes/_base.scss | Hides the Indigo mark by default for non-Indigo themes. |
| projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts | Removes host theme-class bindings, relying on CSS-scoped theming instead. |
| projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.spec.ts | Adds regression tests for nested theme scoping (issue #15021) validating mark visibility. |
| projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.html | Always renders both tick-mark SVG variants and relies on CSS to toggle visibility. |
| projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts | Removes ThemeToken-based theme-class bindings from days view. |
| CHANGELOG.md | Documents the checkbox and ripple theming bug fixes under 22.2.0. |
Review details
Suppressed comments (1)
projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:235
destroy$is never emitted/completed, so thestatusChangessubscription inngAfterViewInit()that usestakeUntil(this.destroy$)won't unsubscribe when the directive is destroyed. Hooking the Subject intoDestroyRefensures proper cleanup for all derived components (including those that overridengOnDestroy).
constructor() {
if (this.ngControl !== null) {
this.ngControl.valueAccessor = this;
}
}
- Files reviewed: 11/11 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+1
to
5
| import { Directive, EventEmitter, HostListener, HostBinding, Input, Output, ViewChild, ElementRef, ChangeDetectorRef, booleanAttribute, inject, AfterViewInit } from '@angular/core'; | ||
| import { NgControl, Validators } from '@angular/forms'; | ||
| import { IBaseEventArgs, getComponentTheme } from 'igniteui-angular/core'; | ||
| import { IBaseEventArgs } from 'igniteui-angular/core'; | ||
| import { noop, Subject } from 'rxjs'; | ||
| import { takeUntil } from 'rxjs/operators'; |
simeonoff
added
checkbox
ripple
✨ themes
version: 22.2.x
✅ status: verified
simeonoff
enabled auto-merge (squash)
September 3, 2026 12:48
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #15021
Description
IgxCheckboxComponentmaterial-themed widget nested inside anindigo-themed app. Both tick-mark variants are now always rendered and toggled purely via CSS (@container style(--ig-theme: indigo)), removing the dependency on JS-side theme detection that could go stale in nested/multi-theme scenarios (Checkbox SVG icon displays incorrectly in applications with multiple themes #15021).[igxRipple]unconditionally stamping--ig-theme/--ig-theme-variant(from its own compile-time schema) onto its host element, which broke runtime theme inheritance for any content nested inside a ripple host (e.g. a checkbox's tick mark) when that content sat in a differently CSS-scoped theme than the app's global one.Type of Change (check all that apply):
Component(s) / Area(s) Affected:
Checkbox, Days View, Ripple, Input Group
How Has This Been Tested?
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)