From 17f66d693abb6ddefc1e5aa41a65dd2ff0060c3c Mon Sep 17 00:00:00 2001 From: Annie Wang Date: Tue, 9 Mar 2021 06:36:26 -0800 Subject: [PATCH] feat(material-experimental/mdc-button): add default config for FAB (#22102) --- .../mdc-button/button.spec.ts | 31 +++++++++- src/material-experimental/mdc-button/fab.ts | 57 +++++++++++++------ 2 files changed, 71 insertions(+), 17 deletions(-) diff --git a/src/material-experimental/mdc-button/button.spec.ts b/src/material-experimental/mdc-button/button.spec.ts index 7a4e008000d9..a8ed0da67fc7 100644 --- a/src/material-experimental/mdc-button/button.spec.ts +++ b/src/material-experimental/mdc-button/button.spec.ts @@ -1,7 +1,7 @@ import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing'; import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {MatButtonModule, MatButton} from './index'; +import {MatButtonModule, MatButton, MatFabDefaultOptions, MAT_FAB_DEFAULT_OPTIONS} from './index'; import {MatRipple, ThemePalette} from '@angular/material-experimental/mdc-core'; @@ -284,6 +284,35 @@ describe('MDC-based MatButton', () => { }); }); +describe('MatFabDefaultOptions', () => { + function configure(defaults: MatFabDefaultOptions) { + TestBed.configureTestingModule({ + imports: [MatButtonModule], + declarations: [TestApp], + providers: [{provide: MAT_FAB_DEFAULT_OPTIONS, useValue: defaults}] + }); + + TestBed.compileComponents(); + } + + it('should override default color in component', () => { + configure({color: 'primary'}); + const fixture: ComponentFixture = TestBed.createComponent(TestApp); + fixture.detectChanges(); + const fabButtonDebugEl = fixture.debugElement.query(By.css('button[mat-fab]'))!; + expect(fabButtonDebugEl.nativeElement.classList).toContain('mat-primary'); + }); + + it('should default to accent if config does not specify color', () => { + configure({}); + const fixture: ComponentFixture = TestBed.createComponent(TestApp); + fixture.detectChanges(); + const fabButtonDebugEl = fixture.debugElement.query(By.css('button[mat-fab]'))!; + expect(fabButtonDebugEl.nativeElement.classList).toContain('mat-accent'); + }); +}); + + /** Test component that contains an MatButton. */ @Component({ selector: 'test-app', diff --git a/src/material-experimental/mdc-button/fab.ts b/src/material-experimental/mdc-button/fab.ts index 6e192f7b8da6..8203da57549d 100644 --- a/src/material-experimental/mdc-button/fab.ts +++ b/src/material-experimental/mdc-button/fab.ts @@ -12,6 +12,7 @@ import { Component, ElementRef, Inject, + InjectionToken, NgZone, Optional, ViewEncapsulation @@ -29,6 +30,30 @@ import { import {ThemePalette} from '@angular/material-experimental/mdc-core'; import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion'; + +/** Default FAB options that can be overridden. */ +export interface MatFabDefaultOptions { + color?: ThemePalette; +} + +/** Injection token to be used to override the default options for FAB. */ +export const MAT_FAB_DEFAULT_OPTIONS = + new InjectionToken('mat-mdc-fab-default-options', { + providedIn: 'root', + factory: MAT_FAB_DEFAULT_OPTIONS_FACTORY + }); + +/** @docs-private */ +export function MAT_FAB_DEFAULT_OPTIONS_FACTORY(): MatFabDefaultOptions { + return { + // The FAB by default has its color set to accent. + color: 'accent', + }; +} + +// Default FAB configuration. +const defaults = MAT_FAB_DEFAULT_OPTIONS_FACTORY(); + /** * Material Design floating action button (FAB) component. These buttons represent the primary * or most common action for users to interact with. @@ -60,9 +85,6 @@ import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class MatFabButton extends MatButtonBase { - // The FAB by default has its color set to accent. - color = 'accent' as ThemePalette; - _isFab = true; private _extended: boolean; @@ -71,8 +93,11 @@ export class MatFabButton extends MatButtonBase { constructor( elementRef: ElementRef, platform: Platform, ngZone: NgZone, - @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) { + @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string, + @Optional() @Inject(MAT_FAB_DEFAULT_OPTIONS) private _options?: MatFabDefaultOptions) { super(elementRef, platform, ngZone, animationMode); + this._options = this._options || defaults; + this.color = this.defaultColor = this._options!.color || defaults.color; } static ngAcceptInputType_extended: BooleanInput; @@ -94,15 +119,15 @@ export class MatFabButton extends MatButtonBase { changeDetection: ChangeDetectionStrategy.OnPush, }) export class MatMiniFabButton extends MatButtonBase { - // The FAB by default has its color set to accent. - color = 'accent' as ThemePalette; - _isFab = true; constructor( elementRef: ElementRef, platform: Platform, ngZone: NgZone, - @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) { + @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string, + @Optional() @Inject(MAT_FAB_DEFAULT_OPTIONS) private _options?: MatFabDefaultOptions) { super(elementRef, platform, ngZone, animationMode); + this._options = this._options || defaults; + this.color = this.defaultColor = this._options!.color || defaults.color; } } @@ -144,9 +169,6 @@ export class MatMiniFabButton extends MatButtonBase { changeDetection: ChangeDetectionStrategy.OnPush, }) export class MatFabAnchor extends MatAnchor { - // The FAB by default has its color set to accent. - color = 'accent' as ThemePalette; - _isFab = true; private _extended: boolean; @@ -156,8 +178,11 @@ export class MatFabAnchor extends MatAnchor { constructor( elementRef: ElementRef, platform: Platform, ngZone: NgZone, - @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) { + @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string, + @Optional() @Inject(MAT_FAB_DEFAULT_OPTIONS) private _options?: MatFabDefaultOptions) { super(elementRef, platform, ngZone, animationMode); + this._options = this._options || defaults; + this.color = this.defaultColor = this._options!.color || defaults.color; } static ngAcceptInputType_extended: BooleanInput; @@ -179,14 +204,14 @@ export class MatFabAnchor extends MatAnchor { changeDetection: ChangeDetectionStrategy.OnPush, }) export class MatMiniFabAnchor extends MatAnchor { - // The FAB by default has its color set to accent. - color = 'accent' as ThemePalette; - _isFab = true; constructor( elementRef: ElementRef, platform: Platform, ngZone: NgZone, - @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) { + @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string, + @Optional() @Inject(MAT_FAB_DEFAULT_OPTIONS) private _options?: MatFabDefaultOptions) { super(elementRef, platform, ngZone, animationMode); + this._options = this._options || defaults; + this.color = this.defaultColor = this._options!.color || defaults.color; } }