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"