Skip to content

Commit c1a65c3

Browse files
crisbetowagnermaciel
crisbeto
authored and
wagnermaciel
committed
fix(material/checkbox): no color assigned if defaults don't have a color (#21042)
Fixes an issue where a `mat-checkbox` wouldn't have a `color`, if the `MAT_CHECKBOX_DEFAULT_OPTIONS` was provided without one. Fixes #21031. (cherry picked from commit 5e9cc5f)
1 parent c598fe2 commit c1a65c3

File tree

4 files changed

+58
-63
lines changed

4 files changed

+58
-63
lines changed

‎src/material-experimental/mdc-checkbox/checkbox.spec.ts

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
MatCheckboxChange,
1616
MatCheckboxModule
1717
} from './index';
18-
import {MAT_CHECKBOX_DEFAULT_OPTIONS} from '@angular/material/checkbox';
18+
import {MatCheckboxDefaultOptions, MAT_CHECKBOX_DEFAULT_OPTIONS} from '@angular/material/checkbox';
1919

2020

2121
describe('MDC-based MatCheckbox', () => {
@@ -992,45 +992,43 @@ describe('MDC-based MatCheckbox', () => {
992992

993993
describe('MatCheckboxDefaultOptions', () => {
994994
describe('when MAT_CHECKBOX_DEFAULT_OPTIONS overridden', () => {
995-
beforeEach(() => {
995+
function configure(defaults: MatCheckboxDefaultOptions) {
996996
TestBed.configureTestingModule({
997997
imports: [MatCheckboxModule, FormsModule],
998998
declarations: [SingleCheckbox, SingleCheckbox],
999-
providers: [{
1000-
provide: MAT_CHECKBOX_DEFAULT_OPTIONS,
1001-
useValue: {color: 'primary'},
1002-
}],
999+
providers: [{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: defaults}]
10031000
});
10041001

10051002
TestBed.compileComponents();
1006-
});
1003+
}
10071004

10081005
it('should override default color in component', () => {
1009-
const fixture: ComponentFixture<SingleCheckbox> =
1010-
TestBed.createComponent(SingleCheckbox);
1006+
configure({color: 'primary'});
1007+
const fixture: ComponentFixture<SingleCheckbox> = TestBed.createComponent(SingleCheckbox);
10111008
fixture.detectChanges();
1012-
const checkboxDebugElement: DebugElement =
1013-
fixture.debugElement.query(By.directive(MatCheckbox))!;
1014-
expect(
1015-
checkboxDebugElement.nativeElement.classList
1016-
).toContain('mat-primary');
1009+
const checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!;
1010+
expect(checkboxDebugElement.nativeElement.classList).toContain('mat-primary');
10171011
});
10181012

10191013
it('should not override explicit input bindings', () => {
1020-
const fixture: ComponentFixture<SingleCheckbox> =
1021-
TestBed.createComponent(SingleCheckbox);
1014+
configure({color: 'primary'});
1015+
const fixture: ComponentFixture<SingleCheckbox> = TestBed.createComponent(SingleCheckbox);
10221016
fixture.componentInstance.checkboxColor = 'warn';
10231017
fixture.detectChanges();
1024-
const checkboxDebugElement: DebugElement =
1025-
fixture.debugElement.query(By.directive(MatCheckbox))!;
1026-
expect(
1027-
checkboxDebugElement.nativeElement.classList
1028-
).not.toContain('mat-primary');
1029-
expect(
1030-
checkboxDebugElement.nativeElement.classList
1031-
).toContain('mat-warn');
1018+
const checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!;
1019+
expect(checkboxDebugElement.nativeElement.classList).not.toContain('mat-primary');
1020+
expect(checkboxDebugElement.nativeElement.classList).toContain('mat-warn');
10321021
expect(checkboxDebugElement.nativeElement.classList).toContain('mat-warn');
10331022
});
1023+
1024+
it('should default to accent if config does not specify color', () => {
1025+
configure({clickAction: 'noop'});
1026+
const fixture: ComponentFixture<SingleCheckbox> = TestBed.createComponent(SingleCheckbox);
1027+
fixture.componentInstance.checkboxColor = undefined;
1028+
fixture.detectChanges();
1029+
const checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!;
1030+
expect(checkboxDebugElement.nativeElement.classList).toContain('mat-accent');
1031+
});
10341032
});
10351033
});
10361034

‎src/material-experimental/mdc-checkbox/checkbox.ts

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import {
2727
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
2828
import {
2929
MAT_CHECKBOX_DEFAULT_OPTIONS,
30-
MatCheckboxDefaultOptions
30+
MatCheckboxDefaultOptions, MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY
3131
} from '@angular/material/checkbox';
3232
import {
3333
ThemePalette,
@@ -46,6 +46,9 @@ import {numbers} from '@material/ripple';
4646

4747
let nextUniqueId = 0;
4848

49+
// Default checkbox configuration.
50+
const defaults = MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY();
51+
4952
export const MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR: any = {
5053
provide: NG_VALUE_ACCESSOR,
5154
useExisting: forwardRef(() => MatCheckbox),
@@ -110,7 +113,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements AfterViewInit,
110113
@Input('aria-describedby') ariaDescribedby: string;
111114

112115
/** The color palette for this checkbox ('primary', 'accent', or 'warn'). */
113-
@Input() color: ThemePalette = 'accent';
116+
@Input() color: ThemePalette;
114117

115118
/** Whether the label should appear after or before the checkbox. Defaults to 'after'. */
116119
@Input() labelPosition: 'before'|'after' = 'after';
@@ -258,12 +261,8 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements AfterViewInit,
258261
// ripple, which we do ourselves instead.
259262
this.tabIndex = parseInt(tabIndex) || 0;
260263
this._checkboxFoundation = new MDCCheckboxFoundation(this._checkboxAdapter);
261-
262-
this._options = this._options || {};
263-
264-
if (this._options.color) {
265-
this.color = this.defaultColor = this._options.color;
266-
}
264+
this._options = this._options || defaults;
265+
this.color = this.defaultColor = this._options!.color || defaults.color;
267266
}
268267

269268
ngAfterViewInit() {

‎src/material/checkbox/checkbox.spec.ts

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
} from './index';
1818
import {MutationObserverFactory} from '@angular/cdk/observers';
1919
import {ThemePalette} from '@angular/material/core';
20+
import {MatCheckboxDefaultOptions} from './checkbox-config';
2021

2122

2223
describe('MatCheckbox', () => {
@@ -1201,45 +1202,42 @@ describe('MatCheckbox', () => {
12011202

12021203
describe('MatCheckboxDefaultOptions', () => {
12031204
describe('when MAT_CHECKBOX_DEFAULT_OPTIONS overridden', () => {
1204-
beforeEach(() => {
1205+
function configure(defaults: MatCheckboxDefaultOptions) {
12051206
TestBed.configureTestingModule({
12061207
imports: [MatCheckboxModule, FormsModule],
12071208
declarations: [SingleCheckbox, SimpleCheckbox],
1208-
providers: [{
1209-
provide: MAT_CHECKBOX_DEFAULT_OPTIONS,
1210-
useValue: {color: 'primary'},
1211-
}],
1209+
providers: [{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: defaults}]
12121210
});
12131211

12141212
TestBed.compileComponents();
1215-
});
1213+
}
12161214

12171215
it('should override default color in component', () => {
1218-
const fixture: ComponentFixture<SimpleCheckbox> =
1219-
TestBed.createComponent(SimpleCheckbox);
1220-
fixture.detectChanges();
1221-
const checkboxDebugElement: DebugElement =
1222-
fixture.debugElement.query(By.directive(MatCheckbox))!;
1223-
expect(
1224-
checkboxDebugElement.nativeElement.classList
1225-
).toContain('mat-primary');
1216+
configure({color: 'primary'});
1217+
const fixture: ComponentFixture<SimpleCheckbox> = TestBed.createComponent(SimpleCheckbox);
1218+
fixture.detectChanges();
1219+
const checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!;
1220+
expect(checkboxDebugElement.nativeElement.classList).toContain('mat-primary');
12261221
});
12271222

12281223
it('should not override explicit input bindings', () => {
1229-
const fixture: ComponentFixture<SingleCheckbox> =
1230-
TestBed.createComponent(SingleCheckbox);
1224+
configure({color: 'primary'});
1225+
const fixture: ComponentFixture<SingleCheckbox> = TestBed.createComponent(SingleCheckbox);
12311226
fixture.componentInstance.checkboxColor = 'warn';
12321227
fixture.detectChanges();
1233-
const checkboxDebugElement: DebugElement =
1234-
fixture.debugElement.query(By.directive(MatCheckbox))!;
1235-
expect(
1236-
checkboxDebugElement.nativeElement.classList
1237-
).not.toContain('mat-primary');
1238-
expect(
1239-
checkboxDebugElement.nativeElement.classList
1240-
).toContain('mat-warn');
1228+
const checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!;
1229+
expect(checkboxDebugElement.nativeElement.classList).not.toContain('mat-primary');
1230+
expect(checkboxDebugElement.nativeElement.classList).toContain('mat-warn');
12411231
expect(checkboxDebugElement.nativeElement.classList).toContain('mat-warn');
12421232
});
1233+
1234+
it('should default to accent if config does not specify color', () => {
1235+
configure({clickAction: 'noop'});
1236+
const fixture: ComponentFixture<SimpleCheckbox> = TestBed.createComponent(SimpleCheckbox);
1237+
fixture.detectChanges();
1238+
const checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!;
1239+
expect(checkboxDebugElement.nativeElement.classList).toContain('mat-accent');
1240+
});
12431241
});
12441242
});
12451243

‎src/material/checkbox/checkbox.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,17 @@ import {
4646
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
4747
import {
4848
MAT_CHECKBOX_DEFAULT_OPTIONS,
49-
MatCheckboxDefaultOptions
49+
MatCheckboxDefaultOptions,
50+
MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY,
5051
} from './checkbox-config';
5152

5253

5354
// Increasing integer for generating unique ids for checkbox components.
5455
let nextUniqueId = 0;
5556

57+
// Default checkbox configuration.
58+
const defaults = MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY();
59+
5660
/**
5761
* Provider Expression that allows mat-checkbox to register as a ControlValueAccessor.
5862
* This allows it to support [(ngModel)].
@@ -204,12 +208,8 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
204208
@Optional() @Inject(MAT_CHECKBOX_DEFAULT_OPTIONS)
205209
private _options?: MatCheckboxDefaultOptions) {
206210
super(elementRef);
207-
this._options = this._options || {};
208-
209-
if (this._options.color) {
210-
this.color = this.defaultColor = this._options.color;
211-
}
212-
211+
this._options = this._options || defaults;
212+
this.color = this.defaultColor = this._options.color || defaults.color;
213213
this.tabIndex = parseInt(tabIndex) || 0;
214214
}
215215

0 commit comments

Comments
 (0)