From e6958f1df51d9132f60b308c728a5412fec59e6a Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Wed, 3 Mar 2021 13:22:36 -0800
Subject: [PATCH] feat(material-experimental/mdc-button): add default config
 for FAB

---
 .../mdc-button/button.spec.ts                 | 30 ++++++++++++++++++-
 src/material-experimental/mdc-button/fab.ts   | 21 +++++++++++++
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/src/material-experimental/mdc-button/button.spec.ts b/src/material-experimental/mdc-button/button.spec.ts
index 7a4e008000d9..b933c754f2d6 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';
 
 
@@ -110,6 +110,34 @@ 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');
+    });
+  });
+
   // Regular button tests
   describe('button[mat-button]', () => {
     it('should handle a click on the button', () => {
diff --git a/src/material-experimental/mdc-button/fab.ts b/src/material-experimental/mdc-button/fab.ts
index 6e192f7b8da6..e28527dfc61e 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,26 @@ 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 {
+    color: 'accent',
+  };
+}
+
 /**
  * Material Design floating action button (FAB) component. These buttons represent the primary
  * or most common action for users to interact with.