fix(material-experimental/mdc-form-field): tweak styles to work with MDC

typography

Author: mmalerba

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

@@ -315,8 +315,8 @@ <h4>Textarea</h4>
       <mat-form-field style="margin-bottom: 4em">
         <mat-label>Enter text to count</mat-label>
         <textarea matInput #longHint></textarea>
-        <mat-hint>
-          Enter some text to count how many characters are in it. The character count is shown on
+        <mat-hint>Enter
+          some text to count how many characters are in it. The character count is shown on
           the right.
         </mat-hint>
         <mat-hint align="end" style="white-space: nowrap" aria-live="polite">

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

@@ -36,11 +36,11 @@ $mat-form-field-input-box-vertical-offset: 1px;
 // spacing as provided by the Material Design specification. The outlined dimensions in the
 // spec section do not match with the text fields shown in the overview or the ones implemented
 // by MDC. Note that we need to account for the input box offset. See above for more context.
-$mat-form-field-with-label-input-padding-top: 28px - $mat-form-field-input-box-vertical-offset;
-$mat-form-field-with-label-input-padding-bottom: 12px - $mat-form-field-input-box-vertical-offset;
+$mat-form-field-with-label-input-padding-top: 24px - $mat-form-field-input-box-vertical-offset;
+$mat-form-field-with-label-input-padding-bottom: 8px - $mat-form-field-input-box-vertical-offset;
 
 // Vertical spacing of the text-field if there is no label. We manually measure the
 // spacing in the specs. See comment above for padding for text fields with label. The
 // same reasoning applies to the padding for text fields without label.
-$mat-form-field-no-label-padding-bottom: 20px - $mat-form-field-input-box-vertical-offset;
-$mat-form-field-no-label-padding-top: 20px - $mat-form-field-input-box-vertical-offset;
+$mat-form-field-no-label-padding-bottom: 16px - $mat-form-field-input-box-vertical-offset;
+$mat-form-field-no-label-padding-top: 16px - $mat-form-field-input-box-vertical-offset;

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

@@ -8,16 +8,34 @@
   .mat-mdc-form-field-subscript-wrapper {
     box-sizing: border-box;
     width: 100%;
-    // prevents multi-line errors from overlapping the control.
-    overflow: hidden;
+    position: relative;
+  }
+
+  .mat-mdc-form-field-hint-wrapper,
+  .mat-mdc-form-field-error-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .mat-mdc-form-field-bottom-align {
+    line-height: normal;
+  }
+
+  .mat-mdc-form-field-bottom-align::before {
+    content: '\200B';
+    vertical-align: bottom;
   }
 
   // Scale down icons in the subscript to be the same size as the text.
-  .mat-mdc-form-field-subscript-wrapper .mat-icon {
-    width: 1em;
-    height: 1em;
-    font-size: inherit;
-    vertical-align: baseline;
+  .mat-mdc-form-field-subscript-wrapper,
+  .mat-mdc-form-field label {
+    .mat-icon {
+      width: 1em;
+      height: 1em;
+      font-size: inherit;
+    }
   }
 
   // Clears the floats on the hints. This is necessary for the hint animation to work.
@@ -47,29 +65,11 @@
 // helper text in our MDC based form field
 @mixin mat-mdc-private-form-field-subscript-typography($config-or-theme) {
   $config: mat-get-typography-config($config-or-theme);
-  // 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.
-  $subscript-font-scale: 0.75;
-  // Font size to use for the subscript text.
-  $subscript-font-size: $subscript-font-scale * 100%;
-  // The space between the bottom of the text-field area and the subscript. Mocks in the spec show
-  // half of the text size, but this margin is applied to an element with the subscript text font
-  // size, so we need to divide by the scale factor to make it half of the original text size.
-  $subscript-margin-top: 0.5em / $subscript-font-scale;
-  // The minimum height applied to the subscript to reserve space for subscript text. This is a
-  // combination of the subscript's margin and line-height, but we need to multiply by the
-  // subscript font scale factor since the subscript has a reduced font size.
-  $subscript-min-height: ($subscript-margin-top + $line-height) * $subscript-font-scale;
-  // The horizontal padding between the edge of the text box and the start of the subscript text.
-  $subscript-horizontal-padding: 16px;
 
   // The subscript wrapper has a minimum height to avoid that the form-field
   // jumps when hints or errors are displayed.
-  .mat-mdc-form-field-subscript-wrapper {
-    min-height: $subscript-min-height;
-    font-size: $subscript-font-size;
-    margin-top: $subscript-margin-top;
-    padding: 0 $subscript-horizontal-padding;
+  .mat-mdc-form-field-subscript-wrapper,
+  .mat-mdc-form-field-bottom-align::before {
+    @include mdc-typography(caption, $query: $mat-typography-styles-query);
   }
 }

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

@@ -9,15 +9,18 @@
 @mixin mat-mdc-private-text-field-structure-overrides() {
   // Unset the border set by MDC. We move the border (which serves as the Material Design
   // text-field bottom line) into its own element. This is necessary because we want the
-  // bottom-line to span across the whole form-field (including prefixes and suffixes). Also
-  // we ensure that font styles are inherited for input elements. We do this because inputs by
-  // default have explicit font styles from the user agent, and we set the desired font styles
-  // in the parent `mat-form-field` element (for better custom form-field control support).
+  // bottom-line to span across the whole form-field (including prefixes and suffixes).
   .mat-mdc-input-element {
-    font: inherit;
     border: none;
   }
 
+  // In order to ensure proper alignment of the floating label, we reset its line-height.
+  // The line-height is not important as the element is absolutely positioned and only has one line
+  // of text.
+  .mat-mdc-form-field .mdc-floating-label {
+    line-height: normal;
+  }
+
   // Reset the height that MDC sets on native input elements. We cannot rely on their
   // fixed height as we handle vertical spacing differently. MDC sets a fixed height for
   // inputs and modifies the baseline so that the textfield matches the spec. This does

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

@@ -21,7 +21,7 @@ export const MAT_ERROR = new InjectionToken<MatError>('MatError');
 @Directive({
   selector: 'mat-error',
   host: {
-    'class': 'mat-mdc-form-field-error',
+    'class': 'mat-mdc-form-field-error mat-mdc-form-field-bottom-align',
     'role': 'alert',
     '[id]': 'id',
   },

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

@@ -14,7 +14,7 @@ let nextUniqueId = 0;
 @Directive({
   selector: 'mat-hint',
   host: {
-    'class': 'mat-mdc-form-field-hint',
+    'class': 'mat-mdc-form-field-hint mat-mdc-form-field-bottom-align',
     '[class.mat-mdc-form-field-hint-end]': 'align === "end"',
     '[id]': 'id',
     // Remove align attribute to prevent it from interfering with layout.

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

@@ -64,9 +64,10 @@
   <div matFormFieldLineRipple *ngIf="!_hasOutline()"></div>
 </div>
 
-<div class="mat-mdc-form-field-subscript-wrapper"
+<div class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align"
      [ngSwitch]="_getDisplayedMessages()">
-  <div *ngSwitchCase="'error'" [@transitionMessages]="_subscriptAnimationState">
+  <div class="mat-mdc-form-field-error-wrapper" *ngSwitchCase="'error'"
+       [@transitionMessages]="_subscriptAnimationState">
     <ng-content select="mat-error"></ng-content>
   </div>
 

src/material/form-field/form-field-animations.ts

@@ -26,7 +26,7 @@ export const matFormFieldAnimations: {
     // TODO(mmalerba): Use angular animations for label animation as well.
     state('enter', style({ opacity: 1, transform: 'translateY(0%)' })),
     transition('void => enter', [
-      style({ opacity: 0, transform: 'translateY(-100%)' }),
+      style({ opacity: 0, transform: 'translateY(-5px)' }),
       animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)'),
     ]),
   ])