create extendable fab

Author: josephperrott

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

@@ -8,7 +8,7 @@
     <button mat-fab>Btn</button>
     <a mat-fab routerLink=".">Link</a>
     <a mat-fab routerLink="."><mat-icon>check</mat-icon></a>
-    <button mat-mini-fab>
+    <button mat-mini-fab extended="true">
       <mat-icon>check</mat-icon>
     </button>
     <button mat-mini-fab>Btn</button>

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/demo-material-module.ts

@@ -30,6 +30,7 @@ import {
   MatToolbarModule,
   MatTooltipModule,
   MatStepperModule,
+  MatFabModule,
 } from '@angular/material';
 import {MatNativeDateModule, MatRippleModule} from '@angular/material';
 import {CdkTableModule} from '@angular/cdk/table';
@@ -46,6 +47,7 @@ import {PortalModule} from '@angular/cdk/portal';
  */
 @NgModule({
   exports: [
+    MatFabModule,
     MatAutocompleteModule,
     MatButtonModule,
     MatButtonToggleModule,

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/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

@@ -13,9 +13,7 @@ import {A11yModule} from '@angular/cdk/a11y';
 import {
   MatAnchor,
   MatButton,
-  MatMiniFab,
   MatButtonCssMatStyler,
-  MatFab,
   MatIconButtonCssMatStyler,
   MatRaisedButtonCssMatStyler
 } from './button';
@@ -31,8 +29,6 @@ import {
   exports: [
     MatButton,
     MatAnchor,
-    MatMiniFab,
-    MatFab,
     MatCommonModule,
     MatButtonCssMatStyler,
     MatRaisedButtonCssMatStyler,
@@ -41,8 +37,6 @@ import {
   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

@@ -33,9 +33,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 +64,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 +78,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 +93,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 +139,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);
 }

src/lib/fab/_fab-theme.scss

@@ -0,0 +1,64 @@
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
+
+@mixin mat-fab-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  .mat-fab {
+    // Default properties when not using any [color] value.
+    color: mat-color($primary, default-contrast);
+    background-color: mat-color($primary, 1);
+
+    &.mat-primary {
+      color: mat-color($primary, default-contrast);
+      background-color: mat-color($primary, 1);
+
+      .mat-ripple-element {
+        background-color: mat-color($primary, default-contrast, 0.2);
+      }
+    }
+
+    &.mat-accent {
+      color: mat-color($accent, default-contrast);
+      background-color: mat-color($accent, 1);
+
+      .mat-ripple-element {
+        background-color: mat-color($accent, default-contrast, 0.2);
+      }
+    }
+
+    &.mat-warn {
+      color: mat-color($warn, default-contrast);
+      background-color: mat-color($warn, 1);
+
+      .mat-ripple-element {
+        background-color: mat-color($warn, default-contrast, 0.2);
+      }
+    }
+
+    &[disabled] {
+      color: rgba(white, 0.62);
+
+      .mat-fab-focus-overlay {
+        background-color: transparent;
+      }
+      .mat-ripple-element {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+@mixin mat-fab-typography($config) {
+  .mat-fab {
+    font: {
+      family: mat-font-family($config, button);
+      size: mat-font-size($config, button);
+      weight: mat-font-weight($config, button);
+    }
+  }
+}