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

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>Search</a>
+    <a href="//www.google.com" mat-fab extended>
+      <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>Search</a>
+    <a href="//www.google.com" disabled mat-fab extended>
+      <mat-icon>check</mat-icon>
+      Search
+    </a>
   </section>
 
   <h4 class="demo-section-header">Text Buttons [mat-button]</h4>
@@ -145,6 +155,23 @@ <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>Extended</button>
+    <button mat-fab extended color="primary">Extended</button>
+    <button mat-fab extended color="accent">Extended</button>
+    <button mat-fab extended color="warn">Extended</button>
+    <button mat-fab extended>
+      <mat-icon>home</mat-icon>
+      Extended
+    </button>
+    <button mat-fab extended>
+      <mat-icon>home</mat-icon>
+      Extended
+      <mat-icon iconPositionEnd>favorite</mat-icon>
+    </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,22 @@ describe('MDC-based MatButton', () => {
     });
   });
 
+  describe('button[mat-fab] extended', () => {
+    it('should be extended', () => {
+      const fixture = TestBed.createComponent(TestApp);
+      fixture.detectChanges();
+      const extendedFabButtonDebugEl = fixture.debugElement.query(By.css('.extended-fab-test'))!;
+
+      expect(extendedFabButtonDebugEl.nativeElement.classList.contains('mat-mdc-extended-fab'))
+        .toBeFalse();
+
+      fixture.componentInstance.extended = true;
+
+      fixture.detectChanges();
+      expect(extendedFabButtonDebugEl.nativeElement.classList).toContain('mat-mdc-extended-fab');
+    });
+  });
+
   // Regular button tests
   describe('button[mat-button]', () => {
     it('should handle a click on the button', () => {
@@ -281,6 +297,7 @@ describe('MDC-based MatButton', () => {
       Link
     </a>
     <button mat-fab>Fab Button</button>
+    <button mat-fab [extended]="extended" class="extended-fab-test">Extended</button>
     <button mat-mini-fab>Mini Fab Button</button>
   `
 })
@@ -290,6 +307,7 @@ class TestApp {
   rippleDisabled: boolean = false;
   buttonColor: ThemePalette;
   tabIndex: number;
+  extended: boolean = false;
 
   increment() {
     this.clickCount++;

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

@@ -1,4 +1,5 @@
 @import '@material/fab/mixins.import';
+@import '@material/fab/variables.import';
 @import '@material/button/variables.import';
 @import '@material/theme/variables.import';
 @import '../mdc-helpers/mdc-helpers';
@@ -22,11 +23,31 @@
   //   <span class="mdc-fab__icon material-icons">favorite</span>
   // ```
   // However, Angular Material expects a `mat-icon` instead. The following
-  // will extend the `mdc-fab__icon` styling to the mat icon. Note that
-  // the extended styles inherently only match icons that nest themselves in
-  // a parent `mdc-fab`.
+  // mixin will style the icons appropriately.
   .mat-icon {
-    @extend .mdc-fab__icon;
+    @include mdc-fab-icon_();
+  }
+}
+
+.mat-mdc-extended-fab {
+  @include mdc-fab-extended_();
+
+  .mat-icon {
+    @include mdc-fab-extended-icon-padding(
+                    $mdc-fab-extended-icon-padding,
+                    $mdc-fab-extended-label-padding
+    );
+  }
+
+  // For Extended FAB with text label followed by icon.
+  // We are checking for the a button class because white this is a FAB it
+  // uses the same template as button.
+  .mdc-button__label + .mat-icon {
+    @include mdc-fab-extended-icon-padding(
+                    $mdc-fab-extended-icon-padding,
+                    $mdc-fab-extended-label-padding,
+                    $is-icon-at-end: true
+    );
   }
 }
 

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

@@ -27,20 +27,34 @@ import {
   MatButtonBase
 } from './button-base';
 import {ThemePalette} from '@angular/material-experimental/mdc-core';
+import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 
 /**
  * Material Design floating action button (FAB) component. These buttons represent the primary
  * or most common action for users to interact with.
  * See https://material.io/components/buttons-floating-action-button/
  *
- * The `MatFabButton` class has two appearances: normal and mini.
+ * The `MatFabButton` class has two appearances: normal and extended.
  */
 @Component({
-  selector: `button[mat-fab], button[mat-mini-fab]`,
+  selector: `button[mat-fab]`,
   templateUrl: 'button.html',
   styleUrls: ['fab.css'],
-  inputs: MAT_BUTTON_INPUTS,
-  host: MAT_BUTTON_HOST,
+  // TODO: change to MAT_BUTTON_INPUTS/MAT_BUTTON_HOST with spread after ViewEngine is deprecated
+  inputs: ['disabled', 'disableRipple', 'color', 'extended'],
+  host: {
+    '[class.mdc-fab--extended]': 'extended',
+    '[class.mat-mdc-extended-fab]': 'extended',
+    '[attr.disabled]': 'disabled || null',
+    '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
+    // MDC automatically applies the primary theme color to the button, but we want to support
+    // an unthemed version. If color is undefined, apply a CSS class that makes it easy to
+    // select and style this "theme".
+    '[class.mat-unthemed]': '!color',
+    // Add a class that applies to all buttons. This makes it easier to target if somebody
+    // wants to target all Material buttons.
+    '[class.mat-mdc-button-base]': 'true',
+  },
   exportAs: 'matButton',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -49,11 +63,43 @@ export class MatFabButton extends MatButtonBase {
   // The FAB by default has its color set to accent.
   color = 'accent' as ThemePalette;
 
+  private _extended: boolean;
+  get extended(): boolean { return this._extended; }
+  set extended(value: boolean) { this._extended = coerceBooleanProperty(value); }
+
   constructor(
       elementRef: ElementRef, platform: Platform, ngZone: NgZone,
       @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     super(elementRef, platform, ngZone, animationMode);
   }
+
+  static ngAcceptInputType_extended: BooleanInput;
+}
+
+/**
+ * Material Design mini floating action button (FAB) component. These buttons represent the primary
+ * or most common action for users to interact with.
+ * See https://material.io/components/buttons-floating-action-button/
+ */
+@Component({
+  selector: `button[mat-mini-fab]`,
+  templateUrl: 'button.html',
+  styleUrls: ['fab.css'],
+  inputs: MAT_BUTTON_INPUTS,
+  host: MAT_BUTTON_HOST,
+  exportAs: 'matButton',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MatMiniFabButton extends MatButtonBase {
+  // The FAB by default has its color set to accent.
+  color = 'accent' as ThemePalette;
+
+  constructor(
+    elementRef: ElementRef, platform: Platform, ngZone: NgZone,
+    @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
+    super(elementRef, platform, ngZone, animationMode);
+  }
 }
 
 
@@ -62,14 +108,33 @@ export class MatFabButton extends MatButtonBase {
  * are used to provide links for the user to navigate across different routes or pages.
  * See https://material.io/components/buttons-floating-action-button/
  *
- * The `MatFabAnchor` class has two appearances: normal and mini.
+ * The `MatFabAnchor` class has two appearances: normal and extended.
  */
 @Component({
-  selector: `a[mat-fab], a[mat-mini-fab]`,
+  selector: `a[mat-fab]`,
   templateUrl: 'button.html',
   styleUrls: ['fab.css'],
-  inputs: MAT_ANCHOR_INPUTS,
-  host: MAT_ANCHOR_HOST,
+  // TODO: change to MAT_ANCHOR_INPUTS/MAT_ANCHOR_HOST with spread after ViewEngine is deprecated
+  inputs: ['disabled', 'disableRipple', 'color', 'tabIndex', 'extended'],
+  host: {
+    '[class.mdc-fab--extended]': 'extended',
+    '[class.mat-mdc-extended-fab]': 'extended',
+    '[attr.disabled]': 'disabled || null',
+    '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
+
+    // Note that we ignore the user-specified tabindex when it's disabled for
+    // consistency with the `mat-button` applied on native buttons where even
+    // though they have an index, they're not tabbable.
+    '[attr.tabindex]': 'disabled ? -1 : (tabIndex || 0)',
+    '[attr.aria-disabled]': 'disabled.toString()',
+    // MDC automatically applies the primary theme color to the button, but we want to support
+    // an unthemed version. If color is undefined, apply a CSS class that makes it easy to
+    // select and style this "theme".
+    '[class.mat-unthemed]': '!color',
+    // Add a class that applies to all buttons. This makes it easier to target if somebody
+    // wants to target all Material buttons.
+    '[class.mat-mdc-button-base]': 'true',
+  },
   exportAs: 'matButton, matAnchor',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -78,9 +143,42 @@ export class MatFabAnchor extends MatAnchor {
   // The FAB by default has its color set to accent.
   color = 'accent' as ThemePalette;
 
+  private _extended: boolean;
+  get extended(): boolean { return this._extended; }
+  set extended(value: boolean) { this._extended = coerceBooleanProperty(value); }
+
+
   constructor(
       elementRef: ElementRef, platform: Platform, ngZone: NgZone,
       @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     super(elementRef, platform, ngZone, animationMode);
   }
+
+  static ngAcceptInputType_extended: BooleanInput;
+}
+
+/**
+ * Material Design mini floating action button (FAB) component for anchor elements. Anchor elements
+ * are used to provide links for the user to navigate across different routes or pages.
+ * See https://material.io/components/buttons-floating-action-button/
+ */
+@Component({
+  selector: `a[mat-mini-fab]`,
+  templateUrl: 'button.html',
+  styleUrls: ['fab.css'],
+  inputs: MAT_ANCHOR_INPUTS,
+  host: MAT_ANCHOR_HOST,
+  exportAs: 'matButton, matAnchor',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MatMiniFabAnchor extends MatAnchor {
+  // The FAB by default has its color set to accent.
+  color = 'accent' as ThemePalette;
+
+  constructor(
+    elementRef: ElementRef, platform: Platform, ngZone: NgZone,
+    @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
+    super(elementRef, platform, ngZone, animationMode);
+  }
 }

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

@@ -9,7 +9,7 @@
 import {NgModule} from '@angular/core';
 import {MatCommonModule, MatRippleModule} from '@angular/material-experimental/mdc-core';
 import {MatAnchor, MatButton} from './button';
-import {MatFabAnchor, MatFabButton} from './fab';
+import {MatFabAnchor, MatFabButton, MatMiniFabAnchor, MatMiniFabButton} from './fab';
 import {MatIconAnchor, MatIconButton} from './icon-button';
 
 @NgModule({
@@ -19,6 +19,8 @@ import {MatIconAnchor, MatIconButton} from './icon-button';
     MatButton,
     MatIconAnchor,
     MatIconButton,
+    MatMiniFabAnchor,
+    MatMiniFabButton,
     MatFabAnchor,
     MatFabButton,
     MatCommonModule,
@@ -27,6 +29,8 @@ import {MatIconAnchor, MatIconButton} from './icon-button';
     MatAnchor,
     MatButton,
     MatIconAnchor,
+    MatMiniFabAnchor,
+    MatMiniFabButton,
     MatIconButton,
     MatFabAnchor,
     MatFabButton,