feat(patterns): FAB design pattern (#1056)

* feature()/fab pattern

- add fab pattern
- add stackblitz links

* chore/fix error

- fix error

* feature(docs): fab pattern

- add fab pattern
- link to Stackblitz demo

* chore()/update wording

- modify guidance based on how we use it (per view, not application-wide)

* chore()/fix lint

fix lint error

* feature(docs): fab pattern updates

- remove unused CSS
- fix dividers with [inset]="true"
- update pattern description
- fix iframe layout

* feat(patterns): update FAB markup

* chore(patterns): missing divider

* fix(theme): lint issue

src/app/components/design-patterns/design-patterns.component.ts

@@ -28,6 +28,11 @@ export class DesignPatternsComponent {
     icon: 'kitchen',
     route: 'navigation-drawer',
     title: 'Navigation Drawer Patterns',
+  }, {
+    description: 'Floating action button',
+    icon: 'add_circle',
+    route: 'fab',
+    title: 'FAB Patterns',
   }, {
     description: 'Wizard-like pattern',
     icon: 'looks_one',

src/app/components/design-patterns/design-patterns.module.ts

@@ -9,6 +9,7 @@ import { CardsComponent } from './cards/cards.component';
 import { AlertsComponent } from './alerts/alerts.component';
 import { ManagementListComponent } from './management-list/management-list.component';
 import { NavigationDrawerComponent } from './navigation-drawer/navigation-drawer.component';
+import { FABComponent } from './fab/fab.component';
 import { SteppersComponent } from './steppers/steppers.component';
 import { EmptyStatesComponent } from './empty-states/empty-states.component';
 
@@ -42,6 +43,7 @@ import { ToolbarModule } from '../../components/toolbar/toolbar.module';
     AlertsComponent,
     ManagementListComponent,
     NavigationDrawerComponent,
+    FABComponent,
     SteppersComponent,
     EmptyStatesComponent,
   ],

src/app/components/design-patterns/design-patterns.routes.ts

@@ -5,6 +5,7 @@ import { CardsComponent } from './cards/cards.component';
 import { AlertsComponent } from './alerts/alerts.component';
 import { ManagementListComponent } from './management-list/management-list.component';
 import { NavigationDrawerComponent } from './navigation-drawer/navigation-drawer.component';
+import { FABComponent } from './fab/fab.component';
 import { SteppersComponent } from './steppers/steppers.component';
 import { EmptyStatesComponent } from './empty-states/empty-states.component';
 
@@ -21,6 +22,9 @@ const routes: Routes = [{
     }, {
       component: NavigationDrawerComponent,
       path: 'navigation-drawer',
+    }, {
+      component: FABComponent,
+      path: 'fab',
     }, {
       component: SteppersComponent,
       path: 'steppers',

src/app/components/design-patterns/fab/fab.component.html

@@ -0,0 +1,99 @@
+<div tdMediaToggle="gt-xs" [mediaClasses]="['push-sm']">
+  <mat-card tdMediaToggle="gt-xs" [mediaClasses]="['push-bottom']">
+    <mat-card-title>FAB Patterns</mat-card-title>
+    <mat-divider></mat-divider>
+    <mat-card-content class="mat-typography">
+      <h3>When to use</h3>
+      <p>The floating action button (FAB) provides access to the primary action for the current view.</p>
+    </mat-card-content>
+  </mat-card>
+  <mat-card>
+    <mat-card-title>
+      <div layout="row" layout-align="start center">
+        <span>Example</span>
+        <span flex></span>
+        <a href="https://stackblitz.com/edit/fab-patterns" target="_blank" matTooltip="View Code" mat-icon-button>
+          <mat-icon>launch</mat-icon>
+        </a>
+      </div>
+    </mat-card-title>
+    <mat-divider></mat-divider>
+    <div layout-gt-sm="row">
+      <div flex-gt-sm="25" class="mat-typography pad relative">
+        <h2>Usage</h2>
+        <mat-list class="pull-left pull-right">
+          <mat-list-item>
+            <h3 matLine>Position</h3>
+            <p matLine>Bottom right for lists</p>
+          </mat-list-item>
+          <mat-divider></mat-divider>
+          <mat-list-item>
+            <h3 matLine>Color</h3>
+            <p matLine>Use theme accent color</p>
+          </mat-list-item>
+          <mat-divider></mat-divider>
+          <mat-list-item>
+            <h3 matLine>Tooltip</h3>
+            <p matLine>Include a tooltip for a11y</p>
+          </mat-list-item>
+          <mat-divider></mat-divider>
+        </mat-list>
+        <h2 class="push-top push-bottom-none">Guidelines</h2>
+        <mat-nav-list class="pull-left pull-right">
+          <a mat-list-item href="https://material.io/guidelines/components/buttons-floating-action-button.html" target="_blank">
+            <mat-icon>launch</mat-icon>
+            <h3 matLine>Material Design</h3>
+            <p matLine>FAB Guidelines</p>
+          </a>
+          <mat-divider></mat-divider>
+          <a mat-list-item href="https://material.angular.io/components/button/overview" target="_blank">
+            <mat-icon>launch</mat-icon>
+            <h3 matLine>Angular Material</h3>
+            <p matLine>Button Component</p>
+          </a>
+        </mat-nav-list>
+      </div>
+      <div layout="row" flex-gt-sm>
+        <iframe flex class="iframe" [src]="source"></iframe>
+      </div>
+    </div>
+  </mat-card>
+  <div layout-gt-xs="row">
+    <div flex-gt-xs="50">
+      <mat-card>
+        <mat-card-title>
+          <span class="tc-green-600">Do.</span>
+        </mat-card-title>
+        <mat-divider></mat-divider>
+        <mat-list>
+          <mat-list-item>
+            <mat-icon matListIcon>looks_one</mat-icon>
+            <h3 matLine>Only one FAB per page</h3>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-icon matListIcon>looks_two</mat-icon>
+            <h3 matLine>Contextual primary action</h3>
+          </mat-list-item>
+        </mat-list>
+      </mat-card>
+    </div>
+    <div flex-gt-xs="50">
+      <mat-card>
+        <mat-card-title>
+          <span class="tc-red-600">Don't.</span>
+        </mat-card-title>
+        <mat-divider></mat-divider>
+        <mat-list>
+          <mat-list-item>
+            <mat-icon matListIcon>looks_one</mat-icon>
+            <h3 matLine>Don't use for negative actions like delete</h3>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-icon matListIcon>looks_3</mat-icon>
+            <h3 matLine>Don't embellish with custom styles</h3>
+          </mat-list-item>
+        </mat-list>
+      </mat-card>
+    </div>
+  </div>
+</div>

src/app/components/design-patterns/fab/fab.component.ts

@@ -0,0 +1,23 @@
+import { Component, HostBinding } from '@angular/core';
+import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
+import { slideInDownAnimation } from '../../../app.animations';
+
+@Component({
+  selector: 'fab',
+  styleUrls: ['./fab.component.scss'],
+  templateUrl: './fab.component.html',
+  animations: [
+    slideInDownAnimation,
+  ],
+})
+export class FABComponent {
+
+  @HostBinding('@routeAnimation') routeAnimation: boolean = true;
+  @HostBinding('class.td-route-animation') classAnimation: boolean = true;
+
+  source: any = '';
+
+  constructor(private sanitizer: DomSanitizer) {
+    this.source = sanitizer.bypassSecurityTrustResourceUrl('https://fab-patterns.stackblitz.io/');
+  }
+}

src/app/components/design-patterns/steppers/steppers.component.html

@@ -55,6 +55,7 @@ <h2 class="push-top push-bottom-none">Guidelines</h2>
             <h3 matLine>Material Design</h3>
             <p matLine>Stepper Guidelines</p>
           </a>
+          <mat-divider></mat-divider>
           <a mat-list-item href="https://material.angular.io/components/stepper/overview" target="_blank">
             <mat-icon class="mat-caption">launch</mat-icon>
             <h3 matLine>Angular Material</h3>

src/theme.scss

@@ -110,7 +110,7 @@ $theme: mat-light-theme($primary, $accent, $warn);
   .tc-warn {
     color: mat-color($warn-alt);
   }
-  a:not([class^="mat-"]) {
+  a:not([class^='mat-']) {
     color: mat-color($accent-alt);
     &:hover {
       color: darken(mat-color($accent-alt), 10%);