feat(checkbox): add options defaults config (#17473)

andrewseguin · mmalerba · commit 3fdab10bd580 · 2019-10-28T11:25:30.000-07:00
Follow-up PR will add the same default options to the MDC component.

BREAKING CHANGE: MAT_CHECKBOX_CLICK_ACTION is deprecated, use MAT_CHECKBOX_DEFAULT_OPTIONS
diff --git a/src/material/checkbox/BUILD.bazel b/src/material/checkbox/BUILD.bazel
@@ -61,6 +61,7 @@ ng_test_library(
         ":checkbox",
         "//src/cdk/observers",
         "//src/cdk/testing/private",
+        "//src/material/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
     ],
diff --git a/src/material/checkbox/checkbox-config.ts b/src/material/checkbox/checkbox-config.ts
@@ -6,7 +6,28 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {InjectionToken} from '@angular/core';
+import {ThemePalette} from '@angular/material/core';
 
+/** Default `mat-checkbox` options that can be overridden. */
+export interface MatCheckboxDefaultOptions {
+  color?: ThemePalette;
+  clickAction?: MatCheckboxClickAction;
+}
+
+/** Injection token to be used to override the default options for `mat-checkbox`. */
+export const MAT_CHECKBOX_DEFAULT_OPTIONS =
+    new InjectionToken<MatCheckboxDefaultOptions>('mat-checkbox-default-options', {
+      providedIn: 'root',
+      factory: MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY
+    });
+
+/** @docs-private */
+export function MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY(): MatCheckboxDefaultOptions {
+  return {
+    color: 'accent',
+    clickAction: 'check-indeterminate',
+  };
+}
 
 /**
  * Checkbox click action when user click on input element.
@@ -19,6 +40,8 @@ export type MatCheckboxClickAction = 'noop' | 'check' | 'check-indeterminate' |
 
 /**
  * Injection token that can be used to specify the checkbox click behavior.
+ * @deprecated Injection token will be removed, use `MAT_CHECKBOX_DEFAULT_OPTIONS` instead.
+ * @breaking-change 10.0.0
  */
 export const MAT_CHECKBOX_CLICK_ACTION =
     new InjectionToken<MatCheckboxClickAction>('mat-checkbox-click-action');
diff --git a/src/material/checkbox/checkbox.spec.ts b/src/material/checkbox/checkbox.spec.ts
@@ -9,9 +9,15 @@ import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/f
 import {Component, DebugElement, ViewChild, Type, ChangeDetectionStrategy} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {dispatchFakeEvent} from '@angular/cdk/testing/private';
-import {MatCheckbox, MatCheckboxChange, MatCheckboxModule} from './index';
+import {
+  MAT_CHECKBOX_DEFAULT_OPTIONS,
+  MatCheckbox,
+  MatCheckboxChange,
+  MatCheckboxModule
+} from './index';
 import {MAT_CHECKBOX_CLICK_ACTION} from './checkbox-config';
 import {MutationObserverFactory} from '@angular/cdk/observers';
+import {ThemePalette} from '@angular/material/core';
 
 
 describe('MatCheckbox', () => {
@@ -533,14 +539,47 @@ describe('MatCheckbox', () => {
       }));
     });
 
+    describe(`when MAT_CHECKBOX_CLICK_ACTION is set`, () => {
+      beforeEach(() => {
+        TestBed.resetTestingModule();
+        TestBed.configureTestingModule({
+          imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule],
+          declarations: [SingleCheckbox],
+          providers: [
+            {provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'check'},
+            {provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'noop'}}
+          ]
+        });
+
+        fixture = createComponent(SingleCheckbox);
+        fixture.detectChanges();
+
+        checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!;
+        checkboxNativeElement = checkboxDebugElement.nativeElement;
+        testComponent = fixture.debugElement.componentInstance;
+
+        inputElement = checkboxNativeElement.querySelector('input') as HTMLInputElement;
+      });
+
+      it('should override the value set in the default options', fakeAsync(() => {
+        testComponent.isIndeterminate = true;
+        inputElement.click();
+        fixture.detectChanges();
+        flush();
+
+        expect(inputElement.checked).toBe(true);
+        expect(inputElement.indeterminate).toBe(true);
+      }));
+    });
+
     describe(`when MAT_CHECKBOX_CLICK_ACTION is 'check'`, () => {
       beforeEach(() => {
         TestBed.resetTestingModule();
         TestBed.configureTestingModule({
           imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule],
           declarations: [SingleCheckbox],
           providers: [
-            {provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'check'}
+            {provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'check'}}
           ]
         });
 
@@ -577,7 +616,7 @@ describe('MatCheckbox', () => {
           imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule],
           declarations: [SingleCheckbox],
           providers: [
-            {provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop'}
+            {provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'noop'}}
           ]
         });
 
@@ -1155,6 +1194,50 @@ describe('MatCheckbox', () => {
   });
 });
 
+describe('MatCheckboxDefaultOptions', () => {
+  describe('when MAT_CHECKBOX_DEFAULT_OPTIONS overridden', () => {
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [MatCheckboxModule, FormsModule],
+        declarations: [SingleCheckbox, SimpleCheckbox],
+        providers: [{
+          provide: MAT_CHECKBOX_DEFAULT_OPTIONS,
+          useValue: {color: 'primary'},
+        }],
+      });
+
+      TestBed.compileComponents();
+    });
+
+    it('should override default color in Component', () => {
+      const fixture: ComponentFixture<SimpleCheckbox> =
+          TestBed.createComponent(SimpleCheckbox);
+      fixture.detectChanges();
+      const checkboxDebugElement: DebugElement =
+          fixture.debugElement.query(By.directive(MatCheckbox))!;
+      expect(
+          checkboxDebugElement.nativeElement.classList
+      ).toContain('mat-primary');
+    });
+
+    it('should not override explicit input bindings', () => {
+      const fixture: ComponentFixture<SingleCheckbox> =
+          TestBed.createComponent(SingleCheckbox);
+      fixture.componentInstance.checkboxColor = 'warn';
+      fixture.detectChanges();
+      const checkboxDebugElement: DebugElement =
+          fixture.debugElement.query(By.directive(MatCheckbox))!;
+      expect(
+          checkboxDebugElement.nativeElement.classList
+      ).not.toContain('mat-primary');
+      expect(
+          checkboxDebugElement.nativeElement.classList
+      ).toContain('mat-warn');
+      expect(checkboxDebugElement.nativeElement.classList).toContain('mat-warn');
+    });
+  });
+});
+
 /** Simple component for testing a single checkbox. */
 @Component({
   template: `
@@ -1185,7 +1268,7 @@ class SingleCheckbox {
   parentElementClicked: boolean = false;
   parentElementKeyedUp: boolean = false;
   checkboxId: string | null = 'simple-check';
-  checkboxColor: string = 'primary';
+  checkboxColor: ThemePalette = 'primary';
   checkboxValue: string = 'single_checkbox';
 
   onCheckboxClick: (event?: Event) => void = () => {};
@@ -1306,3 +1389,8 @@ class CheckboxWithProjectedLabel {}
 class TextBindingComponent {
   text: string = 'Some text';
 }
+
+/** Test component with a simple checkbox with no inputs. */
+@Component({template: `<mat-checkbox></mat-checkbox>`})
+class SimpleCheckbox {
+}
diff --git a/src/material/checkbox/checkbox.ts b/src/material/checkbox/checkbox.ts
@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {FocusMonitor, FocusableOption, FocusOrigin} from '@angular/cdk/a11y';
+import {FocusableOption, FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {
+  AfterViewChecked,
   Attribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -24,7 +25,6 @@ import {
   Output,
   ViewChild,
   ViewEncapsulation,
-  AfterViewChecked,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {
@@ -43,7 +43,12 @@ import {
   mixinTabIndex,
 } from '@angular/material/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
-import {MAT_CHECKBOX_CLICK_ACTION, MatCheckboxClickAction} from './checkbox-config';
+import {
+  MAT_CHECKBOX_CLICK_ACTION,
+  MAT_CHECKBOX_DEFAULT_OPTIONS,
+  MatCheckboxClickAction,
+  MatCheckboxDefaultOptions
+} from './checkbox-config';
 
 
 // Increasing integer for generating unique ids for checkbox components.
@@ -94,7 +99,7 @@ const _MatCheckboxMixinBase:
     CanDisableRippleCtor &
     CanDisableCtor &
     typeof MatCheckboxBase =
-        mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatCheckboxBase)), 'accent'));
+        mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatCheckboxBase))));
 
 
 /**
@@ -194,10 +199,22 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
               private _focusMonitor: FocusMonitor,
               private _ngZone: NgZone,
               @Attribute('tabindex') tabIndex: string,
+              /**
+               * @deprecated `_clickAction` parameter to be removed, use
+               * `MAT_CHECKBOX_DEFAULT_OPTIONS`
+               * @breaking-change 10.0.0
+               */
               @Optional() @Inject(MAT_CHECKBOX_CLICK_ACTION)
                   private _clickAction: MatCheckboxClickAction,
-              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
+              @Optional() @Inject(MAT_CHECKBOX_DEFAULT_OPTIONS)
+                  private _options?: MatCheckboxDefaultOptions) {
     super(elementRef);
+    this._options = this._options || {};
+
+    if (this._options.color) {
+      this.color = this._options.color;
+    }
 
     this.tabIndex = parseInt(tabIndex) || 0;
 
@@ -214,6 +231,9 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
         });
       }
     });
+
+    // TODO: Remove this after the `_clickAction` parameter is removed as an injection parameter.
+    this._clickAction = this._clickAction || this._options.clickAction;
   }
 
   // TODO: Delete next major revision.
diff --git a/tools/public_api_guard/material/checkbox.d.ts b/tools/public_api_guard/material/checkbox.d.ts
@@ -5,6 +5,10 @@ export declare const MAT_CHECKBOX_CLICK_ACTION: InjectionToken<MatCheckboxClickA
 
 export declare const MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR: any;
 
+export declare const MAT_CHECKBOX_DEFAULT_OPTIONS: InjectionToken<MatCheckboxDefaultOptions>;
+
+export declare function MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY(): MatCheckboxDefaultOptions;
+
 export declare const MAT_CHECKBOX_REQUIRED_VALIDATOR: Provider;
 
 export declare class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor, AfterViewChecked, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple, FocusableOption {
@@ -25,7 +29,8 @@ export declare class MatCheckbox extends _MatCheckboxMixinBase implements Contro
     required: boolean;
     ripple: MatRipple;
     value: string;
-    constructor(elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _focusMonitor: FocusMonitor, _ngZone: NgZone, tabIndex: string, _clickAction: MatCheckboxClickAction, _animationMode?: string | undefined);
+    constructor(elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _focusMonitor: FocusMonitor, _ngZone: NgZone, tabIndex: string,
+    _clickAction: MatCheckboxClickAction, _animationMode?: string | undefined, _options?: MatCheckboxDefaultOptions | undefined);
     _getAriaChecked(): 'true' | 'false' | 'mixed';
     _isRippleDisabled(): any;
     _onInputClick(event: Event): void;
@@ -48,6 +53,11 @@ export declare class MatCheckboxChange {
 
 export declare type MatCheckboxClickAction = 'noop' | 'check' | 'check-indeterminate' | undefined;
 
+export interface MatCheckboxDefaultOptions {
+    clickAction?: MatCheckboxClickAction;
+    color?: ThemePalette;
+}
+
 export declare class MatCheckboxModule {
 }
 
