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)

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>

src/components-examples/material/form-field/form-field-prefix-suffix/form-field-prefix-suffix-example.css

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

src/components-examples/material/form-field/form-field-prefix-suffix/form-field-prefix-suffix-example.html

@@ -1,13 +1,15 @@
 <div class="example-container">
-  <mat-form-field>
-    <input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'">
+  <mat-form-field appearance="fill">
+    <mat-label>Enter your password</mat-label>
+    <input matInput [type]="hide ? 'password' : 'text'">
     <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
     <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
     </button>
   </mat-form-field>
 
-  <mat-form-field>
-    <input matInput placeholder="Amount" type="number" class="example-right-align">
+  <mat-form-field appearance="fill">
+    <mat-label>Amount</mat-label>
+    <input matInput type="number" class="example-right-align">
     <span matPrefix>$&nbsp;</span>
     <span matSuffix>.00</span>
   </mat-form-field>

src/components-examples/material/form-field/form-field-theming/form-field-theming-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-theming/form-field-theming-example.html

@@ -1,14 +1,17 @@
 <form class="example-container" [formGroup]="options" [style.fontSize.px]="getFontSize()">
-  <mat-form-field [color]="options.value.color">
-    <mat-select placeholder="Color" formControlName="color">
+  <mat-form-field appearance="fill" [color]="colorControl.value">
+    <mat-label>Color</mat-label>
+    <mat-select [formControl]="colorControl">
       <mat-option value="primary">Primary</mat-option>
       <mat-option value="accent">Accent</mat-option>
       <mat-option value="warn">Warn</mat-option>
     </mat-select>
   </mat-form-field>
 
-  <mat-form-field [color]="options.value.color">
-    <input matInput type="number" placeholder="Font size (px)" formControlName="fontSize" min="10">
-    <mat-error *ngIf="options.get('fontSize')?.invalid">Min size: 10px</mat-error>
+  <mat-form-field appearance="fill" [color]="colorControl.value">
+    <mat-label>Font size</mat-label>
+    <input matInput type="number" placeholder="Ex. 12" [formControl]="fontSizeControl" min="10">
+    <span matSuffix>px</span>
+    <mat-error *ngIf="fontSizeControl.invalid">Min size: 10px</mat-error>
   </mat-form-field>
 </form>

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

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
 
 /** @title Form field theming */
 @Component({
@@ -9,15 +9,17 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 })
 export class FormFieldThemingExample {
   options: FormGroup;
+  colorControl = new FormControl('primary');
+  fontSizeControl = new FormControl(16, Validators.min(10));
 
   constructor(fb: FormBuilder) {
     this.options = fb.group({
-      color: 'primary',
-      fontSize: [16, Validators.min(10)],
+      color: this.colorControl,
+      fontSize: this.fontSizeControl,
     });
   }
 
   getFontSize() {
-    return Math.max(10, this.options.value.fontSize);
+    return Math.max(10, this.fontSizeControl.value);
   }
 }