docs(datepicker): switch examples to non-deprecated form field appearance (#19653)

crisbeto · mmalerba · commit 06c7ab72a864 · 2020-06-17T15:54:33.000-07:00
Switches all of the datepicker examples to use the fill form field appearance, similarly to what we did in the form field examples a few months ago.
diff --git a/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.html b/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.html
@@ -1,4 +1,4 @@
-<mat-form-field class="example-form-field">
+<mat-form-field class="example-form-field" appearance="fill">
   <mat-label>First campaign</mat-label>
   <mat-date-range-input
     [formGroup]="campaignOne"
@@ -12,7 +12,7 @@
   <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
 </mat-form-field>
 
-<mat-form-field class="example-form-field">
+<mat-form-field class="example-form-field" appearance="fill">
   <mat-label>Second campaign</mat-label>
   <mat-date-range-input
     [formGroup]="campaignTwo"
diff --git a/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.html b/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.html
@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Enter a date range</mat-label>
   <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
     <input matStartDate formControlName="start" placeholder="Start date">
diff --git a/src/components-examples/material/datepicker/date-range-picker-overview/date-range-picker-overview-example.html b/src/components-examples/material/datepicker/date-range-picker-overview/date-range-picker-overview-example.html
@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Enter a date range</mat-label>
   <mat-date-range-input [rangePicker]="picker">
     <input matStartDate placeholder="Start date">
diff --git a/src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.html b/src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.html
@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Enter a date range</mat-label>
   <mat-date-range-input [rangePicker]="picker">
     <input matStartDate placeholder="Start date">
diff --git a/src/components-examples/material/datepicker/datepicker-api/datepicker-api-example.html b/src/components-examples/material/datepicker/datepicker-api/datepicker-api-example.html
@@ -1,5 +1,6 @@
-<mat-form-field class="example-full-width">
-  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
+<mat-form-field class="example-full-width" appearance="fill">
+  <mat-label>Choose a date</mat-label>
+  <input matInput [matDatepicker]="picker">
   <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>
 <button mat-raised-button (click)="picker.open()">Open</button>
diff --git a/src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.html b/src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.html
@@ -1,11 +1,11 @@
-<mat-form-field color="accent">
+<mat-form-field color="accent" appearance="fill">
   <mat-label>Inherited calendar color</mat-label>
   <input matInput [matDatepicker]="picker1">
   <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
   <mat-datepicker #picker1></mat-datepicker>
 </mat-form-field>
 
-<mat-form-field color="accent">
+<mat-form-field color="accent" appearance="fill">
   <mat-label>Custom calendar color</mat-label>
   <input matInput [matDatepicker]="picker2">
   <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
diff --git a/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.html b/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.html
@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Custom calendar header</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
diff --git a/src/components-examples/material/datepicker/datepicker-custom-icon/datepicker-custom-icon-example.html b/src/components-examples/material/datepicker/datepicker-custom-icon/datepicker-custom-icon-example.html
@@ -1,4 +1,4 @@
-<mat-form-field class="example-full-width">
+<mat-form-field class="example-full-width" appearance="fill">
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker">
diff --git a/src/components-examples/material/datepicker/datepicker-date-class/datepicker-date-class-example.html b/src/components-examples/material/datepicker/datepicker-date-class/datepicker-date-class-example.html
@@ -1,4 +1,4 @@
-<mat-form-field class="example-full-width">
+<mat-form-field class="example-full-width" appearance="fill">
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
diff --git a/src/components-examples/material/datepicker/datepicker-disabled/datepicker-disabled-example.html b/src/components-examples/material/datepicker/datepicker-disabled/datepicker-disabled-example.html
@@ -1,5 +1,5 @@
 <p>
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>Completely disabled</mat-label>
     <input matInput [matDatepicker]="dp1" disabled>
     <mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
@@ -8,7 +8,7 @@
 </p>
 
 <p>
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>Popup disabled</mat-label>
     <input matInput [matDatepicker]="dp2">
     <mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
@@ -17,7 +17,7 @@
 </p>
 
 <p>
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>Input disabled</mat-label>
     <input matInput [matDatepicker]="dp3" disabled>
     <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
diff --git a/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html b/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html
@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Input & change events</mat-label>
   <input matInput [matDatepicker]="picker"
          (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
diff --git a/src/components-examples/material/datepicker/datepicker-filter/datepicker-filter-example.html b/src/components-examples/material/datepicker/datepicker-filter/datepicker-filter-example.html
@@ -1,4 +1,4 @@
-<mat-form-field class="example-full-width">
+<mat-form-field class="example-full-width" appearance="fill">
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
diff --git a/src/components-examples/material/datepicker/datepicker-formats/datepicker-formats-example.html b/src/components-examples/material/datepicker/datepicker-formats/datepicker-formats-example.html
@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Verbose datepicker</mat-label>
   <input matInput [matDatepicker]="dp" [formControl]="date">
   <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
diff --git a/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.html b/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.html
@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Different locale</mat-label>
   <input matInput [matDatepicker]="dp">
   <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
diff --git a/src/components-examples/material/datepicker/datepicker-min-max/datepicker-min-max-example.html b/src/components-examples/material/datepicker/datepicker-min-max/datepicker-min-max-example.html
@@ -1,4 +1,4 @@
-<mat-form-field class="example-full-width">
+<mat-form-field class="example-full-width" appearance="fill">
   <mat-label>Choose a date</mat-label>
   <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
diff --git a/src/components-examples/material/datepicker/datepicker-moment/datepicker-moment-example.html b/src/components-examples/material/datepicker/datepicker-moment/datepicker-moment-example.html
@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Moment.js datepicker</mat-label>
   <input matInput [matDatepicker]="dp" [formControl]="date">
   <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
diff --git a/src/components-examples/material/datepicker/datepicker-overview/datepicker-overview-example.html b/src/components-examples/material/datepicker/datepicker-overview/datepicker-overview-example.html
@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Choose a date</mat-label>
 <!-- #docregion toggle -->
   <input matInput [matDatepicker]="picker">
diff --git a/src/components-examples/material/datepicker/datepicker-start-view/datepicker-start-view-example.html b/src/components-examples/material/datepicker/datepicker-start-view/datepicker-start-view-example.html
@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
diff --git a/src/components-examples/material/datepicker/datepicker-touch/datepicker-touch-example.html b/src/components-examples/material/datepicker/datepicker-touch/datepicker-touch-example.html
@@ -1,4 +1,4 @@
-<mat-form-field class="example-full-width">
+<mat-form-field class="example-full-width" appearance="fill">
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
diff --git a/src/components-examples/material/datepicker/datepicker-value/datepicker-value-example.html b/src/components-examples/material/datepicker/datepicker-value/datepicker-value-example.html
@@ -1,19 +1,19 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Angular forms</mat-label>
   <input matInput [matDatepicker]="picker1" [formControl]="date">
   <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
   <mat-datepicker #picker1></mat-datepicker>
 </mat-form-field>
 
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Angular forms (w/ deserialization)</mat-label>
   <input matInput [matDatepicker]="picker2"
          [formControl]="serializedDate">
   <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
   <mat-datepicker #picker2></mat-datepicker>
 </mat-form-field>
 
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Value binding</mat-label>
   <input matInput [matDatepicker]="picker3" [value]="date.value">
   <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
diff --git a/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.html b/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.html
@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Month and Year</mat-label>
   <input matInput [matDatepicker]="dp" [formControl]="date">
   <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<mat-form-field>`
	`1`	`+<mat-form-field appearance="fill">`
`2`	`2`	`<mat-label>Enter a date range</mat-label>`
`3`	`3`	`<mat-date-range-input [formGroup]="range" [rangePicker]="picker">`
`4`	`4`	`<input matStartDate formControlName="start" placeholder="Start date">`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<mat-form-field class="example-full-width">`
	`1`	`+<mat-form-field class="example-full-width" appearance="fill">`
`2`	`2`	`<mat-label>Choose a date</mat-label>`
`3`	`3`	`<input matInput [matDatepicker]="picker">`
`4`	`4`	`<mat-datepicker-toggle matSuffix [for]="picker">`