fix(datepicker): refactor datepicker toggle to support theming (#5317)

* fix(datepicker): refactor toggle to fix theming and allow it to be
combined with button directives

* update usages of datepicker toggle

* change to suggested API

* fix new uses of mdDatepickerToggle after rebase

src/demo-app/datepicker/datepicker-demo.html

@@ -8,27 +8,27 @@ <h2>Options</h2>
 <p>
   <md-input-container>
     <input mdInput [mdDatepicker]="minDatePicker" [(ngModel)]="minDate" placeholder="Min date">
-    <button mdSuffix [mdDatepickerToggle]="minDatePicker"></button>
+    <md-datepicker-toggle mdSuffix [for]="minDatePicker"></md-datepicker-toggle>
   </md-input-container>
   <md-datepicker #minDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></md-datepicker>
   <md-input-container>
     <input mdInput [mdDatepicker]="maxDatePicker" [(ngModel)]="maxDate" placeholder="Max date">
-    <button mdSuffix [mdDatepickerToggle]="maxDatePicker"></button>
+    <md-datepicker-toggle mdSuffix [for]="maxDatePicker"></md-datepicker-toggle>
   </md-input-container>
   <md-datepicker #maxDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></md-datepicker>
 </p>
 <p>
   <md-input-container>
     <input mdInput [mdDatepicker]="startAtPicker" [(ngModel)]="startAt" placeholder="Start at date">
-    <button mdSuffix [mdDatepickerToggle]="startAtPicker"></button>
+    <md-datepicker-toggle mdSuffix [for]="startAtPicker"></md-datepicker-toggle>
   </md-input-container>
   <md-datepicker #startAtPicker [touchUi]="touch" [disabled]="datepickerDisabled"></md-datepicker>
 </p>
 
 <h2>Result</h2>
 
 <p>
-  <button [mdDatepickerToggle]="resultPicker"></button>
+  <md-datepicker-toggle [for]="resultPicker"></md-datepicker-toggle>
   <md-input-container>
     <input mdInput
            #resultPickerModel="ngModel"
@@ -63,7 +63,7 @@ <h2>Result</h2>
          [max]="maxDate"
          [mdDatepickerFilter]="filterOdd ? dateFilter : null"
          placeholder="Pick a date">
-  <button [mdDatepickerToggle]="resultPicker2"></button>
+  <md-datepicker-toggle [for]="resultPicker2"></md-datepicker-toggle>
   <md-datepicker
       #resultPicker2
       [touchUi]="touch"
@@ -75,7 +75,7 @@ <h2>Result</h2>
 
 <h2>Input disabled datepicker</h2>
 <p>
-  <button [mdDatepickerToggle]="datePicker1"></button>
+  <md-datepicker-toggle [for]="datePicker1"></md-datepicker-toggle>
   <md-input-container>
     <input mdInput [mdDatepicker]="datePicker1" [(ngModel)]="date" [min]="minDate" [max]="maxDate"
            [mdDatepickerFilter]="filterOdd ? dateFilter : null" [disabled]="true"
@@ -87,10 +87,10 @@ <h2>Input disabled datepicker</h2>
 
 <h2>Input disabled, datepicker popup enabled</h2>
 <p>
-  <button [mdDatepickerToggle]="datePicker2"></button>
+  <md-datepicker-toggle [for]="datePicker2"></md-datepicker-toggle>
   <md-input-container>
-    <input mdInput disabled [mdDatepicker]="datePicker2" [(ngModel)]="date" [min]="minDate" [max]="maxDate"
-           [mdDatepickerFilter]="filterOdd ? dateFilter : null"
+    <input mdInput disabled [mdDatepicker]="datePicker2" [(ngModel)]="date" [min]="minDate"
+           [max]="maxDate" [mdDatepickerFilter]="filterOdd ? dateFilter : null"
            placeholder="Input disabled, datepicker enabled">
   </md-input-container>
   <md-datepicker #datePicker2 [touchUi]="touch" [disabled]="false" [startAt]="startAt"

src/lib/datepicker/datepicker-toggle.html

@@ -0,0 +1,10 @@
+<button md-icon-button type="button" [attr.aria-label]="_intl.openCalendarLabel"
+        [disabled]="disabled" (click)="_open($event)">
+  <md-icon>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%"
+         fill="currentColor" style="vertical-align: top">
+      <path d="M0 0h24v24H0z" fill="none"/>
+      <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
+    </svg>
+  </md-icon>
+</button>

src/lib/datepicker/datepicker-toggle.ts

@@ -22,15 +22,10 @@ import {Subscription} from 'rxjs/Subscription';
 
 @Component({
   moduleId: module.id,
-  selector: 'button[mdDatepickerToggle], button[matDatepickerToggle]',
-  template: '',
-  styleUrls: ['datepicker-toggle.css'],
+  selector: 'md-datepicker-toggle, mat-datepicker-toggle',
+  templateUrl: 'datepicker-toggle.html',
   host: {
-    'type': 'button',
     'class': 'mat-datepicker-toggle',
-    '[attr.aria-label]': '_intl.openCalendarLabel',
-    '[disabled]': 'disabled',
-    '(click)': '_open($event)',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -39,11 +34,7 @@ export class MdDatepickerToggle<D> implements OnDestroy {
   private _intlChanges: Subscription;
 
   /** Datepicker instance that the button will toggle. */
-  @Input('mdDatepickerToggle') datepicker: MdDatepicker<D>;
-
-  @Input('matDatepickerToggle')
-  get _datepicker() { return this.datepicker; }
-  set _datepicker(v: MdDatepicker<D>) { this.datepicker = v; }
+  @Input('for') datepicker: MdDatepicker<D>;
 
   /** Whether the toggle button is disabled. */
   @Input()

src/lib/datepicker/datepicker.md

@@ -25,7 +25,7 @@ An optional datepicker toggle button is available. A toggle can be added to the
 
 ```html
 <input [mdDatepicker]="myDatepicker">
-<button [mdDatepickerToggle]="myDatepicker"></button>
+<md-datepicker-toggle [for]="myDatepicker"></md-datepicker-toggle>
 <md-datepicker #myDatepicker></md-datepicker>
 ```
 
@@ -35,7 +35,7 @@ can easily be used as a prefix or suffix on the material input:
 ```html
 <md-input-container>
   <input mdInput [mdDatepicker]="myDatepicker">
-  <button mdSuffix [mdDatepickerToggle]="myDatepicker"></button>
+  <md-datepicker-toggle mdSuffix [for]="myDatepicker"></md-datepicker-toggle>
 </md-input-container>
 <md-datepicker #myDatepicker></md-datepicker>
 ```

src/lib/datepicker/datepicker.spec.ts

@@ -465,7 +465,7 @@ describe('MdDatepicker', () => {
       });
     });
 
-    describe('datepicker with mdDatepickerToggle', () => {
+    describe('datepicker with md-datepicker-toggle', () => {
       let fixture: ComponentFixture<DatepickerWithToggle>;
       let testComponent: DatepickerWithToggle;
 
@@ -960,7 +960,7 @@ class DatepickerWithFormControl {
 @Component({
   template: `
     <input [mdDatepicker]="d">
-    <button [mdDatepickerToggle]="d"></button>
+    <md-datepicker-toggle [for]="d"></md-datepicker-toggle>
     <md-datepicker #d [touchUi]="touchUI"></md-datepicker>
   `,
 })
@@ -987,7 +987,7 @@ class InputContainerDatepicker {
 @Component({
   template: `
     <input [mdDatepicker]="d" [(ngModel)]="date" [min]="minDate" [max]="maxDate">
-    <button [mdDatepickerToggle]="d"></button>
+    <md-datepicker-toggle [for]="d"></md-datepicker-toggle>
     <md-datepicker #d></md-datepicker>
   `,
 })
@@ -1002,7 +1002,7 @@ class DatepickerWithMinAndMaxValidation {
 @Component({
   template: `
     <input [mdDatepicker]="d" [(ngModel)]="date" [mdDatepickerFilter]="filter">
-    <button [mdDatepickerToggle]="d"></button>
+    <md-datepicker-toggle [for]="d"></md-datepicker-toggle>
     <md-datepicker #d [touchUi]="true"></md-datepicker>
   `,
 })

src/lib/datepicker/index.ts

@@ -23,6 +23,7 @@ import {MdCalendar} from './calendar';
 import {MdDatepickerToggle} from './datepicker-toggle';
 import {MdButtonModule} from '../button/index';
 import {MdDatepickerIntl} from './datepicker-intl';
+import {MdIconModule} from '../icon/index';
 
 
 export * from './calendar';
@@ -40,6 +41,7 @@ export * from './year-view';
     CommonModule,
     MdButtonModule,
     MdDialogModule,
+    MdIconModule,
     OverlayModule,
     StyleModule,
     A11yModule,

src/lib/input/_input-theme.scss

@@ -163,9 +163,9 @@
   .mat-input-prefix,
   .mat-input-suffix {
     // Allow icons in a prefix or suffix to adapt to the correct size.
-    .mat-icon,
-    .mat-datepicker-toggle {
+    .mat-icon {
       font-size: $prefix-suffix-icon-font-size;
+      line-height: $line-height;
     }
 
     // Allow icon buttons in a prefix or suffix to adapt to the correct size.
@@ -174,7 +174,8 @@
       width: $prefix-suffix-icon-font-scale * 1em;
 
       .mat-icon {
-        line-height: $prefix-suffix-icon-font-scale;
+        height: $line-height * 1em;
+        line-height: $line-height;
       }
     }
   }

src/lib/input/input-container.scss

@@ -41,11 +41,8 @@ $mat-input-underline-height: 1px !default;
   flex: none;
 
   // Allow icons in a prefix or suffix to adapt to the correct size.
-  .mat-icon,
-  .mat-datepicker-toggle {
+  .mat-icon {
     width: 1em;
-    height: 1em;
-    vertical-align: text-bottom;
   }
 
   // Allow icon buttons in a prefix or suffix to adapt to the correct size.
@@ -55,9 +52,6 @@ $mat-input-underline-height: 1px !default;
 
     .mat-icon {
       font-size: inherit;
-      width: 1em;
-      height: 1em;
-      vertical-align: baseline;
     }
   }
 }
@@ -236,8 +230,7 @@ textarea.mat-input-element {
 // Scale down icons in the placeholder and hint to be the same size as the text.
 .mat-input-subscript-wrapper,
 .mat-input-placeholder-wrapper {
-  .mat-icon,
-  .mat-datepicker-toggle {
+  .mat-icon {
     width: 1em;
     height: 1em;
     font-size: inherit;

src/material-examples/datepicker-filter/datepicker-filter-example.html

@@ -1,5 +1,5 @@
 <md-input-container class="example-full-width">
   <input mdInput [mdDatepickerFilter]="myFilter" [mdDatepicker]="picker" placeholder="Choose a date">
-  <button mdSuffix [mdDatepickerToggle]="picker"></button>
+  <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
 </md-input-container>
 <md-datepicker #picker></md-datepicker>

src/material-examples/datepicker-min-max/datepicker-min-max-example.html

@@ -1,5 +1,5 @@
 <md-input-container class="example-full-width">
   <input mdInput [min]="minDate" [max]="maxDate" [mdDatepicker]="picker" placeholder="Choose a date">
-  <button mdSuffix [mdDatepickerToggle]="picker"></button>
+  <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
 </md-input-container>
 <md-datepicker #picker></md-datepicker>

src/material-examples/datepicker-overview/datepicker-overview-example.html

@@ -1,5 +1,5 @@
 <md-input-container>
   <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
-  <button mdSuffix [mdDatepickerToggle]="picker"></button>
+  <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
 </md-input-container>
 <md-datepicker #picker></md-datepicker>

src/material-examples/datepicker-start-view/datepicker-start-view-example.html

@@ -1,5 +1,5 @@
 <md-input-container>
   <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
-  <button mdSuffix [mdDatepickerToggle]="picker"></button>
+  <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
 </md-input-container>
 <md-datepicker #picker startView="year" [startAt]="startDate"></md-datepicker>

src/material-examples/datepicker-touch/datepicker-touch-example.html

@@ -1,5 +1,5 @@
 <md-input-container class="example-full-width">
   <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
-  <button mdSuffix [mdDatepickerToggle]="picker"></button>
+  <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
 </md-input-container>
 <md-datepicker touchUi="true" #picker></md-datepicker>

src/universal-app/kitchen-sink/kitchen-sink.html

@@ -85,7 +85,7 @@ <h2>Datepicker</h2>
 
 <md-input-container>
   <input type="text" mdInput [mdDatepicker]="birthday" placeholder="Birthday">
-  <button mdSuffix [mdDatepickerToggle]="birthday"></button>
+  <md-datepicker-toggle mdSuffix [for]="birthday"></md-datepicker-toggle>
   <md-datepicker #birthday></md-datepicker>
 </md-input-container>