fixup! fixup! feat(material-experimental): initial prototype of mdc-f…

…orm-field

Address feedback 2

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

@@ -77,11 +77,11 @@ sass_library(
     name = "form_field_partials",
     srcs = [
         "_form-field-bottom-line.scss",
+        "_form-field-sizing.scss",
         "_form-field-standard-appearance.scss",
         "_form-field-subscript.scss",
-        "_form-field-variables.scss",
-        "_mdc-text-field-structure-overwrites.scss",
-        "_mdc-text-field-textarea-overwrites.scss",
+        "_mdc-text-field-structure-overrides.scss",
+        "_mdc-text-field-textarea-overrides.scss",
     ],
     deps = [
         "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",

src/material-experimental/mdc-form-field/_form-field-bottom-line.scss

@@ -1,7 +1,7 @@
-@import '_form-field-variables';
+@import 'form-field-sizing';
 @import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-form-field-bottom-line() {
+@mixin _mat-form-field-bottom-line() {
   // Bottom line for form-fields. MDC by default only has a bottom-line for inputs
   // and textareas. This does not work for us because we support abstract form-field
   // controls which might not render an input or textarea. Additionally, the default MDC
@@ -17,7 +17,7 @@
   }
 }
 
-@mixin mat-form-field-bottom-line-theme() {
+@mixin _mat-form-field-bottom-line-theme() {
   // Sets the color of the bottom-line. Our custom bottom-line is based on the default
   // MDC bottom-line that only works for inputs and textareas (hence we need a custom
   // bottom-line that works for all type of form-field controls). To replicate the

src/material-experimental/mdc-form-field/_form-field-standard-appearance.scss

@@ -1,7 +1,7 @@
 @import '@material/rtl/mixins';
 @import '@material/floating-label/mixins';
 @import '@material/textfield/variables';
-@import '_form-field-variables';
+@import 'form-field-sizing';
 
 // Styles for the standard appearance in the MDC-based form-field. MDC has styles for
 // full-width text-fields which kind of look like the standard appearance. Though these
@@ -10,7 +10,7 @@
 // own styles for the standard appearance that work for all types of inputs and textareas
 // and are backwards-compatible with the non-MDC based form-field.
 // TODO(devversion): consider proposing these styles to the MDC text-field implementation.
-@mixin mat-form-field-standard-appearance() {
+@mixin _mat-form-field-standard-appearance() {
   .mat-mdc-form-field-standard {
     // *Note*: Needs increased specificity because the default padding set by MDC is applied
     // with high specificity for text-fields without floating label.

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

@@ -1,7 +1,7 @@
-@import '_form-field-variables';
+@import 'form-field-sizing';
 @import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-form-field-subscript() {
+@mixin _mat-form-field-subscript() {
   // Wrapper for the hints and error messages.
   .mat-mdc-form-field-subscript-wrapper {
     box-sizing: border-box;
@@ -34,14 +34,14 @@
   }
 }
 
-@mixin mat-form-field-subscript-theme() {
+@mixin _mat-form-field-subscript-theme() {
   // MDC does not have built-in error treatment.
   .mat-mdc-form-field-error {
     @include mdc-theme-prop(color, $mdc-text-field-error);
   }
 }
 
-@mixin mat-form-field-subscript-typography($config) {
+@mixin _mat-form-field-subscript-typography($config) {
   // The unit-less line-height from the font config.
   $line-height: mat-line-height($config, input);
   // The amount to scale the font for the subscript.

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

@@ -1,17 +1,17 @@
 @import '@material/textfield/variables';
 @import '../mdc-helpers/mdc-helpers';
-@import '_form-field-subscript.scss';
-@import '_form-field-bottom-line.scss';
+@import 'form-field-subscript';
+@import 'form-field-bottom-line';
 
 @mixin mat-form-field-theme-mdc($theme) {
   @include mat-using-mdc-theme($theme) {
-    @include mat-form-field-subscript-theme();
-    @include mat-form-field-bottom-line-theme();
+    @include _mat-form-field-subscript-theme();
+    @include _mat-form-field-bottom-line-theme();
   }
 }
 
 @mixin mat-form-field-typography-mdc($config) {
   @include mat-using-mdc-typography($config) {
-    @include mat-form-field-subscript-typography($config);
+    @include _mat-form-field-subscript-typography($config);
   }
 }

src/material-experimental/mdc-form-field/_mdc-text-field-structure-overwrites.scss → src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss

@@ -1,8 +1,9 @@
-@import '_form-field-variables';
+@import 'form-field-sizing';
 
-// Mixin that can be included to overwrite the default MDC text-field styles to
-// fit the needs
-@mixin mat-mdc-text-field-structure-overwrites() {
+// Mixin that can be included to override the default MDC text-field
+// styles to fit our needs. See individual comments for context on why
+// certain MDC styles need to be modified.
+@mixin _mat-mdc-text-field-structure-overrides() {
   // Always hide the asterisk displayed by MDC. This is necessary because MDC can only display
   // the asterisk if the label is directly preceded by the input. MDC does this because it
   // relies on CSS to figure out if the input/textarea is required. This does not apply for us

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

@@ -1,4 +1,4 @@
-@import '_form-field-variables';
+@import 'form-field-sizing';
 
 // 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
@@ -7,9 +7,9 @@
 // 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.
 
-// Mixin that can be included to overwrite the default MDC text-field styles
+// Mixin that can be included to override the default MDC text-field styles
 // to properly support textareas.
-@mixin mat-mdc-text-field-textarea-overwrites() {
+@mixin _mat-mdc-text-field-textarea-overrides() {
   // Ensures that textarea elements inside of the form-field have proper vertical spacing
   // to account for the floating label. Also ensures that there is no vertical text overflow.
   // TODO(devversion): remove extra specificity if we removed the ":not(outline-appearance)"

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

@@ -1,24 +1,23 @@
 // TODO(devversion): do not import all text-field styles. Use feature targeting once available.
 @import '@material/textfield/mdc-text-field';
-@import '@material/textfield/variables';
-@import '_form-field-variables';
-@import '_form-field-standard-appearance';
-@import '_form-field-subscript';
-@import '_form-field-bottom-line';
-@import '_mdc-text-field-textarea-overwrites';
-@import '_mdc-text-field-structure-overwrites';
+@import 'form-field-sizing';
+@import 'form-field-standard-appearance';
+@import 'form-field-subscript';
+@import 'form-field-bottom-line';
+@import 'mdc-text-field-textarea-overrides';
+@import 'mdc-text-field-structure-overrides';
 
 // MDC text-field overwrites.
-@include mat-mdc-text-field-textarea-overwrites();
-@include mat-mdc-text-field-structure-overwrites();
+@include _mat-mdc-text-field-textarea-overrides();
+@include _mat-mdc-text-field-structure-overrides();
 
 // Include the subscript and bottom-line styles.
-@include mat-form-field-subscript();
-@include mat-form-field-bottom-line();
+@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();
+@include _mat-form-field-standard-appearance();
 
 // Host element of the form-field. It contains the mdc-text-field wrapper
 // and the subscript wrapper.

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

@@ -17,6 +17,7 @@ import {
   ElementRef,
   Inject,
   Input,
+  isDevMode,
   OnDestroy,
   Optional,
   QueryList,
@@ -429,11 +430,13 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
   }
 
   /**
-   * Ensure that there is a maximum of one of each `<mat-hint>` alignment specified, with the
-   * "hintLabel" attribute being considered as `align="start"`.
+   * Ensure that there is a maximum of one of each "mat-hint" alignment specified. The hint
+   * label specified set through the input is being considered as "start" aligned.
+   *
+   * This method is a noop if Angular runs in production mode.
    */
   private _validateHints() {
-    if (this._hintChildren) {
+    if (isDevMode() && this._hintChildren) {
       let startHint: MatHint;
       let endHint: MatHint;
       this._hintChildren.forEach((hint: MatHint) => {

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

@@ -24,10 +24,10 @@ import {MatInput as BaseMatInput} from '@angular/material/input';
     '[class.mat-mdc-textarea-input]': '_isTextarea()',
     // Native input properties that are overwritten by Angular inputs need to be synced with
     // the native input element. Otherwise property bindings for those don't work.
-    '[attr.id]': 'id',
-    '[attr.placeholder]': 'placeholder',
+    '[id]': 'id',
     '[disabled]': 'disabled',
     '[required]': 'required',
+    '[attr.placeholder]': 'placeholder',
     '[attr.readonly]': 'readonly && !_isNativeSelect || null',
     '[attr.aria-describedby]': '_ariaDescribedby || null',
     '[attr.aria-invalid]': 'errorState',