refactor(button): use color binding for fab button color (#4694)

* refactor(button): use color binding for fab button color

* No longer creates extra CSS selectors to set the default color for round buttons to `accent`.

* Server-side rendering improvements

* Use forwardRef for constructor DI

Author: devversion

src/lib/button/_button-theme.scss

@@ -104,18 +104,6 @@
   .mat-icon-button {
     @include _mat-button-ripple-color($theme, default);
   }
-
-  // TODO(devversion): The color class accent should be just set from TS code. No need for this.
-  .mat-fab, .mat-mini-fab {
-    background-color: mat-color($accent);
-    color: mat-color($accent, default-contrast);
-
-    // Button fab elements are using the accent palette by default. The color classes won't
-    // be set on the element. To have a proper ripple color for those, we set the ripple color.
-    .mat-ripple-element {
-      background-color: mat-color($accent, default-contrast, 0.2);
-    }
-  }
 }
 
 @mixin mat-button-typography($config) {

src/lib/button/button.spec.ts

@@ -67,6 +67,30 @@ describe('MdButton', () => {
     expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
   });
 
+  describe('button[md-fab]', () => {
+    it('should have accent palette by default', () => {
+      const fixture = TestBed.createComponent(TestApp);
+      const fabButtonDebugEl = fixture.debugElement.query(By.css('button[md-fab]'));
+
+      fixture.detectChanges();
+
+      expect(fabButtonDebugEl.nativeElement.classList)
+        .toContain('mat-accent', 'Expected fab buttons to use accent palette by default');
+    });
+  });
+
+  describe('button[md-mini-fab]', () => {
+    it('should have accent palette by default', () => {
+      const fixture = TestBed.createComponent(TestApp);
+      const miniFabButtonDebugEl = fixture.debugElement.query(By.css('button[md-mini-fab]'));
+
+      fixture.detectChanges();
+
+      expect(miniFabButtonDebugEl.nativeElement.classList)
+        .toContain('mat-accent', 'Expected mini-fab buttons to use accent palette by default');
+    });
+  });
+
   // Regular button tests
   describe('button[md-button]', () => {
     it('should handle a click on the button', () => {
@@ -223,6 +247,8 @@ describe('MdButton', () => {
       Go
     </button>
     <a href="http://www.google.com" md-button [disabled]="isDisabled" [color]="buttonColor">Link</a>
+    <button md-fab>Fab Button</button>
+    <button md-mini-fab>Mini Fab Button</button>
   `
 })
 class TestApp {

src/lib/button/button.ts

@@ -3,11 +3,15 @@ import {
   Component,
   Directive,
   ElementRef,
+  forwardRef,
   HostBinding,
   Input,
   OnDestroy,
+  Optional,
   Renderer2,
-  ViewEncapsulation
+  Self,
+  ViewEncapsulation,
+  Inject
 } from '@angular/core';
 import {coerceBooleanProperty, FocusOriginMonitor, Platform} from '../core';
 import {mixinDisabled, CanDisable} from '../core/common-behaviors/disabled';
@@ -16,6 +20,9 @@ import {CanColor, mixinColor} from '../core/common-behaviors/color';
 
 // TODO(kara): Convert attribute selectors to classes when attr maps become available
 
+/** Default color palette for round buttons (md-fab and md-mini-fab) */
+const DEFAULT_ROUND_BUTTON_COLOR = 'accent';
+
 
 /**
  * Directive whose purpose is to add the mat- CSS styling to this selector.
@@ -58,17 +65,30 @@ export class MdIconButtonCssMatStyler {}
   selector: 'button[md-fab], button[mat-fab], a[md-fab], a[mat-fab]',
   host: {'class': 'mat-fab'}
 })
-export class MdFabCssMatStyler {}
+export class MdFab {
+  constructor(@Self() @Optional() @Inject(forwardRef(() => MdButton)) button: MdButton,
+              @Self() @Optional() @Inject(forwardRef(() => MdAnchor)) anchor: MdAnchor) {
+    // Set the default color palette for the md-fab components.
+    (button || anchor).color = DEFAULT_ROUND_BUTTON_COLOR;
+  }
+}
 
 /**
- * Directive whose purpose is to add the mat- CSS styling to this selector.
+ * Directive that targets mini-fab buttons and anchors. It's used to apply the `mat-` class
+ * to all mini-fab buttons and also is responsible for setting the default color palette.
  * @docs-private
  */
 @Directive({
   selector: 'button[md-mini-fab], button[mat-mini-fab], a[md-mini-fab], a[mat-mini-fab]',
   host: {'class': 'mat-mini-fab'}
 })
-export class MdMiniFabCssMatStyler {}
+export class MdMiniFab {
+  constructor(@Self() @Optional() @Inject(forwardRef(() => MdButton)) button: MdButton,
+              @Self() @Optional() @Inject(forwardRef(() => MdAnchor)) anchor: MdAnchor) {
+    // Set the default color palette for the md-mini-fab components.
+    (button || anchor).color = DEFAULT_ROUND_BUTTON_COLOR;
+  }
+}
 
 
 // Boilerplate for applying mixins to MdButton.

src/lib/button/index.ts

@@ -4,10 +4,10 @@ import {MdCommonModule, MdRippleModule, StyleModule} from '../core';
 import {
   MdAnchor,
   MdButton,
+  MdMiniFab,
   MdButtonCssMatStyler,
-  MdFabCssMatStyler,
+  MdFab,
   MdIconButtonCssMatStyler,
-  MdMiniFabCssMatStyler,
   MdRaisedButtonCssMatStyler
 } from './button';
 
@@ -25,21 +25,21 @@ export * from './button';
   exports: [
     MdButton,
     MdAnchor,
+    MdMiniFab,
+    MdFab,
     MdCommonModule,
     MdButtonCssMatStyler,
     MdRaisedButtonCssMatStyler,
     MdIconButtonCssMatStyler,
-    MdFabCssMatStyler,
-    MdMiniFabCssMatStyler,
   ],
   declarations: [
     MdButton,
     MdAnchor,
+    MdMiniFab,
+    MdFab,
     MdButtonCssMatStyler,
     MdRaisedButtonCssMatStyler,
     MdIconButtonCssMatStyler,
-    MdFabCssMatStyler,
-    MdMiniFabCssMatStyler,
   ],
 })
 export class MdButtonModule {}