feat(fab): Add touch target (#2069)

closes #2064

Author: trimox

demos/src/app/app-routing.module.ts

@@ -34,7 +34,7 @@ const routes: Routes = [
     path: 'elevation-demo', loadChildren: () =>
       import('./components/elevation-demo/elevation.module').then(m => m.ElevationModule)
   },
-  {path: 'fab-demo', loadChildren: () => import('./components/fab-demo/fab.module').then(m => m.FabModule)},
+  {path: 'fab-demo', loadChildren: () => import('./components/fab/module').then(m => m.FabModule)},
   {
     path: 'form-field-demo', loadChildren: () =>
       import('./components/form-field-demo/form-field.module').then(m => m.FormFieldModule)

demos/src/app/components/fab-demo/routing.module.ts

@@ -30,7 +30,8 @@ <h4 mdcSubtitle2>Properties</h4>
       </tr>
       <tr>
         <td>fluid: boolean</td>
-        <td>Makes the Extended FAB fluid to container, such as screen width or the layout grid.</td>
+        <td>Makes the Extended FAB fluid to container, such as screen width or
+          the layout grid.</td>
       </tr>
       <tr>
         <td>label: string</td>
@@ -46,6 +47,11 @@ <h4 mdcSubtitle2>Properties</h4>
         <td>icon: string</td>
         <td>Optional. Apply a Material Icon.</td>
       </tr>
+      <tr>
+        <td>touch: boolean</td>
+        <td>Set the mini fab touch target to 48 x 48 px. Only applies if FAB is set
+          to mini as well.</td>
+      </tr>
     </tbody>
   </table>
 

demos/src/app/components/fab-demo/api.html renamed to demos/src/app/components/fab/api.html

@@ -1,7 +1,8 @@
 <div class="demo-content">
   <h3 class="demo-content__headline">FAB</h3>
   <div class="demo-layout__row">
-    <button mdc-button (click)="demofab.mini = !demofab.mini">Mini: {{demofab.mini ? 'On' : 'Off'}}</button>
+    <button mdc-button (click)="demofab.mini = !demofab.mini">Mini:
+      {{demofab.mini ? 'On' : 'Off'}}</button>
   </div>
   <button mdc-fab #demofab>
     <mdc-icon>edit</mdc-icon>
@@ -12,7 +13,8 @@ <h3 class="demo-content__headline">FAB</h3>
 <div class="demo-content">
   <h3 class="demo-content__headline">Using Font Awesome</h3>
   <div class="demo-layout__row">
-    <button mdc-button (click)="demoFA.mini = !demoFA.mini">Mini: {{demoFA.mini ? 'On' : 'Off'}}</button>
+    <button mdc-button (click)="demoFA.mini = !demoFA.mini">Mini:
+      {{demoFA.mini ? 'On' : 'Off'}}</button>
   </div>
   <button mdc-fab #demoFA>
     <mdc-icon fontSet="fa" fontIcon="fa-keyboard-o"></mdc-icon>
@@ -32,7 +34,8 @@ <h3 class="demo-content__headline">Mini</h3>
   <h3 class="demo-content__headline">Extended FAB</h3>
   <div class="demo-layout__row">
     <div class="demo-container">
-      <button mdc-fab extended icon="add_shopping_cart" label="Add to cart" class="blackFab"></button>
+      <button mdc-fab extended icon="add_shopping_cart" label="Add to cart"
+        class="blackFab"></button>
     </div>
     <div class="demo-container">
       <button mdc-fab extended label="Create" class="blackFab"></button>
@@ -63,7 +66,8 @@ <h3 class="demo-content__headline">Extended FAB</h3>
 <div class="demo-content">
   <h3 class="demo-content__headline">Extended FAB (Fluid)</h3>
   <div class="demo-layout__row">
-    <button mdc-button (click)="extended.fluid = !extended.fluid">Fluid: {{extended.fluid ? 'On' : 'Off'}}</button>
+    <button mdc-button (click)="extended.fluid = !extended.fluid">Fluid:
+      {{extended.fluid ? 'On' : 'Off'}}</button>
   </div>
   <div class="demo-layout__row">
     <button #extended mdc-fab extended fluid label="Add to cart">
@@ -77,7 +81,8 @@ <h3 class="demo-content__headline">Extended FAB (Fluid)</h3>
   <h3 class="demo-content__headline">Exit/Entry Animation</h3>
   <div class="demo-layout__row">
     <button mdc-button (click)="exited.toggleExited()">Toggle Exited</button>
-    <button mdc-button (click)="exited.mini = !exited.mini">Mini: {{exited.mini ? 'On' : 'Off'}}</button>
+    <button mdc-button (click)="exited.mini = !exited.mini">Mini:
+      {{exited.mini ? 'On' : 'Off'}}</button>
   </div>
   <button mdc-fab #exited (click)="exited.toggleExited()">
     <mdc-icon>save</mdc-icon>
@@ -136,11 +141,35 @@ <h3 class="demo-content__headline">Custom</h3>
 <div class="demo-content">
   <h3 class="demo-content__headline">Absolute Position</h3>
   <div class="demo-layout__row">
-    <button mdc-button (click)="demoPosition.position = 'bottomLeft'">Bottom Left</button>
-    <button mdc-button (click)="demoPosition.position = 'bottomRight'">Bottom Right</button>
+    <button mdc-button (click)="demoPosition.position = 'bottomLeft'">Bottom
+      Left</button>
+    <button mdc-button (click)="demoPosition.position = 'bottomRight'">Bottom
+      Right</button>
     <button mdc-button (click)="demoPosition.mini = !demoPosition.mini">Mini: {{demoPosition.mini ? 'On' :
       'Off'}}</button>
   </div>
-  <button #demoPosition mdc-fab position='bottomRight' icon="add" class="demo-fab-position-zindex"></button>
+  <button #demoPosition mdc-fab position='bottomRight' icon="add"
+    class="demo-fab-position-zindex"></button>
   <example-viewer [example]="examplePosition"></example-viewer>
+</div>
+
+<div class="demo-content">
+  <h3 class="demo-content__headline">Accessibility</h3>
+  <p>
+    Material Design spec advises that touch targets should be at least 48x48px.
+    While the FAB is 48x48px by default, the mini FAB is 40x40px. To meet this
+    requirement, add the `touch` property.
+  </p>
+  <p>
+    Note that the outer mdc-touch-target-wrapper element is only necessary if
+    you want to avoid potentially overlapping touch targets on adjacent elements
+    (due to collapsing margins). </p>
+  <div class="demo-layout__row">
+    <div class="mdc-touch-target-wrapper">
+      <button mdc-fab mini touch>
+        <mdc-icon>edit</mdc-icon>
+      </button>
+    </div>
+  </div>
+  <example-viewer [example]="exampleAccessibility"></example-viewer>
 </div>

demos/src/app/components/fab-demo/examples.html renamed to demos/src/app/components/fab/examples.html

@@ -9,7 +9,7 @@ export class Api {}
 export class Sass {}
 
 @Component({template: '<component-viewer></component-viewer>'})
-export class FabDemo implements OnInit {
+export class Fab implements OnInit {
   @ViewChild(ComponentViewer, {static: true}) _componentViewer: ComponentViewer;
 
   ngOnInit(): void {
@@ -115,4 +115,12 @@ export class Examples {
   examplePosition = {
     html: `<button mdc-fab position='bottomRight' icon="add"></button>`
   };
+
+  exampleAccessibility = {
+    html: `<div class="mdc-touch-target-wrapper">
+  <button mdc-fab mini touch>
+    <mdc-icon>edit</mdc-icon>
+  </button>
+</div>`
+  };
 }

demos/src/app/components/fab-demo/fab-demo.ts renamed to demos/src/app/components/fab/fab.ts

@@ -0,0 +1,29 @@
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+
+import {Api, Examples, Sass, Fab} from './fab';
+
+export const ROUTE_DECLARATIONS = [
+  Api,
+  Examples,
+  Sass,
+  Fab
+];
+
+const ROUTES: Routes = [
+  {
+    path: '', component: Fab,
+    children: [
+      {path: '', redirectTo: 'api'},
+      {path: 'api', component: Api},
+      {path: 'sass', component: Sass},
+      {path: 'examples', component: Examples}
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(ROUTES)],
+  exports: [RouterModule]
+})
+export class RoutingModule {}

demos/src/app/components/fab-demo/fab.module.ts renamed to demos/src/app/components/fab/module.ts

@@ -30,14 +30,15 @@ export class MdcFabLabel {}
     '[class.mdc-fab--mini]': 'mini',
     '[class.mdc-fab--exited]': 'exited',
     '[class.mdc-fab--extended]': 'extended',
-    '[class.ngx-mdc-fab-extended--fluid]': 'fluid'
+    '[class.ngx-mdc-fab-extended--fluid]': 'fluid',
+    '[class.mdc-fab--touch]': 'touch && mini',
   },
   template: `
   <div class="mdc-fab__ripple"></div>
   <ng-content></ng-content>
   <mdc-icon class="mdc-fab__icon" *ngIf="icon">{{icon}}</mdc-icon>
   <span class="mdc-fab__label" *ngIf="label">{{label}}</span>
-  `,
+  <div class="mdc-fab__touch" *ngIf="touch && mini"></div>`,
   providers: [MdcRipple],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -52,6 +53,15 @@ export class MdcFab implements AfterContentInit, OnDestroy {
   }
   private _mini: boolean = false;
 
+  @Input()
+  get touch(): boolean {
+    return this._touch;
+  }
+  set touch(value: boolean) {
+    this._touch = coerceBooleanProperty(value);
+  }
+  private _touch: boolean = false;
+
   @Input()
   get exited(): boolean {
     return this._exited;

demos/src/app/components/fab/routing.module.ts

@@ -1,8 +1,8 @@
-import { Component, DebugElement } from '@angular/core';
-import { fakeAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
+import {Component, DebugElement} from '@angular/core';
+import {fakeAsync, ComponentFixture, TestBed} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
 
-import { MdcFab, MdcFabModule, MdcIconModule } from '@angular-mdc/web';
+import {MdcFab, MdcFabModule, MdcIconModule} from '@angular-mdc/web';
 
 describe('MdcFab', () => {
   let fixture: ComponentFixture<any>;
@@ -66,6 +66,19 @@ describe('MdcFab', () => {
       expect(buttonDebugElement.nativeElement.classList.contains('mdc-fab--exited')).toBe(true);
     });
 
+    it('#should not apply class `touch` to normal fab', () => {
+      testComponent.touch = true;
+      fixture.detectChanges();
+      expect(buttonDebugElement.nativeElement.classList.contains('mdc-fab--touch')).toBe(false);
+    });
+
+    it('#should apply class `touch` to mini fab', () => {
+      testComponent.touch = true;
+      testComponent.mini = true;
+      fixture.detectChanges();
+      expect(buttonDebugElement.nativeElement.classList.contains('mdc-fab--touch')).toBe(true);
+    });
+
     it('#should apply class `exited` after toggleExited(true)', () => {
       buttonInstance.toggleExited(true);
       fixture.detectChanges();
@@ -166,6 +179,7 @@ describe('MdcFab', () => {
       [position]="myPosition"
       [extended]="extended"
       [fluid]="fluid"
+      [touch]="touch"
       [mini]="mini">
       <mdc-icon>search</mdc-icon>
     </button>
@@ -175,6 +189,7 @@ class SimpleButton {
   mini: boolean = false;
   extended: boolean;
   fluid: boolean;
+  touch: boolean = false;
   isExited: boolean = false;
   clickCount: number = 0;
   myPosition: string = 'bottomLeft';
@@ -185,8 +200,6 @@ class SimpleButton {
 }
 
 @Component({
-  template: `
-    <button mdc-fab [icon]="favorite"></button>
-  `,
+  template: `<button mdc-fab [icon]="favorite"></button>`,
 })
-class SimpleFabButton { }
+class SimpleFabButton {}