fix(material-experimental/mdc-button): split up fab and mini fab

Author: annieyw

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

@@ -27,22 +27,33 @@ import {
   MatButtonBase
 } from './button-base';
 import {ThemePalette} from '@angular/material-experimental/mdc-core';
+import {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, 'extended'],
+  // 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', ...MAT_BUTTON_HOST
+    '[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,
@@ -52,7 +63,9 @@ export class MatFabButton extends MatButtonBase {
   // The FAB by default has its color set to accent.
   color = 'accent' as ThemePalette;
 
-  extended: boolean;
+  private _extended: boolean;
+  get extended() { return this._extended; }
+  set extended(extended: any) { this._extended = coerceBooleanProperty(extended); }
 
   constructor(
       elementRef: ElementRef, platform: Platform, ngZone: NgZone,
@@ -61,22 +74,64 @@ export class MatFabButton extends MatButtonBase {
   }
 }
 
+/**
+ * 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);
+  }
+}
+
 
 /**
  * Material Design 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/
  *
- * 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, 'extended'],
+  // 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', ...MAT_ANCHOR_HOST
+    '[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,
@@ -86,11 +141,39 @@ export class MatFabAnchor extends MatAnchor {
   // The FAB by default has its color set to accent.
   color = 'accent' as ThemePalette;
 
-  extended: boolean;
+  private _extended: boolean;
+  get extended() { return this._extended; }
+  set extended(extended: any) { this._extended = coerceBooleanProperty(extended); }
 
   constructor(
       elementRef: ElementRef, platform: Platform, ngZone: NgZone,
       @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     super(elementRef, platform, ngZone, animationMode);
   }
 }
+
+/**
+ * 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,