docs(form-field): examples should use fill appearance by default (#18222)

- stop using the soon to be deprecated legacy appearance by default

Fixes #14792

(cherry picked from commit 3168e94)

Author: Splaktar

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

@@ -1,5 +1,6 @@
-<mat-form-field>
-  <example-tel-input placeholder="Phone number" required></example-tel-input>
+<mat-form-field appearance="fill">
+  <mat-label>Phone number</mat-label>
+  <example-tel-input required></example-tel-input>
   <mat-icon matSuffix>phone</mat-icon>
   <mat-hint>Include area code</mat-hint>
 </mat-form-field>

src/components-examples/material/form-field/form-field-error/form-field-error-example.css

@@ -1,8 +1,3 @@
-.example-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.example-container > * {
-  width: 100%;
+.example-container .mat-form-field + .mat-form-field {
+  margin-left: 8px;
 }

src/components-examples/material/form-field/form-field-error/form-field-error-example.html

@@ -1,6 +1,7 @@
 <div class="example-container">
-  <mat-form-field>
-    <input matInput placeholder="Enter your email" [formControl]="email" required>
+  <mat-form-field appearance="fill">
+    <mat-label>Enter your email</mat-label>
+    <input matInput placeholder="[email protected]" [formControl]="email" required>
     <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
   </mat-form-field>
 </div>

src/components-examples/material/form-field/form-field-hint/form-field-hint-example.css

@@ -1,8 +1,3 @@
-.example-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.example-container > * {
-  width: 100%;
+.example-container .mat-form-field + .mat-form-field {
+  margin-left: 8px;
 }

src/components-examples/material/form-field/form-field-hint/form-field-hint-example.html

@@ -1,11 +1,13 @@
 <div class="example-container">
-  <mat-form-field hintLabel="Max 10 characters">
-    <input matInput #input maxlength="10" placeholder="Enter some input">
+  <mat-form-field hintLabel="Max 10 characters" appearance="fill">
+    <mat-label>Enter some input</mat-label>
+    <input matInput #input maxlength="10" placeholder="Ex. Nougat">
     <mat-hint align="end">{{input.value?.length || 0}}/10</mat-hint>
   </mat-form-field>
 
-  <mat-form-field>
-    <mat-select placeholder="Select me">
+  <mat-form-field appearance="fill">
+    <mat-label>Select me</mat-label>
+    <mat-select>
       <mat-option value="option">Option</mat-option>
     </mat-select>
     <mat-hint align="end">Here's the dropdown arrow ^</mat-hint>

src/components-examples/material/form-field/form-field-label/form-field-label-example.css

@@ -1,10 +1,9 @@
-.example-container {
-  display: flex;
-  flex-direction: column;
+.example-container .mat-form-field + .mat-form-field {
+  margin-left: 8px;
 }
 
-.example-container > * {
-  width: 100%;
+.example-container .mat-form-field {
+  width: 220px;
 }
 
 .example-container form {

src/components-examples/material/form-field/form-field-label/form-field-label-example.html

@@ -1,34 +1,33 @@
 <div class="example-container">
-  <form class="example-container" [formGroup]="options">
-    <mat-checkbox formControlName="hideRequired">Hide required marker</mat-checkbox>
+  <form [formGroup]="options">
+    <mat-checkbox [formControl]="hideRequiredControl">Hide required marker</mat-checkbox>
     <div>
       <label>Float label: </label>
-      <mat-radio-group formControlName="floatLabel">
+      <mat-radio-group [formControl]="floatLabelControl">
         <mat-radio-button value="auto">Auto</mat-radio-button>
         <mat-radio-button value="always">Always</mat-radio-button>
-        <mat-radio-button value="never">Never</mat-radio-button>
       </mat-radio-group>
     </div>
-  </form>
 
-  <mat-form-field
-      [hideRequiredMarker]="options.value.hideRequired"
-      [floatLabel]="options.value.floatLabel">
-    <input matInput placeholder="Simple placeholder" required>
-  </mat-form-field>
+    <mat-form-field appearance="fill"
+        [hideRequiredMarker]="hideRequiredControl.value"
+        [floatLabel]="floatLabelControl.value">
+      <input matInput placeholder="Simple placeholder" required>
+    </mat-form-field>
 
-  <mat-form-field [floatLabel]="options.value.floatLabel">
-    <mat-label>Both a label and a placeholder</mat-label>
-    <input matInput placeholder="Simple placeholder">
-  </mat-form-field>
+    <mat-form-field appearance="fill" [floatLabel]="floatLabelControl.value">
+      <mat-label>Both a label and a placeholder</mat-label>
+      <input matInput placeholder="Simple placeholder">
+    </mat-form-field>
 
-  <mat-form-field
-      [hideRequiredMarker]="options.value.hideRequired"
-      [floatLabel]="options.value.floatLabel">
-    <mat-select required>
-      <mat-option>-- None --</mat-option>
-      <mat-option value="option">Option</mat-option>
-    </mat-select>
-    <mat-label><mat-icon>favorite</mat-icon> <b> Fancy</b> <i> label</i></mat-label>
-  </mat-form-field>
+    <mat-form-field appearance="fill"
+        [hideRequiredMarker]="hideRequiredControl.value"
+        [floatLabel]="floatLabelControl.value">
+      <mat-select required>
+        <mat-option>-- None --</mat-option>
+        <mat-option value="option">Option</mat-option>
+      </mat-select>
+      <mat-label><mat-icon>favorite</mat-icon> <b> Fancy</b> <i> label</i></mat-label>
+    </mat-form-field>
+  </form>
 </div>

src/components-examples/material/form-field/form-field-label/form-field-label-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {FormBuilder, FormGroup} from '@angular/forms';
+import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
 
 /** @title Form field with label */
 @Component({
@@ -9,11 +9,13 @@ import {FormBuilder, FormGroup} from '@angular/forms';
 })
 export class FormFieldLabelExample {
   options: FormGroup;
+  hideRequiredControl = new FormControl(false);
+  floatLabelControl = new FormControl('auto');
 
   constructor(fb: FormBuilder) {
     this.options = fb.group({
-      hideRequired: false,
-      floatLabel: 'auto',
+      hideRequired: this.hideRequiredControl,
+      floatLabel: this.floatLabelControl,
     });
   }
 }

src/components-examples/material/form-field/form-field-overview/form-field-overview-example.css

@@ -1,8 +1 @@
-.example-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.example-container > * {
-  width: 100%;
-}
+/** No CSS for this example */

src/components-examples/material/form-field/form-field-overview/form-field-overview-example.html

@@ -1,15 +1,18 @@
 <div class="example-container">
-  <mat-form-field>
-    <input matInput placeholder="Input">
+  <mat-form-field appearance="fill">
+    <mat-label>Input</mat-label>
+    <input matInput>
   </mat-form-field>
-
-  <mat-form-field>
-    <textarea matInput placeholder="Textarea"></textarea>
-  </mat-form-field>
-
-  <mat-form-field>
-    <mat-select placeholder="Select">
+  <br>
+  <mat-form-field appearance="fill">
+    <mat-label>Select</mat-label>
+    <mat-select>
       <mat-option value="option">Option</mat-option>
     </mat-select>
   </mat-form-field>
+  <br>
+  <mat-form-field appearance="fill">
+    <mat-label>Textarea</mat-label>
+    <textarea matInput></textarea>
+  </mat-form-field>
 </div>