docs(select): switch examples to fill appearance (#19708)

Changes all of the `mat-select` examples to use a `mat-form-field` appearance that won't be deprecated in the future.

Author: crisbeto

src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.html

@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Toppings</mat-label>
   <mat-select [formControl]="toppings" multiple>
     <mat-select-trigger>

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

@@ -3,7 +3,7 @@
 </p>
 
 <h4>mat-select</h4>
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Choose an option</mat-label>
   <mat-select [disabled]="disableSelect.value">
     <mat-option value="option1">Option 1</mat-option>
@@ -13,7 +13,7 @@ <h4>mat-select</h4>
 </mat-form-field>
 
 <h4>native html select</h4>
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Choose an option</mat-label>
   <select matNativeControl [disabled]="disableSelect.value">
     <option value="" selected></option>

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

@@ -1,5 +1,5 @@
 <h4>mat-select</h4>
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Choose one</mat-label>
   <mat-select [formControl]="selected" [errorStateMatcher]="matcher">
     <mat-option>Clear</mat-option>
@@ -14,7 +14,7 @@ <h4>mat-select</h4>
 </mat-form-field>
 
 <h4>native html select</h4>
-<mat-form-field class="demo-full-width">
+<mat-form-field class="demo-full-width" appearance="fill">
   <mat-label>Choose one</mat-label>
   <select matNativeControl [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
     <option value=""></option>

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

@@ -1,6 +1,6 @@
 <form>
   <h4>mat-select</h4>
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>Favorite food</mat-label>
     <mat-select [(ngModel)]="selectedValue" name="food">
       <mat-option *ngFor="let food of foods" [value]="food.value">
@@ -10,7 +10,7 @@ <h4>mat-select</h4>
   </mat-form-field>
   <p> Selected food: {{selectedValue}} </p>
   <h4>native html select</h4>
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>Favorite car</mat-label>
     <select matNativeControl [(ngModel)]="selectedCar" name="car">
       <option value="" selected></option>

src/components-examples/material/select/select-hint-error/select-hint-error-example.html

@@ -1,5 +1,5 @@
 <h4>mat select</h4>
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Favorite animal</mat-label>
   <mat-select [formControl]="animalControl" required>
     <mat-option>--</mat-option>
@@ -12,7 +12,7 @@ <h4>mat select</h4>
 </mat-form-field>
 
 <h4>native html select</h4>
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Select your car (required)</mat-label>
   <select matNativeControl required [formControl]="selectFormControl">
     <option label="--select something --"></option>

src/components-examples/material/select/select-initial-value/select-initial-value-example.html

@@ -1,5 +1,5 @@
 <h4>Basic mat-select with initial value</h4>
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Favorite Food</mat-label>
   <mat-select [(value)]="selectedFood">
     <mat-option></mat-option>
@@ -9,7 +9,7 @@ <h4>Basic mat-select with initial value</h4>
 <p>You selected: {{selectedFood}}</p>
 
 <h4>Basic native select with initial value</h4>
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Favorite Car</mat-label>
   <select matNativeControl (change)="selectCar($event)">
     <option value=""></option>

src/components-examples/material/select/select-multiple/select-multiple-example.html

@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Toppings</mat-label>
   <mat-select [formControl]="toppings" multiple>
     <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>

src/components-examples/material/select/select-no-ripple/select-no-ripple-example.html

@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Select an option</mat-label>
   <mat-select disableRipple>
     <mat-option value="1">Option 1</mat-option>

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

@@ -1,5 +1,5 @@
 <h4>mat-select</h4>
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Pokemon</mat-label>
   <mat-select [formControl]="pokemonControl">
     <mat-option>-- None --</mat-option>
@@ -13,7 +13,7 @@ <h4>mat-select</h4>
 </mat-form-field>
 
 <h4>native html select</h4>
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Cars</mat-label>
   <select matNativeControl>
     <optgroup label="Swedish Cars">

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

@@ -1,5 +1,5 @@
 <h4>Basic mat-select</h4>
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Favorite food</mat-label>
   <mat-select>
     <mat-option *ngFor="let food of foods" [value]="food.value">
@@ -9,7 +9,7 @@ <h4>Basic mat-select</h4>
 </mat-form-field>
 
 <h4>Basic native select</h4>
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Cars</mat-label>
   <select matNativeControl required>
     <option value="volvo">Volvo</option>

src/components-examples/material/select/select-panel-class/select-panel-class-example.html

@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Panel color</mat-label>
   <mat-select [formControl]="panelColor"
               panelClass="example-panel-{{panelColor.value}}">

src/components-examples/material/select/select-reactive-form/select-reactive-form-example.html

@@ -1,6 +1,6 @@
 <form [formGroup]="form">
   <h4>mat-select</h4>
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>Favorite Food</mat-label>
     <mat-select [formControl]="foodControl" name="food">
       <mat-option>None</mat-option>
@@ -11,7 +11,7 @@ <h4>mat-select</h4>
   </mat-form-field>
   <p>Selected: {{foodControl.value}}</p>
   <h4>Native select</h4>
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>Favorite Car</mat-label>
     <select matNativeControl [formControl]="carControl" name="car">
       <option value="">None</option>

src/components-examples/material/select/select-reset/select-reset-example.html

@@ -1,5 +1,5 @@
 <h4>mat-select</h4>
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>State</mat-label>
   <mat-select>
     <mat-option>None</mat-option>
@@ -8,7 +8,7 @@ <h4>mat-select</h4>
 </mat-form-field>
 
 <h4>native html select</h4>
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Select your car</mat-label>
   <select matNativeControl id="mySelectId">
     <option value="" disabled selected></option>

src/components-examples/material/select/select-value-binding/select-value-binding-example.html

@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Select an option</mat-label>
   <mat-select [(value)]="selected">
     <mat-option>None</mat-option>