Server-side rendering improvements

Author: devversion

src/lib/button/button.spec.ts

@@ -62,6 +62,30 @@ describe('MdButton', () => {
 
   });
 
+  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', () => {
@@ -218,6 +242,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

@@ -6,7 +6,9 @@ import {
   HostBinding,
   Input,
   OnDestroy,
+  Optional,
   Renderer2,
+  Self,
   ViewEncapsulation
 } from '@angular/core';
 import {coerceBooleanProperty, FocusOriginMonitor, Platform} from '../core';
@@ -15,6 +17,9 @@ import {mixinDisabled, CanDisable} from '../core/common-behaviors/disabled';
 
 // 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.
@@ -57,17 +62,28 @@ 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() button: MdButton, @Self() @Optional() 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() button: MdButton, @Self() @Optional() 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.
@@ -117,10 +133,6 @@ export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisabl
       private _focusOriginMonitor: FocusOriginMonitor) {
     super();
     this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
-
-    if (this._isRoundButton) {
-      this.color = 'accent';
-    }
   }
 
   ngOnDestroy() {

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 {}