From 4308e98d2731a2e6442e60dbe6a7e5ce0d296bca Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 21 Jun 2020 09:33:30 +0200
Subject: [PATCH] docs(select): switch examples to fill appearance

Changes all of the `mat-select` examples to use a `mat-form-field` appearance that won't be deprecated in the future.
---
 .../select-custom-trigger/select-custom-trigger-example.html  | 2 +-
 .../select/select-disabled/select-disabled-example.html       | 4 ++--
 .../select-error-state-matcher-example.html                   | 4 ++--
 .../material/select/select-form/select-form-example.html      | 4 ++--
 .../select/select-hint-error/select-hint-error-example.html   | 4 ++--
 .../select-initial-value/select-initial-value-example.html    | 4 ++--
 .../select/select-multiple/select-multiple-example.html       | 2 +-
 .../select/select-no-ripple/select-no-ripple-example.html     | 2 +-
 .../select/select-optgroup/select-optgroup-example.html       | 4 ++--
 .../select/select-overview/select-overview-example.html       | 4 ++--
 .../select/select-panel-class/select-panel-class-example.html | 2 +-
 .../select-reactive-form/select-reactive-form-example.html    | 4 ++--
 .../material/select/select-reset/select-reset-example.html    | 4 ++--
 .../select-value-binding/select-value-binding-example.html    | 2 +-
 14 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.html b/src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.html
index 5699c30cbd0f..3bf98e65ee5f 100644
--- a/src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.html
+++ b/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>
diff --git a/src/components-examples/material/select/select-disabled/select-disabled-example.html b/src/components-examples/material/select/select-disabled/select-disabled-example.html
index d436c80ce749..7de0f20b7b72 100644
--- a/src/components-examples/material/select/select-disabled/select-disabled-example.html
+++ b/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>
diff --git a/src/components-examples/material/select/select-error-state-matcher/select-error-state-matcher-example.html b/src/components-examples/material/select/select-error-state-matcher/select-error-state-matcher-example.html
index 9e5f17b1a027..75866b6156d8 100644
--- a/src/components-examples/material/select/select-error-state-matcher/select-error-state-matcher-example.html
+++ b/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>
diff --git a/src/components-examples/material/select/select-form/select-form-example.html b/src/components-examples/material/select/select-form/select-form-example.html
index f2b02b6a4e56..d7cdf667c6cd 100644
--- a/src/components-examples/material/select/select-form/select-form-example.html
+++ b/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>
diff --git a/src/components-examples/material/select/select-hint-error/select-hint-error-example.html b/src/components-examples/material/select/select-hint-error/select-hint-error-example.html
index d10b0d422ea4..51217bddf15c 100644
--- a/src/components-examples/material/select/select-hint-error/select-hint-error-example.html
+++ b/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>
diff --git a/src/components-examples/material/select/select-initial-value/select-initial-value-example.html b/src/components-examples/material/select/select-initial-value/select-initial-value-example.html
index a1cf4d269b7a..fb377da7fab1 100644
--- a/src/components-examples/material/select/select-initial-value/select-initial-value-example.html
+++ b/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>
diff --git a/src/components-examples/material/select/select-multiple/select-multiple-example.html b/src/components-examples/material/select/select-multiple/select-multiple-example.html
index 2f617c7221fc..786f4afe3d61 100644
--- a/src/components-examples/material/select/select-multiple/select-multiple-example.html
+++ b/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>
diff --git a/src/components-examples/material/select/select-no-ripple/select-no-ripple-example.html b/src/components-examples/material/select/select-no-ripple/select-no-ripple-example.html
index 4c722ae6eeb2..0001770ef410 100644
--- a/src/components-examples/material/select/select-no-ripple/select-no-ripple-example.html
+++ b/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>
diff --git a/src/components-examples/material/select/select-optgroup/select-optgroup-example.html b/src/components-examples/material/select/select-optgroup/select-optgroup-example.html
index 6482720884ee..161301bffb64 100644
--- a/src/components-examples/material/select/select-optgroup/select-optgroup-example.html
+++ b/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">
diff --git a/src/components-examples/material/select/select-overview/select-overview-example.html b/src/components-examples/material/select/select-overview/select-overview-example.html
index d7df8280eee0..0f5efa6ae66f 100644
--- a/src/components-examples/material/select/select-overview/select-overview-example.html
+++ b/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>
diff --git a/src/components-examples/material/select/select-panel-class/select-panel-class-example.html b/src/components-examples/material/select/select-panel-class/select-panel-class-example.html
index 1e48e43be26d..e04a35c87023 100644
--- a/src/components-examples/material/select/select-panel-class/select-panel-class-example.html
+++ b/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}}">
diff --git a/src/components-examples/material/select/select-reactive-form/select-reactive-form-example.html b/src/components-examples/material/select/select-reactive-form/select-reactive-form-example.html
index cd7458a8e5af..55ca07ee7fec 100644
--- a/src/components-examples/material/select/select-reactive-form/select-reactive-form-example.html
+++ b/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>
diff --git a/src/components-examples/material/select/select-reset/select-reset-example.html b/src/components-examples/material/select/select-reset/select-reset-example.html
index e0f734507aab..7faddfba0572 100644
--- a/src/components-examples/material/select/select-reset/select-reset-example.html
+++ b/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>
diff --git a/src/components-examples/material/select/select-value-binding/select-value-binding-example.html b/src/components-examples/material/select/select-value-binding/select-value-binding-example.html
index 061c1851e3b5..8ddd9e7b3e6a 100644
--- a/src/components-examples/material/select/select-value-binding/select-value-binding-example.html
+++ b/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>