From d15110ad2f4f79621fb27f491ef61959279a1b34 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Wed, 22 Mar 2017 16:31:05 -0700
Subject: [PATCH 1/2] docs(input): add example of a clearable input

---
 src/material-examples/example-module.ts               |  4 +++-
 .../input-clearable/input-clearable-example.css       |  3 +++
 .../input-clearable/input-clearable-example.html      |  4 ++++
 .../input-clearable/input-clearable-example.ts        | 11 +++++++++++
 4 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 src/material-examples/input-clearable/input-clearable-example.css
 create mode 100644 src/material-examples/input-clearable/input-clearable-example.html
 create mode 100644 src/material-examples/input-clearable/input-clearable-example.ts

diff --git a/src/material-examples/example-module.ts b/src/material-examples/example-module.ts
index 8c90af15bb42..3df3fbf58a05 100644
--- a/src/material-examples/example-module.ts
+++ b/src/material-examples/example-module.ts
@@ -83,7 +83,7 @@ import {DatepickerMinMaxExample} from './datepicker-min-max/datepicker-min-max-e
 import {DatepickerFilterExample} from './datepicker-filter/datepicker-filter-example';
 import {DatepickerTouchExample} from './datepicker-touch/datepicker-touch-example';
 import {DatepickerApiExample} from './datepicker-api/datepicker-api-example';
-
+import {InputClearableExample} from './input-clearable/input-clearable-example';
 import {
   MdAutocompleteModule, MdButtonModule, MdButtonToggleModule, MdCardModule, MdCheckboxModule,
   MdChipsModule, MdDatepickerModule, MdDialogModule, MdGridListModule, MdIconModule, MdInputModule,
@@ -147,6 +147,7 @@ export const EXAMPLE_COMPONENTS = {
   'grid-list-overview': {title: 'Basic grid-list', component: GridListOverviewExample},
   'icon-overview': {title: 'Basic icons', component: IconOverviewExample},
   'icon-svg': {title: 'SVG icons', component: IconSvgExample},
+  'input-clearable': {title: 'Input with clear button', component: InputClearableExample},
   'input-form': {title: 'Inputs in a form', component: InputFormExample},
   'input-overview': {title: 'Basic inputs', component: InputOverviewExample},
   'input-errors': {title: 'Input Errors', component: InputErrorsExample},
@@ -267,6 +268,7 @@ export const EXAMPLE_LIST = [
   GridListOverviewExample,
   IconOverviewExample,
   IconSvgExample,
+  InputClearableExample,
   InputFormExample,
   InputOverviewExample,
   InputPrefixSuffixExample,
diff --git a/src/material-examples/input-clearable/input-clearable-example.css b/src/material-examples/input-clearable/input-clearable-example.css
new file mode 100644
index 000000000000..79a00e4cd034
--- /dev/null
+++ b/src/material-examples/input-clearable/input-clearable-example.css
@@ -0,0 +1,3 @@
+.example-input-container {
+  width: 200px;
+}
diff --git a/src/material-examples/input-clearable/input-clearable-example.html b/src/material-examples/input-clearable/input-clearable-example.html
new file mode 100644
index 000000000000..63fe08a3f372
--- /dev/null
+++ b/src/material-examples/input-clearable/input-clearable-example.html
@@ -0,0 +1,4 @@
+<md-input-container class="example-input-container">
+  <input mdInput type="text" placeholder="Clearable input" [(ngModel)]="value"/>
+  <md-icon mdSuffix *ngIf="value" (click)="value=''">close</md-icon>
+</md-input-container>
diff --git a/src/material-examples/input-clearable/input-clearable-example.ts b/src/material-examples/input-clearable/input-clearable-example.ts
new file mode 100644
index 000000000000..01fba9c163f9
--- /dev/null
+++ b/src/material-examples/input-clearable/input-clearable-example.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'input-clearable-example',
+  templateUrl: './input-clearable-example.html',
+  styleUrls: ['./input-clearable-example.css'],
+})
+export class InputClearableExample {
+  value = 'Clear me';
+}

From 19d4f3bdfbe27052a44d25685f8a442be24668d9 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Thu, 29 Jun 2017 14:51:15 -0700
Subject: [PATCH 2/2] use icon button

---
 .../input-clearable/input-clearable-example.html              | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/material-examples/input-clearable/input-clearable-example.html b/src/material-examples/input-clearable/input-clearable-example.html
index 63fe08a3f372..a1342943d0b5 100644
--- a/src/material-examples/input-clearable/input-clearable-example.html
+++ b/src/material-examples/input-clearable/input-clearable-example.html
@@ -1,4 +1,6 @@
 <md-input-container class="example-input-container">
   <input mdInput type="text" placeholder="Clearable input" [(ngModel)]="value"/>
-  <md-icon mdSuffix *ngIf="value" (click)="value=''">close</md-icon>
+  <md-button *ngIf="value" mdSuffix md-icon-button aria-label="Clear" (click)="value=''">
+    <md-icon>close</md-icon>
+  </md-button>
 </md-input-container>