Skip to content

Revert "feat(checkbox): add options defaults config" #17549

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

Closed
wants to merge 1 commit into from
Closed

Revert "feat(checkbox): add options defaults config" #17549

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: 0 additions & 1 deletion src/material/checkbox/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,6 @@ 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: 0 additions & 23 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,28 +6,7 @@
* 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 @@ -40,8 +19,6 @@ 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: 4 additions & 92 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,15 +9,9 @@ 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 {
MAT_CHECKBOX_DEFAULT_OPTIONS,
MatCheckbox,
MatCheckboxChange,
MatCheckboxModule
} from './index';
import {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 @@ -539,47 +533,14 @@ 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_DEFAULT_OPTIONS, useValue: {clickAction: 'check'}}
{provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'check'}
]
});

Expand Down Expand Up @@ -616,7 +577,7 @@ describe('MatCheckbox', () => {
imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule],
declarations: [SingleCheckbox],
providers: [
{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'noop'}}
{provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop'}
]
});

Expand Down Expand Up @@ -1194,50 +1155,6 @@ 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 @@ -1268,7 +1185,7 @@ class SingleCheckbox {
parentElementClicked: boolean = false;
parentElementKeyedUp: boolean = false;
checkboxId: string | null = 'simple-check';
checkboxColor: ThemePalette = 'primary';
checkboxColor: string = 'primary';
checkboxValue: string = 'single_checkbox';

onCheckboxClick: (event?: Event) => void = () => {};
Expand Down Expand Up @@ -1389,8 +1306,3 @@ 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: 5 additions & 25 deletions src/material/checkbox/checkbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,9 @@
* found in the LICENSE file at https://angular.io/license
*/

import {FocusableOption, FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
import {FocusMonitor, FocusableOption, FocusOrigin} from '@angular/cdk/a11y';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {
AfterViewChecked,
Attribute,
ChangeDetectionStrategy,
ChangeDetectorRef,
Expand All @@ -25,6 +24,7 @@ import {
Output,
ViewChild,
ViewEncapsulation,
AfterViewChecked,
} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
import {
Expand All @@ -43,12 +43,7 @@ import {
mixinTabIndex,
} from '@angular/material/core';
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
import {
MAT_CHECKBOX_CLICK_ACTION,
MAT_CHECKBOX_DEFAULT_OPTIONS,
MatCheckboxClickAction,
MatCheckboxDefaultOptions
} from './checkbox-config';
import {MAT_CHECKBOX_CLICK_ACTION, MatCheckboxClickAction} from './checkbox-config';


// Increasing integer for generating unique ids for checkbox components.
Expand Down Expand Up @@ -99,7 +94,7 @@ const _MatCheckboxMixinBase:
CanDisableRippleCtor &
CanDisableCtor &
typeof MatCheckboxBase =
mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatCheckboxBase))));
mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatCheckboxBase)), 'accent'));


/**
Expand Down Expand Up @@ -199,22 +194,10 @@ 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(MAT_CHECKBOX_DEFAULT_OPTIONS)
private _options?: MatCheckboxDefaultOptions) {
@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
super(elementRef);
this._options = this._options || {};

if (this._options.color) {
this.color = this._options.color;
}

this.tabIndex = parseInt(tabIndex) || 0;

Expand All @@ -231,9 +214,6 @@ 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.
Expand Down
12 changes: 1 addition & 11 deletions 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,10 +5,6 @@ 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 @@ -29,8 +25,7 @@ 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, _options?: MatCheckboxDefaultOptions | undefined);
constructor(elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _focusMonitor: FocusMonitor, _ngZone: NgZone, tabIndex: string, _clickAction: MatCheckboxClickAction, _animationMode?: string | undefined);
_getAriaChecked(): 'true' | 'false' | 'mixed';
_isRippleDisabled(): any;
_onInputClick(event: Event): void;
Expand All @@ -53,11 +48,6 @@ 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