feat(material-experimental/mdc-button): add extended fab

Author: annieyw

src/dev-app/mdc-button/mdc-button-demo.html

@@ -37,6 +37,11 @@ <h4 class="demo-section-header">Anchors</h4>
     <a href="//www.google.com" mat-mini-fab>
       <mat-icon>check</mat-icon>
     </a>
+    <a href="//www.google.com" mat-fab [extended]="true">Search</a>
+    <a href="//www.google.com" mat-fab [extended]="true">
+      <mat-icon>check</mat-icon>
+      Search
+    </a>
   </section>
   <section>
     <a href="//www.google.com" disabled mat-button color="primary">SEARCH</a>
@@ -49,6 +54,11 @@ <h4 class="demo-section-header">Anchors</h4>
     <a href="//www.google.com" disabled mat-mini-fab>
       <mat-icon>check</mat-icon>
     </a>
+    <a href="//www.google.com" disabled mat-fab [extended]="true">Search</a>
+    <a href="//www.google.com" disabled mat-fab [extended]="true">
+      <mat-icon>check</mat-icon>
+      Search
+    </a>
   </section>
 
   <h4 class="demo-section-header">Text Buttons [mat-button]</h4>
@@ -145,6 +155,18 @@ <h4 class="demo-section-header">Fab Buttons [mat-fab]</h4>
     </button>
   </section>
 
+  <h4 class="demo-section-header">Extended Fab Buttons</h4>
+  <section>
+    <button mat-fab [extended]="true">Extended</button>
+    <button mat-fab [extended]="true" color="primary">Extended</button>
+    <button mat-fab [extended]="true" color="accent">Extended</button>
+    <button mat-fab [extended]="true" color="warn">Extended</button>
+    <button mat-fab [extended]="true">
+      <mat-icon>home</mat-icon>
+      Extended
+    </button>
+  </section>
+
   <h4 class="demo-section-header"> Mini Fab Buttons [mat-mini-fab]</h4>
   <section>
     <button mat-mini-fab>

src/material-experimental/mdc-button/button.spec.ts

@@ -94,6 +94,18 @@ describe('MDC-based MatButton', () => {
     });
   });
 
+  // describe('button[mat-fab] extended', () => {
+  //   it('should have accent palette by default', () => {
+  //     const fixture = TestBed.createComponent(TestApp);
+  //     const extendedFabButtonDebugEl = fixture.debugElement.query(By.css('.mat-mdc-extended-fab'))!;
+  //
+  //     fixture.detectChanges();
+  //
+  //     expect(extendedFabButtonDebugEl.nativeElement.classList)
+  //       .toContain('mat-accent', 'Expected extended fab buttons to use accent palette by default');
+  //   });
+  });
+
   // Regular button tests
   describe('button[mat-button]', () => {
     it('should handle a click on the button', () => {
@@ -281,6 +293,7 @@ describe('MDC-based MatButton', () => {
       Link
     </a>
     <button mat-fab>Fab Button</button>
+    <button mat-fab [extended]="true">Extended</button>
     <button mat-mini-fab>Mini Fab Button</button>
   `
 })

src/material-experimental/mdc-button/fab.ts

@@ -39,8 +39,11 @@ import {ThemePalette} from '@angular/material-experimental/mdc-core';
   selector: `button[mat-fab], button[mat-mini-fab]`,
   templateUrl: 'button.html',
   styleUrls: ['fab.css'],
-  inputs: MAT_BUTTON_INPUTS,
-  host: MAT_BUTTON_HOST,
+  inputs: [...MAT_BUTTON_INPUTS, 'extended'],
+  host: {
+    '[class.mdc-fab--extended]': 'extended',
+    '[class.mat-mdc-extended-fab]': 'extended', ...MAT_BUTTON_HOST
+  },
   exportAs: 'matButton',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -49,6 +52,8 @@ export class MatFabButton extends MatButtonBase {
   // The FAB by default has its color set to accent.
   color = 'accent' as ThemePalette;
 
+  extended: boolean;
+
   constructor(
       elementRef: ElementRef, platform: Platform, ngZone: NgZone,
       @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
@@ -68,8 +73,11 @@ export class MatFabButton extends MatButtonBase {
   selector: `a[mat-fab], a[mat-mini-fab]`,
   templateUrl: 'button.html',
   styleUrls: ['fab.css'],
-  inputs: MAT_ANCHOR_INPUTS,
-  host: MAT_ANCHOR_HOST,
+  inputs: [...MAT_ANCHOR_INPUTS, 'extended'],
+  host: {
+    '[class.mdc-fab--extended]': 'extended',
+    '[class.mat-mdc-extended-fab]': 'extended', ...MAT_ANCHOR_HOST
+  },
   exportAs: 'matButton, matAnchor',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -78,6 +86,8 @@ export class MatFabAnchor extends MatAnchor {
   // The FAB by default has its color set to accent.
   color = 'accent' as ThemePalette;
 
+  extended: boolean;
+
   constructor(
       elementRef: ElementRef, platform: Platform, ngZone: NgZone,
       @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {