feat(material-experimental/mdc-button): add default config for FAB (#…

…22102)
angular · Mar 9, 2021 · 17f66d6 · 17f66d6
1 parent 4aa48a1
commit 17f66d6
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 17 deletions.
diff --git 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<TestApp> = 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<TestApp> = 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
@@ -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<MatFabDefaultOptions>('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;
   }
 }