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-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/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)'),
     ]),
   ])