docs: explicitly set form field appearance (#22837)

Currently the default form field appearance is `legacy`, but we switch it to `fill` only in Stackblitz since that's what we want to change the default to eventually. The problem with this approach is that the default is only changed on Stackblitz, not the docs site that user has to go through.

These changes set the appearance to `fill` explicitly so that it is consistent.

Author: crisbeto

src/components-examples/cdk/a11y/focus-monitor-focus-via/focus-monitor-focus-via-example.html

@@ -3,7 +3,7 @@
   <button #unmonitored>2. Not Monitored</button>
 </div>
 
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Simulated focus origin</mat-label>
   <mat-select #simulatedOrigin value="mouse">
     <mat-option value="mouse">Mouse</mat-option>

src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.html

@@ -1,10 +1,10 @@
 <form (submit)="$event.preventDefault()">
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>First name</mat-label>
     <input matInput (cdkAutofill)="firstNameAutofilled = $event.isAutofilled">
     <mat-hint *ngIf="firstNameAutofilled">Autofilled!</mat-hint>
   </mat-form-field>
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>Last name</mat-label>
     <input matInput (cdkAutofill)="lastNameAutofilled = $event.isAutofilled">
     <mat-hint *ngIf="lastNameAutofilled">Autofilled!</mat-hint>

src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.html

@@ -1,10 +1,10 @@
 <form (submit)="$event.preventDefault()">
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>First name</mat-label>
     <input matInput #first>
     <mat-hint *ngIf="firstNameAutofilled">Autofilled!</mat-hint>
   </mat-form-field>
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>Last name</mat-label>
     <input matInput #last>
     <mat-hint *ngIf="lastNameAutofilled">Autofilled!</mat-hint>

src/components-examples/cdk/text-field/text-field-autosize-textarea/text-field-autosize-textarea-example.html

@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Font size</mat-label>
   <mat-select #fontSize value="16px" (selectionChange)="triggerResize()">
     <mat-option value="10px">10px</mat-option>
@@ -10,7 +10,7 @@
   </mat-select>
 </mat-form-field>
 
-<mat-form-field [style.fontSize]="fontSize.value">
+<mat-form-field [style.fontSize]="fontSize.value" appearance="fill">
   <mat-label>Autosize textarea</mat-label>
   <textarea matInput
             cdkTextareaAutosize

src/components-examples/material-experimental/mdc-form-field/mdc-form-field-custom-control/form-field-custom-control-example.html

@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Phone number</mat-label>
   <example-tel-input required></example-tel-input>
   <mat-icon matSuffix>phone</mat-icon>

src/components-examples/material-experimental/popover-edit/popover-edit-cell-span-mat-table/popover-edit-cell-span-mat-table-example.html

@@ -7,15 +7,15 @@
           [matEditLensPreservedFormValue]="preservedValues.get(ctx.person)"
           (matEditLensPreservedFormValueChange)="preservedValues.set(ctx.person, $event)">
         <div mat-edit-content class="example-input-container">
-          <mat-form-field>
+          <mat-form-field appearance="fill">
             <input matInput [ngModel]="ctx.person.firstName" name="firstName" required
                 [attr.cdkFocusInitial]="ctx.focus === 'firstName' || null">
           </mat-form-field>
-          <mat-form-field>
+          <mat-form-field appearance="fill">
             <input matInput [ngModel]="ctx.person.middleName" name="middleName"
                 [attr.cdkFocusInitial]="ctx.focus === 'middleName' || null">
           </mat-form-field>
-          <mat-form-field>
+          <mat-form-field appearance="fill">
             <input matInput [ngModel]="ctx.person.lastName" name="lastName" required
                 [attr.cdkFocusInitial]="ctx.focus === 'lastName' || null">
           </mat-form-field>

src/components-examples/material-experimental/popover-edit/popover-edit-mat-table-flex/popover-edit-mat-table-flex-example.html

@@ -11,7 +11,7 @@
           [matEditLensPreservedFormValue]="preservedWeightValues.get(element)"
           (matEditLensPreservedFormValueChange)="preservedWeightValues.set(element, $event)">
         <div mat-edit-content>
-          <mat-form-field>
+          <mat-form-field appearance="fill">
             <input matInput type="number" [ngModel]="element.weight" name="weight" required>
           </mat-form-field>
         </div>
@@ -31,7 +31,7 @@
     <mat-cell *matCellDef="let element"
         [matPopoverEdit]="nameEdit">
       {{element.name}}
-      
+
       <!-- This edit is defined in the cell and can implicitly access element -->
       <ng-template #nameEdit>
         <div>
@@ -42,7 +42,7 @@
               (matEditLensPreservedFormValueChange)="preservedNameValues.set(element, $event)">
             <h2 mat-edit-title>Name</h2>
             <div mat-edit-content>
-              <mat-form-field>
+              <mat-form-field appearance="fill">
                 <input matInput [ngModel]="element.name" name="name" required>
               </mat-form-field>
             </div>
@@ -67,7 +67,7 @@ <h2 mat-edit-title>Name</h2>
     <mat-cell *matCellDef="let element"
         [matPopoverEdit]="weightEdit" [matPopoverEditContext]="element">
       {{element.weight}}
-      
+
       <span *matRowHoverContent>
         <button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
       </span>

src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.html

@@ -10,7 +10,7 @@
           (ngSubmit)="onSubmitWeight(element, f)"
           [(matEditLensPreservedFormValue)]="weightValues.for(element).value">
         <div mat-edit-content>
-          <mat-form-field>
+          <mat-form-field appearance="fill">
             <input matInput type="number" [ngModel]="element.weight" name="weight" required>
           </mat-form-field>
         </div>
@@ -47,7 +47,7 @@
         [matPopoverEdit]="nameEdit"
         [matPopoverEditDisabled]="!nameEditEnabled">
       {{element.name}}
-      
+
       <!-- This edit is defined in the cell and can implicitly access element -->
       <ng-template #nameEdit>
         <div>
@@ -57,7 +57,7 @@
               [(matEditLensPreservedFormValue)]="nameValues.for(element).value">
             <h2 mat-edit-title>Name</h2>
             <div mat-edit-content>
-              <mat-form-field>
+              <mat-form-field appearance="fill">
                 <input matInput [ngModel]="element.name" name="name" required>
               </mat-form-field>
             </div>
@@ -121,7 +121,7 @@ <h2 mat-edit-title>Name</h2>
     <td mat-cell *matCellDef="let element"
         [matPopoverEdit]="weightEdit" [matPopoverEditContext]="element">
       {{element.weight}}
-      
+
       <span *matRowHoverContent>
         <button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
       </span>

src/components-examples/material-experimental/popover-edit/popover-edit-tab-out-mat-table/popover-edit-tab-out-mat-table-example.html

@@ -12,7 +12,7 @@
           [matEditLensPreservedFormValue]="preservedWeightValues.get(element)"
           (matEditLensPreservedFormValueChange)="preservedWeightValues.set(element, $event)">
         <div mat-edit-content>
-          <mat-form-field>
+          <mat-form-field appearance="fill">
             <input matInput type="number" [ngModel]="element.weight" name="weight" required>
           </mat-form-field>
         </div>
@@ -33,7 +33,7 @@
         [matPopoverEdit]="nameEdit" matPopoverEditTabOut
         matEditOpen>
       {{element.name}}
-      
+
       <!-- This edit is defined in the cell and can implicitly access element -->
       <ng-template #nameEdit>
         <div>
@@ -44,7 +44,7 @@
               [matEditLensPreservedFormValue]="preservedNameValues.get(element)"
               (matEditLensPreservedFormValueChange)="preservedNameValues.set(element, $event)">
             <div mat-edit-content>
-              <mat-form-field>
+              <mat-form-field appearance="fill">
                 <input matInput [ngModel]="element.name" name="name" required>
               </mat-form-field>
             </div>
@@ -66,7 +66,7 @@
         [matPopoverEditContext]="element"
         matEditOpen>
       {{element.weight}}
-      
+
       <span *matRowHoverContent>
         <mat-icon>edit</mat-icon>
       </span>

src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html

@@ -1,5 +1,5 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field class="example-full-width" appearance="fill">
     <mat-label>Number</mat-label>
     <input type="text"
            placeholder="Pick one"

src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.html

@@ -1,5 +1,5 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field class="example-full-width" appearance="fill">
     <mat-label>Assignee</mat-label>
     <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
     <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">

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

@@ -1,5 +1,5 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field class="example-full-width" appearance="fill">
     <mat-label>Number</mat-label>
     <input type="text"
            placeholder="Pick one"

src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.html

@@ -1,5 +1,5 @@
 <form [formGroup]="stateForm">
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>States Group</mat-label>
     <input type="text"
            matInput

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

@@ -1,5 +1,5 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field class="example-full-width" appearance="fill">
     <mat-label>State</mat-label>
     <input matInput
            aria-label="State"

src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.html

@@ -1,5 +1,5 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field class="example-full-width" appearance="fill">
     <mat-label>Number</mat-label>
 <!-- #docregion input -->
     <input type="text"

src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.html

@@ -1,4 +1,4 @@
-<mat-form-field class="example-chip-list">
+<mat-form-field class="example-chip-list" appearance="fill">
   <mat-label>Favorite Fruits</mat-label>
   <mat-chip-list #chipList aria-label="Fruit selection">
     <mat-chip

src/components-examples/material/chips/chips-form-control/chips-form-control-example.html

@@ -7,7 +7,7 @@
   Selected keywords: {{formControl.value}}
 </p>
 
-<mat-form-field class="example-chip-list">
+<mat-form-field class="example-chip-list" appearance="fill">
   <mat-label>Video keywords</mat-label>
   <mat-chip-list #chipList aria-label="Video keywords" multiple [formControl]="formControl">
     <mat-chip

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

@@ -1,4 +1,4 @@
-<mat-form-field class="example-chip-list">
+<mat-form-field class="example-chip-list" appearance="fill">
   <mat-label>Favorite Fruits</mat-label>
   <mat-chip-list #chipList aria-label="Fruit selection">
     <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"

src/components-examples/material/core/ripple-overview/ripple-overview-example.html

@@ -2,10 +2,10 @@
 <mat-checkbox [(ngModel)]="disabled" class="example-ripple-checkbox">Disabled</mat-checkbox>
 <mat-checkbox [(ngModel)]="unbounded" class="example-ripple-checkbox">Unbounded</mat-checkbox>
 
-<mat-form-field class="example-ripple-form-field">
+<mat-form-field class="example-ripple-form-field" appearance="fill">
   <input matInput [(ngModel)]="radius" type="number" placeholder="Radius">
 </mat-form-field>
-<mat-form-field class="example-ripple-form-field">
+<mat-form-field class="example-ripple-form-field" appearance="fill">
   <input matInput [(ngModel)]="color" type="text" placeholder="Color">
 </mat-form-field>
 

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

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

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

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

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

@@ -16,12 +16,12 @@
       </mat-panel-description>
     </mat-expansion-panel-header>
 
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <mat-label>First name</mat-label>
       <input matInput>
     </mat-form-field>
 
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <mat-label>Age</mat-label>
       <input matInput type="number" min="1">
     </mat-form-field>
@@ -40,7 +40,7 @@
       </mat-panel-description>
     </mat-expansion-panel-header>
 
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <mat-label>Country</mat-label>
       <input matInput>
     </mat-form-field>
@@ -57,7 +57,7 @@
       </mat-panel-description>
     </mat-expansion-panel-header>
 
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <mat-label>Date</mat-label>
       <input matInput [matDatepicker]="picker" (focus)="picker.open()" readonly>
     </mat-form-field>

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

@@ -10,12 +10,12 @@
       </mat-panel-description>
     </mat-expansion-panel-header>
 
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <mat-label>First name</mat-label>
       <input matInput>
     </mat-form-field>
 
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <mat-label>Age</mat-label>
       <input matInput type="number" min="1">
     </mat-form-field>
@@ -37,7 +37,7 @@
       </mat-panel-description>
     </mat-expansion-panel-header>
 
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <mat-label>Country</mat-label>
       <input matInput>
     </mat-form-field>
@@ -59,7 +59,7 @@
       </mat-panel-description>
     </mat-expansion-panel-header>
 
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <mat-label>Date</mat-label>
       <input matInput [matDatepicker]="picker" (focus)="picker.open()" readonly>
     </mat-form-field>

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

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

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

@@ -1,5 +1,5 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field class="example-full-width" appearance="fill">
     <mat-label>Email</mat-label>
     <input type="email" matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher"
            placeholder="Ex. [email protected]">

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

@@ -1,5 +1,5 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field class="example-full-width" appearance="fill">
     <mat-label>Email</mat-label>
     <input type="email" matInput [formControl]="emailFormControl" placeholder="Ex. [email protected]">
     <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">