fixup! feat(material-experimental): initial prototype of mdc-form-field

Address feedback

src/dev-app/mdc-input/mdc-input-demo.html

@@ -146,7 +146,6 @@ <h4>Icon buttons</h4>
 
     <p>
       <mat-button-toggle-group [(ngModel)]="prefixSuffixAppearance">
-        <mat-button-toggle value="standard">Standard</mat-button-toggle>
         <mat-button-toggle value="fill">Fill</mat-button-toggle>
         <mat-button-toggle value="outline">Outline</mat-button-toggle>
       </mat-button-toggle-group>
@@ -531,20 +530,6 @@ <h3>&lt;textarea&gt; with bindable autosize </h3>
 <mat-card class="demo-card demo-basic">
   <mat-toolbar color="primary">Appearance</mat-toolbar>
   <mat-card-content>
-    <mat-form-field appearance="legacy">
-      <mat-label>Legacy appearance</mat-label>
-      <input matInput [(ngModel)]="legacyAppearance" required>
-      <mat-error>This field is required</mat-error>
-      <mat-hint>Please type something here</mat-hint>
-    </mat-form-field>
-
-    <mat-form-field appearance="standard">
-      <mat-label>Standard appearance</mat-label>
-      <input matInput [(ngModel)]="standardAppearance" required>
-      <mat-error>This field is required</mat-error>
-      <mat-hint>Please type something here</mat-hint>
-    </mat-form-field>
-
     <mat-form-field appearance="fill">
       <mat-label>Fill appearance</mat-label>
       <input matInput [(ngModel)]="fillAppearance" required>
@@ -560,22 +545,6 @@ <h3>&lt;textarea&gt; with bindable autosize </h3>
     </mat-form-field>
 
     <table style="width: 100%" cellspacing="0"><tr>
-      <td>
-        <mat-form-field appearance="legacy" style="width: 100%">
-          <mat-label>Legacy appearance</mat-label>
-          <input matInput [(ngModel)]="legacyAppearance" required>
-          <mat-error>This field is required</mat-error>
-          <mat-hint>Please type something here</mat-hint>
-        </mat-form-field>
-      </td>
-      <td>
-        <mat-form-field appearance="standard" style="width: 100%">
-          <mat-label>Standard appearance</mat-label>
-          <input matInput [(ngModel)]="standardAppearance" required>
-          <mat-error>This field is required</mat-error>
-          <mat-hint>Please type something here</mat-hint>
-        </mat-form-field>
-      </td>
       <td>
         <mat-form-field appearance="fill" style="width: 100%">
           <mat-label>Fill appearance</mat-label>
@@ -617,10 +586,6 @@ <h3>&lt;textarea&gt; with bindable autosize </h3>
 <mat-card class="demo-card demo-basic">
   <mat-toolbar color="primary">Textarea form-fields</mat-toolbar>
   <mat-card-content>
-    <mat-form-field appearance="standard" class="demo-horizontal-spacing">
-      <mat-label>Label</mat-label>
-      <textarea matInput [disabled]="disableTextarea"></textarea>
-    </mat-form-field>
     <mat-form-field appearance="fill" class="demo-horizontal-spacing">
       <mat-label>Label</mat-label>
       <textarea matInput [disabled]="disableTextarea"></textarea>
@@ -644,7 +609,6 @@ <h3>&lt;textarea&gt; with bindable autosize </h3>
     </mat-form-field>
     <p>
       <mat-button-toggle-group [(ngModel)]="appearance">
-        <mat-button-toggle value="standard">Standard</mat-button-toggle>
         <mat-button-toggle value="fill">Fill</mat-button-toggle>
         <mat-button-toggle value="outline">Outline</mat-button-toggle>
       </mat-button-toggle-group>

src/dev-app/mdc-input/mdc-input-demo.ts

@@ -9,7 +9,7 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {FormControl, Validators} from '@angular/forms';
 import {ErrorStateMatcher, FloatLabelType} from '@angular/material/core';
-import {MatFormFieldAppearance} from '@angular/material/form-field';
+import {MatFormFieldAppearance} from '@angular/material-experimental/mdc-form-field';
 
 
 let max = 5;
@@ -31,8 +31,8 @@ export class MdcInputDemo {
   ctrlDisabled = false;
   textareaNgModelValue: string;
   textareaAutosizeEnabled = false;
-  appearance: MatFormFieldAppearance = 'standard';
-  prefixSuffixAppearance: MatFormFieldAppearance = 'standard';
+  appearance: MatFormFieldAppearance = 'fill';
+  prefixSuffixAppearance: MatFormFieldAppearance = 'fill';
   placeholderTestControl = new FormControl('', Validators.required);
   options: string[] = ['One', 'Two', 'Three'];
 

src/material-experimental/mdc-form-field/BUILD.bazel

@@ -78,7 +78,6 @@ sass_library(
     srcs = [
         "_form-field-bottom-line.scss",
         "_form-field-sizing.scss",
-        "_form-field-standard-appearance.scss",
         "_form-field-subscript.scss",
         "_mdc-text-field-structure-overrides.scss",
         "_mdc-text-field-textarea-overrides.scss",

src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.scss

@@ -3,9 +3,9 @@
 // MDCs default textarea styles cannot be used because they only apply if a special
 // class is applied to the "mdc-text-field" wrapper. Since we cannot know whether the
 // registered form-field control is a textarea and MDC by default does not have styles
-// for textareas in the standard appearance, we add our own minimal textarea styles
+// for textareas in the fill appearance, we add our own minimal textarea styles
 // which are scoped to the actual textarea element (i.e. not require a class in the
-// text-field wrapper) and integrate better with the standard appearance.
+// text-field wrapper) and integrate better with the any configured appearance.
 
 // Mixin that can be included to override the default MDC text-field styles
 // to properly support textareas.

src/material-experimental/mdc-form-field/form-field.scss

@@ -1,7 +1,6 @@
 // TODO(devversion): do not import all text-field styles. Use feature targeting once available.
 @import '@material/textfield/mdc-text-field';
 @import 'form-field-sizing';
-@import 'form-field-standard-appearance';
 @import 'form-field-subscript';
 @import 'form-field-bottom-line';
 @import 'mdc-text-field-textarea-overrides';
@@ -15,10 +14,6 @@
 @include _mat-form-field-subscript();
 @include _mat-form-field-bottom-line();
 
-// Styles for the standard appearance. MDC by default does not have a standard
-// appearance that works with floating labels.
-@include _mat-form-field-standard-appearance();
-
 // Host element of the form-field. It contains the mdc-text-field wrapper
 // and the subscript wrapper.
 .mat-mdc-form-field {

src/material-experimental/mdc-form-field/form-field.ts

@@ -15,7 +15,7 @@ import {
   ContentChild,
   ContentChildren,
   ElementRef,
-  Inject,
+  Inject, InjectionToken,
   Input,
   isDevMode,
   OnDestroy,
@@ -34,12 +34,9 @@ import {
 import {
   getMatFormFieldDuplicatedHintError,
   getMatFormFieldMissingControlError,
-  MAT_FORM_FIELD_DEFAULT_OPTIONS,
   MatFormField as NonMdcFormField,
   matFormFieldAnimations,
-  MatFormFieldAppearance,
   MatFormFieldControl,
-  MatFormFieldDefaultOptions,
 } from '@angular/material/form-field';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {MDCTextFieldAdapter, MDCTextFieldFoundation} from '@material/textfield';
@@ -57,10 +54,29 @@ import {MatSuffix} from './directives/suffix';
 /** Type for the available floatLabel values. */
 export type FloatLabelType = 'always' | 'auto';
 
+/** Possible appearance styles for the form field. */
+export type MatFormFieldAppearance = 'fill' | 'outline';
+
+/**
+ * Represents the default options for the form field that can be configured
+ * using the `MAT_FORM_FIELD_DEFAULT_OPTIONS` injection token.
+ */
+export interface MatFormFieldDefaultOptions {
+  appearance?: MatFormFieldAppearance;
+  hideRequiredMarker?: boolean;
+}
+
+/**
+ * Injection token that can be used to configure the
+ * default options for all form field within an app.
+ */
+export const MAT_FORM_FIELD_DEFAULT_OPTIONS =
+  new InjectionToken<MatFormFieldDefaultOptions>('MAT_FORM_FIELD_DEFAULT_OPTIONS');
+
 let nextUniqueId = 0;
 
 /** Default appearance used by the form-field. */
-const DEFAULT_APPEARANCE: MatFormFieldAppearance = 'standard';
+const DEFAULT_APPEARANCE: MatFormFieldAppearance = 'fill';
 
 /** Default appearance used by the form-field. */
 const DEFAULT_FLOAT_LABEL: FloatLabelType = 'auto';
@@ -74,7 +90,6 @@ const DEFAULT_FLOAT_LABEL: FloatLabelType = 'auto';
   animations: [matFormFieldAnimations.transitionMessages],
   host: {
     'class': 'mat-mdc-form-field',
-    '[class.mat-mdc-form-field-standard]': '_isStandardAppearance()',
     '[class.mat-mdc-form-field-label-always-float]': '_shouldAlwaysFloat()',
     '[class.mat-form-field-invalid]': '_control.errorState',
     '[class.mat-form-field-disabled]': '_control.disabled',
@@ -407,10 +422,6 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
     return this._control.shouldLabelFloat || this._shouldAlwaysFloat();
   }
 
-  _isStandardAppearance() {
-    return this.appearance === 'standard' || this.appearance === 'legacy';
-  }
-
   /** Determines whether a class from the NgControl should be forwarded to the host element. */
   _shouldForward(prop: keyof NgControl): boolean {
     const ngControl = this._control ? this._control.ngControl : null;

src/material-experimental/mdc-form-field/public-api.ts

@@ -7,11 +7,9 @@
  */
 
 export {
-  MatFormFieldAppearance,
   MatFormFieldControl,
   getMatFormFieldDuplicatedHintError,
   getMatFormFieldMissingControlError,
-  MAT_FORM_FIELD_DEFAULT_OPTIONS
 } from '@angular/material/form-field';
 
 export * from './directives/label';

src/material-experimental/mdc-input/input.spec.ts

@@ -1081,27 +1081,27 @@ describe('MatMdcInput with forms', () => {
 });
 
 describe('MatFormField default options', () => {
-  it('should be standard appearance if no default options provided', () => {
+  it('should be fill appearance if no default options provided', () => {
     const fixture = createComponent(MatInputWithAppearance);
     fixture.detectChanges();
-    expect(fixture.componentInstance.formField.appearance).toBe('standard');
+    expect(fixture.componentInstance.formField.appearance).toBe('fill');
   });
 
-  it('should be standard appearance if empty default options provided', () => {
+  it('should be fill appearance if empty default options provided', () => {
     const fixture = createComponent(MatInputWithAppearance, [{
       provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {}}
     ]);
 
     fixture.detectChanges();
-    expect(fixture.componentInstance.formField.appearance).toBe('standard');
+    expect(fixture.componentInstance.formField.appearance).toBe('fill');
   });
 
   it('should be able to change the default appearance', () => {
     const fixture = createComponent(MatInputWithAppearance, [{
-      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'fill'}}
+      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}}
     ]);
     fixture.detectChanges();
-    expect(fixture.componentInstance.formField.appearance).toBe('fill');
+    expect(fixture.componentInstance.formField.appearance).toBe('outline');
   });
 
   it('should default hideRequiredMarker to false', () => {

src/material-experimental/mdc_require_config.js

@@ -31,7 +31,7 @@ require.config({
     '@material/tab-indicator': '/base/npm/node_modules/@material/tab-indicator/dist/mdc.tabIndicator',
     '@material/tab-scroller': '/base/npm/node_modules/@material/tab-scroller/dist/mdc.tabScroller',
     '@material/data-table': '/base/npm/node_modules/@material/data-table/dist/mdc.dataTable',
-    '@material/text-field': '/base/npm/node_modules/@material/textfield/dist/mdc.textfield',
+    '@material/textfield': '/base/npm/node_modules/@material/textfield/dist/mdc.textfield',
     '@material/top-app-bar': '/base/npm/node_modules/@material/top-app-bar/dist/mdc.topAppBar',
   }
 });