Skip to content

Commit cb9875b

Browse files
crisbetocrisbeto
committed
fix(material/checkbox): no color assigned if defaults don't have a color
Fixes an issue where a `mat-checkbox` wouldn't have a `color`, if the `MAT_CHECKBOX_DEFAULT_OPTIONS` was provided without one. Fixes #21031.
1 parent 7f63750 commit cb9875b

4 files changed

Lines changed: 58 additions & 63 deletions

File tree

‎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', () => {
@@ -1216,45 +1217,42 @@ describe('MatCheckbox', () => {
12161217

12171218
describe('MatCheckboxDefaultOptions', () => {
12181219
describe('when MAT_CHECKBOX_DEFAULT_OPTIONS overridden', () => {
1219-
beforeEach(() => {
1220+
function configure(defaults: MatCheckboxDefaultOptions) {
12201221
TestBed.configureTestingModule({
12211222
imports: [MatCheckboxModule, FormsModule],
12221223
declarations: [SingleCheckbox, SimpleCheckbox],
1223-
providers: [{
1224-
provide: MAT_CHECKBOX_DEFAULT_OPTIONS,
1225-
useValue: {color: 'primary'},
1226-
}],
1224+
providers: [{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: defaults}]
12271225
});
12281226

12291227
TestBed.compileComponents();
1230-
});
1228+
}
12311229

12321230
it('should override default color in component', () => {
1233-
const fixture: ComponentFixture<SimpleCheckbox> =
1234-
TestBed.createComponent(SimpleCheckbox);
1235-
fixture.detectChanges();
1236-
const checkboxDebugElement: DebugElement =
1237-
fixture.debugElement.query(By.directive(MatCheckbox))!;
1238-
expect(
1239-
checkboxDebugElement.nativeElement.classList
1240-
).toContain('mat-primary');
1231+
configure({color: 'primary'});
1232+
const fixture: ComponentFixture<SimpleCheckbox> = TestBed.createComponent(SimpleCheckbox);
1233+
fixture.detectChanges();
1234+
const checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!;
1235+
expect(checkboxDebugElement.nativeElement.classList).toContain('mat-primary');
12411236
});
12421237

12431238
it('should not override explicit input bindings', () => {
1244-
const fixture: ComponentFixture<SingleCheckbox> =
1245-
TestBed.createComponent(SingleCheckbox);
1239+
configure({color: 'primary'});
1240+
const fixture: ComponentFixture<SingleCheckbox> = TestBed.createComponent(SingleCheckbox);
12461241
fixture.componentInstance.checkboxColor = 'warn';
12471242
fixture.detectChanges();
1248-
const checkboxDebugElement: DebugElement =
1249-
fixture.debugElement.query(By.directive(MatCheckbox))!;
1250-
expect(
1251-
checkboxDebugElement.nativeElement.classList
1252-
).not.toContain('mat-primary');
1253-
expect(
1254-
checkboxDebugElement.nativeElement.classList
1255-
).toContain('mat-warn');
1243+
const checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!;
1244+
expect(checkboxDebugElement.nativeElement.classList).not.toContain('mat-primary');
1245+
expect(checkboxDebugElement.nativeElement.classList).toContain('mat-warn');
12561246
expect(checkboxDebugElement.nativeElement.classList).toContain('mat-warn');
12571247
});
1248+
1249+
it('should default to accent if config does not specify color', () => {
1250+
configure({clickAction: 'noop'});
1251+
const fixture: ComponentFixture<SimpleCheckbox> = TestBed.createComponent(SimpleCheckbox);
1252+
fixture.detectChanges();
1253+
const checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!;
1254+
expect(checkboxDebugElement.nativeElement.classList).toContain('mat-accent');
1255+
});
12581256
});
12591257
});
12601258

‎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)