create extendable fab

Author: josephperrott

.github/CODEOWNERS

@@ -9,6 +9,7 @@
 /src/lib/datepicker/**                             @mmalerba
 /src/lib/dialog/**                                 @jelbourn @crisbeto
 /src/lib/expansion/**                              @josephperrott @jelbourn
+/src/lib/fab/**                                 @josephperrott
 /src/lib/form-field/**                             @mmalerba
 /src/lib/grid-list/**                              @kara @jelbourn
 /src/lib/icon/**                                   @jelbourn

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

@@ -15,6 +15,25 @@
     <a mat-mini-fab routerLink=".">Link</a>
   </section>
 
+  <section>
+    <button mat-fab color="primary" extendOnFocus routerLink=".">
+      Link
+      <ng-template #label>This is a link</ng-template>
+    </button>
+    <a mat-fab extendOnFocus extendOnHover routerLink=".">
+      Link
+      <ng-template #label>This is a link</ng-template>
+    </a>
+    <button mat-mini-fab extendOnHover>
+      <ng-template #label><b>Check</b> this one off</ng-template>
+      <mat-icon>check</mat-icon>
+    </button>
+    <button mat-mini-fab extendOnHover="true">
+      Btn
+      <ng-template #label>This is a button</ng-template>
+    </button>
+  </section>
+
   <section>
     <a href="http://www.google.com" mat-button color="primary">SEARCH</a>
     <a href="http://www.google.com" mat-raised-button>SEARCH</a>

src/demo-app/button/button-demo.scss

@@ -2,7 +2,6 @@
 .demo-button {
   button, a {
     margin: 8px;
-    text-transform: uppercase;
   }
 
   section {
@@ -16,3 +15,9 @@
   }
 }
 
+.demo-button-zip {
+  button {
+    display: block;
+    margin: 3px 0;
+  }
+}

src/demo-app/button/button-demo.ts

@@ -11,4 +11,5 @@ export class ButtonDemo {
   isDisabled: boolean = false;
   clickCounter: number = 0;
   toggleDisable: boolean = false;
+  expanded = false;
 }

src/demo-app/system-config.ts

@@ -57,6 +57,7 @@ System.config({
     '@angular/material/datepicker': 'dist/packages/material/datepicker/index.js',
     '@angular/material/dialog': 'dist/packages/material/dialog/index.js',
     '@angular/material/expansion': 'dist/packages/material/expansion/index.js',
+    '@angular/material/fab': 'dist/packages/material/fab/index.js',
     '@angular/material/form-field': 'dist/packages/material/form-field/index.js',
     '@angular/material/grid-list': 'dist/packages/material/grid-list/index.js',
     '@angular/material/icon': 'dist/packages/material/icon/index.js',

src/e2e-app/system-config.ts

@@ -57,6 +57,7 @@ System.config({
     '@angular/material/datepicker': 'dist/bundles/material-datepicker.umd.js',
     '@angular/material/dialog': 'dist/bundles/material-dialog.umd.js',
     '@angular/material/expansion': 'dist/bundles/material-expansion.umd.js',
+    '@angular/material/fab': 'dist/packages/material/fab/index.js',
     '@angular/material/form-field': 'dist/bundles/material-form-field.umd.js',
     '@angular/material/grid-list': 'dist/bundles/material-grid-list.umd.js',
     '@angular/material/icon': 'dist/bundles/material-icon.umd.js',

src/lib/button/_button-base.scss

@@ -17,14 +17,6 @@ $mat-icon-button-size: 40px !default;
 $mat-icon-button-border-radius: 50% !default;
 $mat-icon-button-line-height: 24px !default;
 
-// Fab standards
-$mat-fab-border-radius: 50% !default;
-$mat-fab-size: 56px !default;
-$mat-fab-padding: 16px !default;
-
-$mat-mini-fab-size: 40px !default;
-$mat-mini-fab-padding: 8px !default;
-
 // Applies base styles to all button types.
 %mat-button-base {
   box-sizing: border-box;
@@ -62,7 +54,7 @@ $mat-mini-fab-padding: 8px !default;
   }
 }
 
-// Applies styles to buttons with backgrounds: raised, fab, and mini-fab
+// Applies styles to buttons with raised backgrounds.
 %mat-raised-button {
   @extend %mat-button-base;
 
@@ -83,30 +75,3 @@ $mat-mini-fab-padding: 8px !default;
     box-shadow: none;
   }
 }
-
-// Applies styles to fab and mini-fab button types only
-@mixin mat-fab($size, $padding) {
-  @extend %mat-raised-button;
-
-  @include mat-overridable-elevation(6);
-
-  // Reset the min-width from the button base.
-  min-width: 0;
-
-  border-radius: $mat-fab-border-radius;
-  width: $size;
-  height: $size;
-  padding: 0;
-
-  flex-shrink: 0;
-
-  &:not([disabled]):active {
-    @include mat-overridable-elevation(12);
-  }
-
-  .mat-button-wrapper {
-    padding: $padding 0;
-    display: inline-block;
-    line-height: $mat-icon-button-line-height;
-  }
-}

src/lib/button/_button-theme.scss

@@ -82,7 +82,7 @@
     @include _mat-button-theme-color($theme, 'color');
   }
 
-  .mat-raised-button, .mat-fab, .mat-mini-fab {
+  .mat-raised-button {
     // Default properties when not using any [color] value.
     color: mat-color($foreground, text);
     background-color: mat-color($background, raised-button);
@@ -107,7 +107,7 @@
 }
 
 @mixin mat-button-typography($config) {
-  .mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
+  .mat-button, .mat-raised-button, .mat-icon-button {
     font: {
       family: mat-font-family($config, button);
       size: mat-font-size($config, button);

src/lib/button/button-module.ts

@@ -10,12 +10,11 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {MatCommonModule, MatRippleModule} from '@angular/material/core';
 import {A11yModule} from '@angular/cdk/a11y';
+import {MatFabModule} from '@angular/material/fab';
 import {
   MatAnchor,
   MatButton,
-  MatMiniFab,
   MatButtonCssMatStyler,
-  MatFab,
   MatIconButtonCssMatStyler,
   MatRaisedButtonCssMatStyler
 } from './button';
@@ -26,23 +25,21 @@ import {
     CommonModule,
     MatRippleModule,
     MatCommonModule,
+    MatFabModule,
     A11yModule,
   ],
   exports: [
     MatButton,
     MatAnchor,
-    MatMiniFab,
-    MatFab,
     MatCommonModule,
+    MatFabModule,
     MatButtonCssMatStyler,
     MatRaisedButtonCssMatStyler,
     MatIconButtonCssMatStyler,
   ],
   declarations: [
     MatButton,
     MatAnchor,
-    MatMiniFab,
-    MatFab,
     MatButtonCssMatStyler,
     MatRaisedButtonCssMatStyler,
     MatIconButtonCssMatStyler,

src/lib/button/button.html

@@ -1,6 +1,6 @@
 <span class="mat-button-wrapper"><ng-content></ng-content></span>
 <div matRipple class="mat-button-ripple"
-     [class.mat-button-ripple-round]="_isRoundButton || _isIconButton"
+     [class.mat-button-ripple-round]="_isIconButton"
      [matRippleDisabled]="_isRippleDisabled()"
      [matRippleCentered]="_isIconButton"
      [matRippleTrigger]="_getHostElement()"></div>

src/lib/button/button.scss

@@ -13,7 +13,7 @@
   }
 }
 
-// Only flat buttons (not raised, FABs or icon buttons) have a hover style.
+// Only flat buttons (not raised or icon buttons) have a hover style.
 // Use the same visual treatment for hover as for focus.
 .mat-button:hover .mat-button-focus-overlay {
   opacity: 1;
@@ -23,14 +23,6 @@
   @extend %mat-raised-button;
 }
 
-.mat-fab {
-  @include mat-fab($mat-fab-size, $mat-fab-padding);
-}
-
-.mat-mini-fab {
-  @include mat-fab($mat-mini-fab-size, $mat-mini-fab-padding);
-}
-
 .mat-icon-button {
   padding: 0;
 
@@ -70,7 +62,7 @@
 
 // Element that overlays the button to show focus and hover effects.
 .mat-button-focus-overlay {
-  // The button spec calls for focus on raised buttons (and FABs) to be indicated with a
+  // The button spec calls for focus on raised buttons to be indicated with a
   // black, 12% opacity shade over the normal color (for both light and dark themes).
   background-color: rgba(black, 0.12);
   border-radius: inherit;
@@ -96,7 +88,7 @@
 
 // Add an outline to make it more visible in high contrast mode.
 @include cdk-high-contrast {
-  .mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
+  .mat-button, .mat-raised-button, .mat-icon-button {
     outline: solid 1px;
   }
 }

src/lib/button/button.ts

@@ -13,12 +13,8 @@ import {
   Component,
   Directive,
   ElementRef,
-  forwardRef,
-  Inject,
   OnDestroy,
-  Optional,
   Renderer2,
-  Self,
   ViewEncapsulation,
 } from '@angular/core';
 import {
@@ -33,9 +29,6 @@ import {
 
 // TODO(kara): Convert attribute selectors to classes when attr maps become available
 
-/** Default color palette for round buttons (mat-fab and mat-mini-fab) */
-const DEFAULT_ROUND_BUTTON_COLOR = 'accent';
-
 
 /**
  * Directive whose purpose is to add the mat- CSS styling to this selector.
@@ -67,39 +60,6 @@ export class MatRaisedButtonCssMatStyler {}
 })
 export class MatIconButtonCssMatStyler {}
 
-/**
- * Directive whose purpose is to add the mat- CSS styling to this selector.
- * @docs-private
- */
-@Directive({
-  selector: 'button[mat-fab], a[mat-fab]',
-  host: {'class': 'mat-fab'}
-})
-export class MatFab {
-  constructor(@Self() @Optional() @Inject(forwardRef(() => MatButton)) button: MatButton,
-              @Self() @Optional() @Inject(forwardRef(() => MatAnchor)) anchor: MatAnchor) {
-    // Set the default color palette for the mat-fab components.
-    (button || anchor).color = DEFAULT_ROUND_BUTTON_COLOR;
-  }
-}
-
-/**
- * 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[mat-mini-fab], a[mat-mini-fab]',
-  host: {'class': 'mat-mini-fab'}
-})
-export class MatMiniFab {
-  constructor(@Self() @Optional() @Inject(forwardRef(() => MatButton)) button: MatButton,
-              @Self() @Optional() @Inject(forwardRef(() => MatAnchor)) anchor: MatAnchor) {
-    // Set the default color palette for the mat-mini-fab components.
-    (button || anchor).color = DEFAULT_ROUND_BUTTON_COLOR;
-  }
-}
-
 
 // Boilerplate for applying mixins to MatButton.
 /** @docs-private */
@@ -114,8 +74,7 @@ export const _MatButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(M
  */
 @Component({
   moduleId: module.id,
-  selector: `button[mat-button], button[mat-raised-button], button[mat-icon-button],
-             button[mat-fab], button[mat-mini-fab]`,
+  selector: `button[mat-button], button[mat-raised-button], button[mat-icon-button]`,
   exportAs: 'matButton',
   host: {
     '[disabled]': 'disabled || null',
@@ -130,9 +89,6 @@ export const _MatButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(M
 export class MatButton extends _MatButtonMixinBase
     implements OnDestroy, CanDisable, CanColor, CanDisableRipple {
 
-  /** Whether the button is round. */
-  _isRoundButton: boolean = this._hasHostAttributes('mat-fab', 'mat-mini-fab');
-
   /** Whether the button is icon button. */
   _isIconButton: boolean = this._hasHostAttributes('mat-icon-button');
 
@@ -179,7 +135,7 @@ export class MatButton extends _MatButtonMixinBase
  */
 @Component({
   moduleId: module.id,
-  selector: `a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]`,
+  selector: `a[mat-button], a[mat-raised-button], a[mat-icon-button]`,
   exportAs: 'matButton, matAnchor',
   host: {
     '[attr.tabindex]': 'disabled ? -1 : 0',

src/lib/core/theming/_all-theme.scss

@@ -29,6 +29,7 @@
 @import '../../tooltip/tooltip-theme';
 @import '../../snack-bar/snack-bar-theme';
 @import '../../form-field/form-field-theme';
+@import '../../fab/fab-theme';
 
 
 // Create a theme.
@@ -63,4 +64,5 @@
   @include mat-toolbar-theme($theme);
   @include mat-tooltip-theme($theme);
   @include mat-snack-bar-theme($theme);
+  @include mat-fab-theme($theme);
 }

src/lib/core/typography/_all-typography.scss

@@ -30,6 +30,7 @@
 @import '../option/option-theme';
 @import '../option/optgroup-theme';
 @import '../../form-field/form-field-theme';
+@import '../../fab/fab-theme';
 
 
 // Includes all of the typographic styles.
@@ -70,4 +71,5 @@
   @include mat-option-typography($config);
   @include mat-optgroup-typography($config);
   @include mat-snack-bar-typography($config);
+  @include mat-fab-typography($config);
 }