feat(button): Add touch target (#2066)

closes #2061

Author: trimox

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

@@ -12,7 +12,7 @@ export const DEMO_DECLARATIONS = [
 const routes: Routes = [
   {
     path: 'button-demo', loadChildren: () =>
-      import('./components/button-demo/button.module').then(m => m.ButtonModule)
+      import('./components/button/module').then(m => m.ButtonModule)
   },
   {path: 'card-demo', loadChildren: () => import('./components/card-demo/card.module').then(m => m.CardModule)},
   {

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

@@ -26,7 +26,8 @@ <h4 mdcSubtitle2>Properties</h4>
       </tr>
       <tr>
         <td>outlined: boolean</td>
-        <td>A contained button that is flush with the surface and has a visible border.</td>
+        <td>A contained button that is flush with the surface and has a visible
+          border.</td>
       </tr>
       <tr>
         <td>disabled: boolean</td>
@@ -36,6 +37,10 @@ <h4 mdcSubtitle2>Properties</h4>
         <td>label: string</td>
         <td>Indicates the element containing the button's text label.</td>
       </tr>
+      <tr>
+        <td>touch: boolean</td>
+        <td>Set the component touch target to 48 x 48 px.</td>
+      </tr>
     </tbody>
   </table>
 
@@ -52,10 +57,11 @@ <h4 mdcSubtitle2>Methods</h4>
 
 <div class="docs-api">
   <h3 mdcHeadline6>MdcButtonLabel</h3>
+  Optional. Required for the trailing icon to be styled appropriately.
   <p>
     Selector:
     <span class="markdown-code">mdc-button-label</span>
     <span class="markdown-code">[mdcButtonLabel]</span>
   </p>
   Exported as: <span class="markdown-code">mdcButtonLabel</span>
-</div>
+</div>

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

@@ -11,7 +11,7 @@ export class Sass {}
 @Component({
   template: '<component-viewer></component-viewer>'
 })
-export class ButtonDemo implements OnInit {
+export class Button implements OnInit {
   @ViewChild(ComponentViewer, {static: true}) _componentViewer: ComponentViewer;
 
   ngOnInit(): void {
@@ -136,4 +136,10 @@ export class Examples {
 </button>`,
     sass: `https://raw.githubusercontent.com/trimox/angular-mdc-web/master/demos/src/styles/_button.scss`
   };
+
+  exampleAccessibility = {
+html: `<div class="mdc-touch-target-wrapper">
+  <button mdc-button touch>My Accessible Button</button>
+</div>`
+  };
 }

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

@@ -158,4 +158,22 @@ <h3 class="demo-content__headline">Trailing icon</h3>
     </div>
   </div>
   <example-viewer [example]="trailingIconExample"></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 48 x 48
+    px. 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-button touch>My Accessible Button</button>
+    </div>
+  </div>
+  <example-viewer [example]="exampleAccessibility"></example-viewer>
 </div>

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

@@ -1,18 +1,18 @@
 import {NgModule} from '@angular/core';
 import {Routes, RouterModule} from '@angular/router';
 
-import {Api, Examples, Sass, ButtonDemo} from './button-demo';
+import {Api, Examples, Sass, Button} from './button';
 
 export const ROUTE_DECLARATIONS = [
   Api,
   Examples,
   Sass,
-  ButtonDemo
+  Button
 ];
 
 const ROUTES: Routes = [
   {
-    path: '', component: ButtonDemo,
+    path: '', component: Button,
     children: [
       {path: '', redirectTo: 'api'},
       {path: 'api', component: Api},

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

@@ -1,7 +1,6 @@
 <mdc-list-divider class="example-divider"></mdc-list-divider>
 <button mdc-button raised class="example-opener" *ngIf="!open"
   (click)="open = !open" [label]="label">
-  <mdc-icon>code</mdc-icon>
 </button>
 <mdc-tab-bar fixed [focusOnActivate]="false" *ngIf="open"
   (activated)="onActivatedTab($event)">

demos/src/app/components/button-demo/sass.html renamed to demos/src/app/components/button/sass.html

@@ -53,7 +53,7 @@ export class ExampleViewer implements OnInit {
   }
 
   isUrl(url: string): boolean {
-    const regExp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
+    const regExp = /(https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
     return regExp.test(url);
   }
 

demos/src/app/shared/example-viewer/example-viewer.html

@@ -30,11 +30,13 @@ export class MdcButtonLabel {}
     '[class.mdc-button--raised]': 'raised',
     '[class.mdc-button--unelevated]': 'unelevated',
     '[class.mdc-button--outlined]': 'outlined',
+    '[class.mdc-button--touch]': 'touch',
     '(click)': 'onClick($event)'
   },
   template: `
   <div class="mdc-button__ripple"></div>
   <mdc-button-label *ngIf="label">{{label}}</mdc-button-label>
+  <div class="mdc-button__touch" *ngIf="touch"></div>
   <ng-content></ng-content>
   `,
   providers: [MdcRipple],
@@ -69,6 +71,15 @@ export class MdcButton implements OnInit, OnDestroy {
   }
   private _outlined: boolean = false;
 
+  @Input()
+  get touch(): boolean {
+    return this._touch;
+  }
+  set touch(value: boolean) {
+    this._touch = coerceBooleanProperty(value);
+  }
+  private _touch: boolean = false;
+
   @Input()
   get disabled(): boolean {
     return this._disabled;