Skip to content

feat(checkbox): add options defaults config #17473

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 28, 2019
Merged

feat(checkbox): add options defaults config #17473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/material/checkbox/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
],
Expand Down
23 changes: 23 additions & 0 deletions src/material/checkbox/checkbox-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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');
96 changes: 92 additions & 4 deletions src/material/checkbox/checkbox.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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'}}
]
});

Expand Down Expand Up @@ -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'}}
]
});

Expand Down Expand Up @@ -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: `
Expand Down Expand Up @@ -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 = () => {};
Expand Down Expand Up @@ -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 {
}
30 changes: 25 additions & 5 deletions src/material/checkbox/checkbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -24,7 +25,6 @@ import {
Output,
ViewChild,
ViewEncapsulation,
AfterViewChecked,
} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
import {
Expand All @@ -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.
Expand Down Expand Up @@ -94,7 +99,7 @@ const _MatCheckboxMixinBase:
CanDisableRippleCtor &
CanDisableCtor &
typeof MatCheckboxBase =
mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatCheckboxBase)), 'accent'));
mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatCheckboxBase))));


/**
Expand Down Expand Up @@ -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;

Expand All @@ -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;
Copy link
Member

@jelbourn jelbourn Oct 24, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since clickAction is deprecated, I think options.clickAction should take precedence

Copy link
Contributor Author

@andrewseguin andrewseguin Oct 24, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Discussed in person - I think the way it is captures the most common use cases, especially since the options object is provided in root and always defined, so it's not easy to tell if the user is switched to it

}

// TODO: Delete next major revision.
Expand Down
12 changes: 11 additions & 1 deletion tools/public_api_guard/material/checkbox.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -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 {
}

Expand Down