From 04a214cf27812a42574844fd49099345deac8aa0 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 16 Jun 2020 07:51:31 +0200
Subject: [PATCH] docs(datepicker): switch examples to non-deprecated form
 field appearance

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.
---
 .../date-range-picker-comparison-example.html               | 4 ++--
 .../date-range-picker-forms-example.html                    | 2 +-
 .../date-range-picker-overview-example.html                 | 2 +-
 .../date-range-picker-selection-strategy-example.html       | 2 +-
 .../datepicker/datepicker-api/datepicker-api-example.html   | 5 +++--
 .../datepicker-color/datepicker-color-example.html          | 4 ++--
 .../datepicker-custom-header-example.html                   | 2 +-
 .../datepicker-custom-icon-example.html                     | 2 +-
 .../datepicker-date-class-example.html                      | 2 +-
 .../datepicker-disabled/datepicker-disabled-example.html    | 6 +++---
 .../datepicker-events/datepicker-events-example.html        | 2 +-
 .../datepicker-filter/datepicker-filter-example.html        | 2 +-
 .../datepicker-formats/datepicker-formats-example.html      | 2 +-
 .../datepicker-locale/datepicker-locale-example.html        | 2 +-
 .../datepicker-min-max/datepicker-min-max-example.html      | 2 +-
 .../datepicker-moment/datepicker-moment-example.html        | 2 +-
 .../datepicker-overview/datepicker-overview-example.html    | 2 +-
 .../datepicker-start-view-example.html                      | 2 +-
 .../datepicker-touch/datepicker-touch-example.html          | 2 +-
 .../datepicker-value/datepicker-value-example.html          | 6 +++---
 .../datepicker-views-selection-example.html                 | 2 +-
 21 files changed, 29 insertions(+), 28 deletions(-)

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
index 7693d8151cef..c6f6adda28ab 100644
--- 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
index 33cf221f4143..3eb5eab449a8 100644
--- 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
index 91188643e4ba..d74c95161364 100644
--- 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
index 91188643e4ba..d74c95161364 100644
--- 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
index 453fe29805a5..8f076eb5a474 100644
--- 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
index c7e033273c8b..ba5dc7b98154 100644
--- 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
index 1ab9bb32fe8d..2031646fdb8a 100644
--- 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
index e7464e2f2619..3003f3671856 100644
--- 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
index 036d3945ecaf..b4406d995230 100644
--- 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
index 4d4579994f55..cc5b04276aa2 100644
--- 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
index d1bd110a4200..c1827726477e 100644
--- 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
index 9f14273d83b9..da52910c44b9 100644
--- 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
index 2d02a2e080cc..50d9fab91d51 100644
--- 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
index 5cd0d78a18ef..1af16b36a861 100644
--- 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
index 141f5291013c..b79bc61cb448 100644
--- 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
index 7ece4c8cbf8c..372811336cc6 100644
--- 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
index aebbc496eee8..ddf98afc504b 100644
--- 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
index 867acb2e5933..0ff5960d067a 100644
--- 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
index 36e5702658a1..46479024f39e 100644
--- 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
index 75114c9a5cd3..d905912de51b 100644
--- 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,11 +1,11 @@
-<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">
@@ -13,7 +13,7 @@
   <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
index 597cbc864a15..647332fa7a77 100644
--- 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>