From fd99c5c549f0b69889f23e416db68fde5af32d17 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Wed, 12 Feb 2020 17:59:33 +0100
Subject: [PATCH] fix(material-experimental/mdc-form-field): setup typography
 styles for form-fields

Currently the MDC-based form-field does not have any typography styles.
MDC only sets typography styles on the inputs and textarea elements.
This won't work for our form-field since we support custom form-field
controls. To make this work, the input/textarea elements inherit the
font styles from parent elements, but we need to set up the typography
styles for the containing `mat-form-field` element.
---
 .../mdc-form-field/_mdc-form-field.scss                   | 4 ++++
 .../_mdc-text-field-structure-overrides.scss              | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/material-experimental/mdc-form-field/_mdc-form-field.scss b/src/material-experimental/mdc-form-field/_mdc-form-field.scss
index 098679941010..10eda8722287 100644
--- a/src/material-experimental/mdc-form-field/_mdc-form-field.scss
+++ b/src/material-experimental/mdc-form-field/_mdc-form-field.scss
@@ -70,5 +70,9 @@
     @include mdc-floating-label-core-styles($query: $mat-typography-styles-query);
     @include mdc-text-field-core-styles($query: $mat-typography-styles-query);
     @include _mat-form-field-subscript-typography($config);
+
+    .mat-mdc-form-field {
+      @include mat-typography-level-to-styles($config, input);
+    }
   }
 }
diff --git a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss
index bbb3b5e4819a..a523c1fd28d3 100644
--- a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss
+++ b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss
@@ -18,10 +18,10 @@
 
   // 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 want to ensure that font styles are inherited for input elements. We want input
-  // text to align with surrounding text. Also font inheritance has been enabled in the non
-  // MDC-based implementation of the form-field too, so we need it for backwards compatibility.
+  // 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).
   .mat-mdc-input-element {
     font: inherit;
     border: none;