docs(examples): all examples should use mat-form-field's fill appeara…

…nce by default (#18252)

- stop using the soon to be deprecated legacy appearance by default
- fix issues where labels were specified in the `placeholder` attribute
  - instead of a `mat-label`

Relates to #14792

(cherry picked from commit 0e30214)

src/components-examples/material/datepicker/datepicker-custom-icon/datepicker-custom-icon-example.html

@@ -1,5 +1,6 @@
 <mat-form-field class="example-full-width">
-  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
+  <mat-label>Choose a date</mat-label>
+  <input matInput [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker">
     <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
   </mat-datepicker-toggle>

src/components-examples/material/datepicker/datepicker-date-class/datepicker-date-class-example.html

@@ -1,5 +1,6 @@
 <mat-form-field class="example-full-width">
-  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
+  <mat-label>Choose a date</mat-label>
+  <input matInput [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-disabled/datepicker-disabled-example.html

@@ -1,22 +1,25 @@
 <p>
   <mat-form-field>
-    <input matInput [matDatepicker]="dp1" placeholder="Completely disabled" disabled>
+    <mat-label>Completely disabled</mat-label>
+    <input matInput [matDatepicker]="dp1" disabled>
     <mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
     <mat-datepicker #dp1></mat-datepicker>
   </mat-form-field>
 </p>
 
 <p>
   <mat-form-field>
-    <input matInput [matDatepicker]="dp2" placeholder="Popup disabled">
+    <mat-label>Popup disabled</mat-label>
+    <input matInput [matDatepicker]="dp2">
     <mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
     <mat-datepicker #dp2></mat-datepicker>
   </mat-form-field>
 </p>
 
 <p>
   <mat-form-field>
-    <input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
+    <mat-label>Input disabled</mat-label>
+    <input matInput [matDatepicker]="dp3" disabled>
     <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
     <mat-datepicker #dp3 disabled="false"></mat-datepicker>
   </mat-form-field>

src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html

@@ -1,5 +1,6 @@
 <mat-form-field>
-  <input matInput [matDatepicker]="picker" placeholder="Input & change events"
+  <mat-label>Input & change events</mat-label>
+  <input matInput [matDatepicker]="picker"
          (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>

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

@@ -1,5 +1,6 @@
 <mat-form-field class="example-full-width">
-  <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker" placeholder="Choose a date">
+  <mat-label>Choose a date</mat-label>
+  <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-formats/datepicker-formats-example.html

@@ -1,5 +1,6 @@
 <mat-form-field>
-  <input matInput [matDatepicker]="dp" placeholder="Verbose datepicker" [formControl]="date">
+  <mat-label>Verbose datepicker</mat-label>
+  <input matInput [matDatepicker]="dp" [formControl]="date">
   <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker #dp></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.html

@@ -1,5 +1,6 @@
 <mat-form-field>
-  <input matInput [matDatepicker]="dp" placeholder="Different locale">
+  <mat-label>Different locale</mat-label>
+  <input matInput [matDatepicker]="dp">
   <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker #dp></mat-datepicker>
 </mat-form-field>

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

@@ -1,5 +1,6 @@
 <mat-form-field class="example-full-width">
-  <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
+  <mat-label>Choose a date</mat-label>
+  <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-moment/datepicker-moment-example.html

@@ -1,5 +1,6 @@
 <mat-form-field>
-  <input matInput [matDatepicker]="dp" placeholder="Moment.js datepicker" [formControl]="date">
+  <mat-label>Moment.js datepicker</mat-label>
+  <input matInput [matDatepicker]="dp" [formControl]="date">
   <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker #dp></mat-datepicker>
 </mat-form-field>

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

@@ -1,5 +1,6 @@
 <mat-form-field>
-  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
+  <mat-label>Choose a date</mat-label>
+  <input matInput [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>

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

@@ -1,5 +1,6 @@
 <mat-form-field>
-  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
+  <mat-label>Choose a date</mat-label>
+  <input matInput [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
 </mat-form-field>

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

@@ -1,5 +1,6 @@
 <mat-form-field class="example-full-width">
-  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
+  <mat-label>Choose a date</mat-label>
+  <input matInput [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker touchUi #picker></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-value/datepicker-value-example.html

@@ -1,18 +1,21 @@
 <mat-form-field>
-  <input matInput [matDatepicker]="picker1" placeholder="Angular forms" [formControl]="date">
+  <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>
-  <input matInput [matDatepicker]="picker2" placeholder="Angular forms (w/ deserialization)"
+  <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>
-  <input matInput [matDatepicker]="picker3" placeholder="Value binding" [value]="date.value">
+  <mat-label>Value binding</mat-label>
+  <input matInput [matDatepicker]="picker3" [value]="date.value">
   <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
   <mat-datepicker #picker3></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.html

@@ -1,5 +1,6 @@
 <mat-form-field>
-  <input matInput [matDatepicker]="dp" placeholder="Month and Year" [formControl]="date">
+  <mat-label>Month and Year</mat-label>
+  <input matInput [matDatepicker]="dp" [formControl]="date">
   <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker #dp
                   startView="multi-year"

src/components-examples/material/dialog/dialog-overview/dialog-overview-example-dialog.html

@@ -2,6 +2,7 @@ <h1 mat-dialog-title>Hi {{data.name}}</h1>
 <div mat-dialog-content>
   <p>What's your favorite animal?</p>
   <mat-form-field>
+    <mat-label>Favorite Animal</mat-label>
     <input matInput [(ngModel)]="data.animal">
   </mat-form-field>
 </div>

src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html

@@ -1,7 +1,8 @@
 <ol>
   <li>
     <mat-form-field>
-      <input matInput [(ngModel)]="name" placeholder="What's your name?">
+      <mat-label>What's your name?</mat-label>
+      <input matInput [(ngModel)]="name">
     </mat-form-field>
   </li>
   <li>

src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.css

@@ -11,3 +11,7 @@
   justify-content: space-between;
   align-items: center;
 }
+
+.example-headers-align .mat-form-field + .mat-form-field {
+  margin-left: 8px;
+}

src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html

@@ -15,11 +15,13 @@
     </mat-expansion-panel-header>
 
     <mat-form-field>
-      <input matInput placeholder="First name">
+      <mat-label>First name</mat-label>
+      <input matInput>
     </mat-form-field>
 
     <mat-form-field>
-      <input matInput type="number" min="1" placeholder="Age">
+      <mat-label>Age</mat-label>
+      <input matInput type="number" min="1">
     </mat-form-field>
 
   </mat-expansion-panel>
@@ -36,7 +38,8 @@
     </mat-expansion-panel-header>
 
     <mat-form-field>
-      <input matInput placeholder="Country">
+      <mat-label>Country</mat-label>
+      <input matInput>
     </mat-form-field>
   </mat-expansion-panel>
 
@@ -52,7 +55,8 @@
     </mat-expansion-panel-header>
 
     <mat-form-field>
-      <input matInput placeholder="Date" [matDatepicker]="picker" (focus)="picker.open()" readonly>
+      <mat-label>Date</mat-label>
+      <input matInput [matDatepicker]="picker" (focus)="picker.open()" readonly>
     </mat-form-field>
     <mat-datepicker #picker></mat-datepicker>
   </mat-expansion-panel>

src/components-examples/material/expansion/expansion-overview/expansion-overview-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+.mat-form-field + .mat-form-field {
+  margin-left: 8px;
+}

src/components-examples/material/expansion/expansion-overview/expansion-overview-example.html

@@ -10,11 +10,13 @@
     </mat-expansion-panel-header>
 
     <mat-form-field>
-      <input matInput placeholder="First name">
+      <mat-label>First name</mat-label>
+      <input matInput>
     </mat-form-field>
 
     <mat-form-field>
-      <input matInput placeholder="Age">
+      <mat-label>Age</mat-label>
+      <input matInput type="number" min="1">
     </mat-form-field>
   </mat-expansion-panel>
   <mat-expansion-panel (opened)="panelOpenState = true"

src/components-examples/material/expansion/expansion-steps/expansion-steps-example.css

@@ -8,6 +8,6 @@
   align-items: center;
 }
 
-mat-form-field {
-  margin-right: 12px;
+.example-headers-align .mat-form-field + .mat-form-field {
+  margin-left: 8px;
 }

src/components-examples/material/expansion/expansion-steps/expansion-steps-example.html

@@ -11,11 +11,13 @@
     </mat-expansion-panel-header>
 
     <mat-form-field>
-      <input matInput placeholder="First name">
+      <mat-label>First name</mat-label>
+      <input matInput>
     </mat-form-field>
 
     <mat-form-field>
-      <input matInput type="number" min="1" placeholder="Age">
+      <mat-label>Age</mat-label>
+      <input matInput type="number" min="1">
     </mat-form-field>
 
     <mat-action-row>
@@ -35,7 +37,8 @@
     </mat-expansion-panel-header>
 
     <mat-form-field>
-      <input matInput placeholder="Country">
+      <mat-label>Country</mat-label>
+      <input matInput>
     </mat-form-field>
 
     <mat-action-row>
@@ -56,7 +59,8 @@
     </mat-expansion-panel-header>
 
     <mat-form-field>
-      <input matInput placeholder="Date" [matDatepicker]="picker" (focus)="picker.open()" readonly>
+      <mat-label>Date</mat-label>
+      <input matInput [matDatepicker]="picker" (focus)="picker.open()" readonly>
     </mat-form-field>
     <mat-datepicker #picker></mat-datepicker>
 

src/components-examples/material/input/input-clearable/input-clearable-example.html

@@ -1,5 +1,6 @@
 <mat-form-field class="example-form-field">
-  <input matInput type="text" placeholder="Clearable input" [(ngModel)]="value">
+  <mat-label>Clearable input</mat-label>
+  <input matInput type="text" [(ngModel)]="value">
   <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
     <mat-icon>close</mat-icon>
   </button>

src/components-examples/material/input/input-error-state-matcher/input-error-state-matcher-example.html

@@ -1,7 +1,8 @@
 <form class="example-form">
   <mat-form-field class="example-full-width">
-    <input matInput placeholder="Email" [formControl]="emailFormControl"
-           [errorStateMatcher]="matcher">
+    <mat-label>Email</mat-label>
+    <input matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher"
+           placeholder="Ex. [email protected]">
     <mat-hint>Errors appear instantly!</mat-hint>
     <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
       Please enter a valid email address

src/components-examples/material/input/input-errors/input-errors-example.html

@@ -1,6 +1,7 @@
 <form class="example-form">
   <mat-form-field class="example-full-width">
-    <input matInput placeholder="Email" [formControl]="emailFormControl">
+    <mat-label>Email</mat-label>
+    <input matInput [formControl]="emailFormControl" placeholder="Ex. [email protected]">
     <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
       Please enter a valid email address
     </mat-error>

src/components-examples/material/input/input-form/input-form-example.html

@@ -1,35 +1,43 @@
 <form class="example-form">
   <mat-form-field class="example-full-width">
-    <input matInput placeholder="Company (disabled)" disabled value="Google">
+    <mat-label>Company (disabled)</mat-label>
+    <input matInput disabled value="Google">
   </mat-form-field>
 
   <table class="example-full-width" cellspacing="0"><tr>
     <td><mat-form-field class="example-full-width">
-      <input matInput placeholder="First name">
+      <mat-label>First name</mat-label>
+      <input matInput>
     </mat-form-field></td>
     <td><mat-form-field class="example-full-width">
-      <input matInput placeholder="Long Last Name That Will Be Truncated">
+      <mat-label>Long Last Name That Will Be Truncated</mat-label>
+      <input matInput>
     </mat-form-field></td>
   </tr></table>
 
   <p>
     <mat-form-field class="example-full-width">
-      <textarea matInput placeholder="Address">1600 Amphitheatre Pkwy</textarea>
+      <mat-label>Address</mat-label>
+      <textarea matInput placeholder="Ex. 100 Main St">1600 Amphitheatre Pkwy</textarea>
     </mat-form-field>
     <mat-form-field class="example-full-width">
-      <textarea matInput placeholder="Address 2"></textarea>
+      <mat-label>Address 2</mat-label>
+      <textarea matInput></textarea>
     </mat-form-field>
   </p>
 
   <table class="example-full-width" cellspacing="0"><tr>
     <td><mat-form-field class="example-full-width">
-      <input matInput placeholder="City">
+      <mat-label>City</mat-label>
+      <input matInput placeholder="Ex. San Francisco">
     </mat-form-field></td>
     <td><mat-form-field class="example-full-width">
-      <input matInput placeholder="State">
+      <mat-label>State</mat-label>
+      <input matInput placeholder="Ex. California">
     </mat-form-field></td>
     <td><mat-form-field class="example-full-width">
-      <input matInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
+      <mat-label>Postal Code</mat-label>
+      <input matInput #postalCode maxlength="5" placeholder="Ex. 94105" value="94043">
       <mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
     </mat-form-field></td>
   </tr></table>

src/components-examples/material/input/input-hint/input-hint-example.html

@@ -1,9 +1,8 @@
 <form class="example-form">
-
   <mat-form-field class="example-full-width">
-    <input matInput #message maxlength="256" placeholder="Message">
+    <mat-label>Message</mat-label>
+    <input matInput #message maxlength="256" placeholder="Ex. I need help with...">
     <mat-hint align="start"><strong>Don't disclose personal info</strong> </mat-hint>
     <mat-hint align="end">{{message.value.length}} / 256</mat-hint>
   </mat-form-field>
-
 </form>

src/components-examples/material/input/input-overview/input-overview-example.html

@@ -1,9 +1,11 @@
 <form class="example-form">
   <mat-form-field class="example-full-width">
-    <input matInput placeholder="Favorite food" value="Sushi">
+    <mat-label>Favorite food</mat-label>
+    <input matInput placeholder="Ex. Pizza" value="Sushi">
   </mat-form-field>
 
   <mat-form-field class="example-full-width">
-    <textarea matInput placeholder="Leave a comment"></textarea>
+    <mat-label>Leave a comment</mat-label>
+    <textarea matInput placeholder="Ex. It makes me feel..."></textarea>
   </mat-form-field>
 </form>

src/components-examples/material/input/input-prefix-suffix/input-prefix-suffix-example.html

@@ -1,9 +1,8 @@
 <form class="example-form">
-
   <mat-form-field class="example-full-width">
+    <mat-label>Telephone</mat-label>
     <span matPrefix>+1 &nbsp;</span>
-    <input type="tel" matInput placeholder="Telephone">
+    <input type="tel" matInput placeholder="555-555-1234">
     <mat-icon matSuffix>mode_edit</mat-icon>
   </mat-form-field>
-
 </form>