docs: clean up explicit form field appearance (#27103)

In #22837 we had to add `appearance="fill"` to all the examples to ensure a consistent appearance between the docs site and Stackblitz during the MDC transition. Now that the MDC components are the default, we don't need the explicit `appearance` anymore since `fill` is the default.

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 appearance="fill">
+<mat-form-field>
   <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 appearance="fill">
+  <mat-form-field>
     <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 appearance="fill">
+  <mat-form-field>
     <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 appearance="fill">
+  <mat-form-field>
     <mat-label>First name</mat-label>
     <input matInput #first>
     <mat-hint *ngIf="firstNameAutofilled">Autofilled!</mat-hint>
   </mat-form-field>
-  <mat-form-field appearance="fill">
+  <mat-form-field>
     <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 appearance="fill">
+<mat-form-field>
   <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" appearance="fill">
+<mat-form-field [style.fontSize]="fontSize.value">
   <mat-label>Autosize textarea</mat-label>
   <textarea matInput
             cdkTextareaAutosize

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 appearance="fill">
+          <mat-form-field>
             <input matInput [ngModel]="ctx.person.firstName" name="firstName" required
                 [attr.cdkFocusInitial]="ctx.focus === 'firstName' || null">
           </mat-form-field>
-          <mat-form-field appearance="fill">
+          <mat-form-field>
             <input matInput [ngModel]="ctx.person.middleName" name="middleName"
                 [attr.cdkFocusInitial]="ctx.focus === 'middleName' || null">
           </mat-form-field>
-          <mat-form-field appearance="fill">
+          <mat-form-field>
             <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 appearance="fill">
+          <mat-form-field>
             <input matInput type="number" [ngModel]="element.weight" name="weight" required>
           </mat-form-field>
         </div>
@@ -42,7 +42,7 @@
               (matEditLensPreservedFormValueChange)="preservedNameValues.set(element, $event)">
             <h2 mat-edit-title>Name</h2>
             <div mat-edit-content>
-              <mat-form-field appearance="fill">
+              <mat-form-field>
                 <input matInput [ngModel]="element.name" name="name" required>
               </mat-form-field>
             </div>

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 appearance="fill">
+          <mat-form-field>
             <input matInput type="number" [ngModel]="element.weight" name="weight" required>
           </mat-form-field>
         </div>
@@ -57,7 +57,7 @@
               [(matEditLensPreservedFormValue)]="nameValues.for(element).value">
             <h2 mat-edit-title>Name</h2>
             <div mat-edit-content>
-              <mat-form-field appearance="fill">
+              <mat-form-field>
                 <input matInput [ngModel]="element.name" name="name" required>
               </mat-form-field>
             </div>

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 appearance="fill">
+          <mat-form-field>
             <input matInput type="number" [ngModel]="element.weight" name="weight" required>
           </mat-form-field>
         </div>
@@ -44,7 +44,7 @@
               [matEditLensPreservedFormValue]="preservedNameValues.get(element)"
               (matEditLensPreservedFormValueChange)="preservedNameValues.set(element, $event)">
             <div mat-edit-content>
-              <mat-form-field appearance="fill">
+              <mat-form-field>
                 <input matInput [ngModel]="element.name" name="name" required>
               </mat-form-field>
             </div>

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" appearance="fill">
+  <mat-form-field class="example-full-width">
     <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" appearance="fill">
+  <mat-form-field class="example-full-width">
     <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" appearance="fill">
+  <mat-form-field class="example-full-width">
     <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 appearance="fill">
+  <mat-form-field>
     <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" appearance="fill">
+  <mat-form-field class="example-full-width">
     <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" appearance="fill">
+  <mat-form-field class="example-full-width">
     <mat-label>Number</mat-label>
 <!-- #docregion input -->
     <input type="text"

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

@@ -1,5 +1,5 @@
 <form>
-  <mat-form-field class="example-chip-list" appearance="fill">
+  <mat-form-field class="example-chip-list">
     <mat-label>Favorite Fruits</mat-label>
     <mat-chip-grid #chipGrid aria-label="Fruit selection">
       <mat-chip-row *ngFor="let fruit of fruits" (removed)="remove(fruit)">

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

@@ -5,7 +5,7 @@
 <p>
   <i>Enter video keywords</i>
 </p>
-<mat-form-field appearance="fill" class="example-form-field">
+<mat-form-field class="example-form-field">
   <mat-label>Video keywords</mat-label>
   <mat-chip-grid #chipGrid aria-label="Enter keywords" [formControl]="formControl" >
     <mat-chip-row *ngFor="let keyword of keywords" (removed)="removeKeyword(keyword)">
@@ -22,4 +22,4 @@
 
 <p>
   <b>The following keywords are entered:</b> {{formControl.value}}
-</p>
+</p>

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

@@ -1,4 +1,4 @@
-<mat-form-field class="example-chip-list" appearance="fill">
+<mat-form-field class="example-chip-list">
   <mat-label>Favorite Fruits</mat-label>
   <mat-chip-grid #chipGrid aria-label="Enter fruits">
     <mat-chip-row *ngFor="let fruit of fruits"
@@ -17,4 +17,4 @@
            [matChipInputAddOnBlur]="addOnBlur"
            (matChipInputTokenEnd)="add($event)"/>
   </mat-chip-grid>
-</mat-form-field>
+</mat-form-field>

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

@@ -2,11 +2,11 @@
 <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" appearance="fill">
+<mat-form-field class="example-ripple-form-field">
   <mat-label>Radius</mat-label>
   <input matInput [(ngModel)]="radius" type="number">
 </mat-form-field>
-<mat-form-field class="example-ripple-form-field" appearance="fill">
+<mat-form-field class="example-ripple-form-field">
   <mat-label>Color</mat-label>
   <input matInput [(ngModel)]="color" type="text">
 </mat-form-field>

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" appearance="fill">
+<mat-form-field class="example-form-field">
   <mat-label>First campaign</mat-label>
   <mat-date-range-input
     [formGroup]="campaignOne"
@@ -13,7 +13,7 @@
   <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
 </mat-form-field>
 
-<mat-form-field class="example-form-field" appearance="fill">
+<mat-form-field class="example-form-field">
   <mat-label>Second campaign</mat-label>
   <mat-date-range-input
     [formGroup]="campaignTwo"

src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.html

@@ -1,4 +1,4 @@
-<mat-form-field appearance="fill">
+<mat-form-field>
   <mat-label>Enter a date range</mat-label>
   <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
     <input matStartDate formControlName="start" placeholder="Start date">

src/components-examples/material/datepicker/date-range-picker-overview/date-range-picker-overview-example.html

@@ -1,4 +1,4 @@
-<mat-form-field appearance="fill">
+<mat-form-field>
   <mat-label>Enter a date range</mat-label>
   <mat-date-range-input [rangePicker]="picker">
     <input matStartDate placeholder="Start date">

src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.html

@@ -1,4 +1,4 @@
-<mat-form-field appearance="fill">
+<mat-form-field>
   <mat-label>Enter a date range</mat-label>
   <mat-date-range-input [rangePicker]="picker">
     <input matStartDate placeholder="Start date">

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

@@ -1,4 +1,4 @@
-<mat-form-field appearance="fill" class="example-form-field">
+<mat-form-field class="example-form-field">
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="datepicker">
   <mat-hint>MM/DD/YYYY</mat-hint>
@@ -13,7 +13,7 @@
 <!-- #enddocregion datepicker-actions -->
 </mat-form-field>
 
-<mat-form-field appearance="fill" class="example-form-field">
+<mat-form-field class="example-form-field">
   <mat-label>Enter a date range</mat-label>
   <mat-date-range-input [rangePicker]="rangePicker">
     <input matStartDate placeholder="Start date">

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

@@ -1,4 +1,4 @@
-<mat-form-field class="example-full-width" appearance="fill">
+<mat-form-field class="example-full-width">
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>

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

@@ -1,12 +1,12 @@
-<mat-form-field color="accent" appearance="fill">
+<mat-form-field color="accent">
   <mat-label>Inherited calendar color</mat-label>
   <input matInput [matDatepicker]="picker1">
   <mat-hint>MM/DD/YYYY</mat-hint>
   <mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
   <mat-datepicker #picker1></mat-datepicker>
 </mat-form-field>
 
-<mat-form-field color="accent" appearance="fill">
+<mat-form-field color="accent">
   <mat-label>Custom calendar color</mat-label>
   <input matInput [matDatepicker]="picker2">
   <mat-hint>MM/DD/YYYY</mat-hint>

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

@@ -1,4 +1,4 @@
-<mat-form-field appearance="fill">
+<mat-form-field>
   <mat-label>Custom calendar header</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>

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

@@ -1,4 +1,4 @@
-<mat-form-field class="example-full-width" appearance="fill">
+<mat-form-field class="example-full-width">
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>

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

@@ -1,4 +1,4 @@
-<mat-form-field class="example-full-width" appearance="fill">
+<mat-form-field class="example-full-width">
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>

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

@@ -1,5 +1,5 @@
 <p>
-  <mat-form-field appearance="fill">
+  <mat-form-field>
     <mat-label>Completely disabled</mat-label>
     <input matInput [matDatepicker]="dp1" disabled>
     <mat-hint>MM/DD/YYYY</mat-hint>
@@ -9,7 +9,7 @@
 </p>
 
 <p>
-  <mat-form-field appearance="fill">
+  <mat-form-field>
     <mat-label>Popup disabled</mat-label>
     <input matInput [matDatepicker]="dp2">
     <mat-hint>MM/DD/YYYY</mat-hint>
@@ -19,7 +19,7 @@
 </p>
 
 <p>
-  <mat-form-field appearance="fill">
+  <mat-form-field>
     <mat-label>Input disabled</mat-label>
     <input matInput [matDatepicker]="dp3" disabled>
     <mat-hint>MM/DD/YYYY</mat-hint>

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

@@ -1,4 +1,4 @@
-<mat-form-field appearance="fill">
+<mat-form-field>
   <mat-label>Input & change events</mat-label>
   <input matInput [matDatepicker]="picker"
          (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">

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

@@ -1,4 +1,4 @@
-<mat-form-field class="example-full-width" appearance="fill">
+<mat-form-field class="example-full-width">
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>

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

@@ -1,4 +1,4 @@
-<mat-form-field appearance="fill">
+<mat-form-field>
   <mat-label>Verbose datepicker</mat-label>
   <input matInput [matDatepicker]="dp" [formControl]="date">
   <mat-hint>MMMM DD, YYYY</mat-hint>

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

@@ -1,4 +1,4 @@
-<mat-form-field appearance="fill">
+<mat-form-field>
   <mat-label>Different locale</mat-label>
   <input matInput [matDatepicker]="dp">
   <mat-hint>{{getDateFormatString()}}</mat-hint>

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

@@ -1,4 +1,4 @@
-<mat-form-field class="example-full-width" appearance="fill">
+<mat-form-field class="example-full-width">
   <mat-label>Choose a date</mat-label>
   <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>

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

@@ -1,4 +1,4 @@
-<mat-form-field appearance="fill">
+<mat-form-field>
   <mat-label>Moment.js datepicker</mat-label>
   <input matInput [matDatepicker]="dp" [formControl]="date">
   <mat-hint>MM/DD/YYYY</mat-hint>

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

@@ -1,4 +1,4 @@
-<mat-form-field appearance="fill">
+<mat-form-field>
   <mat-label>Choose a date</mat-label>
 <!-- #docregion toggle -->
   <input matInput [matDatepicker]="picker">

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

@@ -1,4 +1,4 @@
-<mat-form-field appearance="fill">
+<mat-form-field>
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>

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

@@ -1,4 +1,4 @@
-<mat-form-field class="example-full-width" appearance="fill">
+<mat-form-field class="example-full-width">
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>