fix(material-experimental/mdc-typography): update mdc components typography to match spec

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/dev-app/theme.scss

@@ -19,7 +19,7 @@
 // have to load a single css file for Angular Material in your app.
 // **Be sure that you only ever include this mixin once!**
 @include mat-core();
-@include angular-material-mdc-typography();
+@include angular-material-mdc-typography(mat-mdc-typography-config());
 @include mat-popover-edit-typography(mat-typography-config());
 
 // Include base styles for strong focus indicators.

src/material-experimental/mdc-core/option/_option-theme.scss

@@ -2,6 +2,7 @@
 @import '@material/list/variables.import';
 @import '@material/theme/functions.import';
 @import '@material/theme/mixins.import';
+@import '@material/typography/mixins.import';
 @import '../../mdc-helpers/mdc-helpers';
 @import '../../../material/core/theming/theming';
 
@@ -43,6 +44,14 @@
 
 @mixin mat-mdc-option-typography($config-or-theme) {
   $config: mat-get-typography-config($config-or-theme);
+
+  @include mat-using-mdc-typography($config) {
+    // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
+    // level. Class is repeated for increased specificity.
+    .mat-mdc-option {
+      @include mdc-typography(body1, $query: $mat-typography-styles-query);
+    }
+  }
 }
 
 @mixin mat-mdc-option-density($config-or-theme) {

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

@@ -20,13 +20,7 @@ $mat-form-field-hint-min-space: 1em !default;
 // inputs. We take the explicit numbers provided by the Material Design specification.
 // https://material.io/components/text-fields/#specs
 
-// Dimensions in the spec assume that an input box does not need to account for larger
-// characters. In browsers though, inputs always add additional vertical spacing to account
-// for such potential characters. This means that all determined spacing from the spec needs
-// to account for the input offset. The offset is based on the default font size used in the
-// spec images. i.e. the input box for a 16dp input is 1px larger on top and bottom.
-// Related information: https://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced.
-$mat-form-field-input-box-vertical-offset: 1px;
+$mat-form-field-height: 56px;
 
 // Vertical spacing of the text-field if there is a label. MDC hard-codes the spacing into
 // their styles, but their spacing variables would not work for our form-field structure anyway.
@@ -36,11 +30,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-with-label-input-padding-bottom: 8px;
 
 // 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-no-label-padding-top: 16px;

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

@@ -8,16 +8,35 @@
   .mat-mdc-form-field-subscript-wrapper {
     box-sizing: border-box;
     width: 100%;
-    // prevents multi-line errors from overlapping the control.
-    overflow: hidden;
+    position: relative;
+  }
+
+  // The horizontal padding between the edge of the text box and the start of the subscript text.
+  $subscript-horizontal-padding: 16px;
+
+  .mat-mdc-form-field-hint-wrapper,
+  .mat-mdc-form-field-error-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 0 $subscript-horizontal-padding;
+  }
+
+  .mat-mdc-form-field-bottom-align::before {
+    content: '';
+    display: inline-block;
+    height: 16px;
   }
 
   // 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 +66,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/_form-field-theme.scss

@@ -4,6 +4,7 @@
 @import '@material/theme/variables.import';
 @import '@material/textfield/mixins.import';
 @import '@material/textfield/variables.import';
+@import '@material/typography/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 @import 'form-field-density';
 @import 'form-field-subscript';
@@ -22,8 +23,8 @@
 
   .mdc-text-field--focused {
     @include mdc-text-field-focused_($query);
-
   }
+
   .mdc-text-field--invalid {
     @include mdc-text-field-invalid_($query);
   }
@@ -67,8 +68,13 @@
     @include mdc-line-ripple-core-styles($query: $mat-typography-styles-query);
     @include mat-mdc-private-form-field-subscript-typography($config);
 
-    .mat-mdc-form-field {
-      @include mat-typography-level-to-styles($config, input);
+    // MDC uses the `subtitle1` level for the input label and value, but the spec shows `body1` as
+    // the correct level.
+    .mat-mdc-input-element,
+    .mat-mdc-form-field label,
+    .mat-mdc-form-field-prefix,
+    .mat-mdc-form-field-suffix {
+      @include mdc-typography(body1, $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-experimental/mdc-helpers/_mdc-helpers.scss

@@ -18,7 +18,8 @@ $mat-theme-styles-query: color;
 $mat-typography-styles-query: typography;
 
 // Mappings between Angular Material and MDC's typography levels.
-$mat-typography-level-mappings: (
+// TODO: delete once all MDC components have migrated to using the 2018 mappings.
+$mat-typography-2014-level-mappings: (
   mdc-to-mat: (
     headline1: display-4,
     headline2: display-3,
@@ -51,9 +52,49 @@ $mat-typography-level-mappings: (
   )
 );
 
+// Mappings between Angular Material and MDC's typography levels.
+$mat-typography-2018-level-mappings: (
+    // Maps from MDC typography levels (e.g. body1) to Angular Material typography levels
+    // (e.g. body-1).
+    mdc-to-mat: (
+        headline1: headline-1,
+        headline2: headline-2,
+        headline3: headline-3,
+        headline4: headline-4,
+        headline5: headline-5,
+        headline6: headline-6,
+        subtitle1: subtitle-1,
+        subtitle2: subtitle-2,
+        body1: body-1,
+        body2: body-2,
+        caption: caption,
+        button: button,
+        overline: overline
+    ),
+    // Maps from Angular Material typography levels (e.g. body-1) to MDC typography levels
+    // (e.g. body1).
+    mat-to-mdc: (
+        headline-1: headline1,
+        headline-2: headline2,
+        headline-3: headline3,
+        headline-4: headline4,
+        headline-5: headline5,
+        headline-6: headline6,
+        subtitle-1: subtitle1,
+        subtitle-2: subtitle2,
+        body-1: body1,
+        body-2: body2,
+        caption: caption,
+        button: button,
+        overline: overline
+    )
+);
+
 // Converts an Angular Material typography level config to an MDC one.
 @function mat-typography-level-config-to-mdc($mat-config, $mat-level) {
-  $mdc-level: map-get(map-get($mat-typography-level-mappings, mat-to-mdc), $mat-level);
+  $mappings: if(mat-private-typography-is-2018-config($mat-config),
+      $mat-typography-2018-level-mappings, $mat-typography-2014-level-mappings);
+  $mdc-level: map-get(map-get($mappings, mat-to-mdc), $mat-level);
 
   @return map-merge(
       if($mdc-level,
@@ -81,7 +122,10 @@ $mat-typography-level-mappings: (
 @function mat-typography-config-to-mdc($mat-config: mat-typography-config()) {
   $mdc-config: ();
 
-  @each $mdc-level, $mat-level in map-get($mat-typography-level-mappings, mdc-to-mat) {
+  $mappings: if(mat-private-typography-is-2018-config($mat-config),
+      $mat-typography-2018-level-mappings, $mat-typography-2014-level-mappings);
+
+  @each $mdc-level, $mat-level in map-get($mappings, mdc-to-mat) {
     $mdc-config: map-merge(
         $mdc-config,
         ($mdc-level: mat-typography-level-config-to-mdc($mat-config, $mat-level)));
@@ -92,23 +136,14 @@ $mat-typography-level-mappings: (
 
 // Converts an MDC typography level config to an Angular Material one.
 @function mat-typography-config-level-from-mdc($mdc-level) {
-  @return mat-typography-level(
-      map-get($mdc-typography-styles, font-size),
-      map-get($mdc-typography-styles, line-height),
-      map-get($mdc-typography-styles, font-weight),
-      map-get($mdc-typography-styles, font-family),
-      map-get($mdc-typography-styles, letter-spacing));
-}
-
-// Converts an MDC typography config to an Angular Material one.
-@function mat-typography-config-from-mdc() {
-  $mat-config: ();
+  $mdc-level-config: map-get($mdc-typography-styles, $mdc-level);
 
-  @each $mat-level, $mdc-level in map-get($mat-typography-level-mappings, mat-to-mdc) {
-    $mat-config: map-merge($mat-config, mat-typography-config-from-mdc($mdc-level));
-  }
-
-  @return $mat-config;
+  @return mat-typography-level(
+      map-get($mdc-level-config, font-size),
+      map-get($mdc-level-config, line-height),
+      map-get($mdc-level-config, font-weight),
+      map-get($mdc-level-config, font-family),
+      map-get($mdc-level-config, letter-spacing));
 }
 
 // Configures MDC's global variables to reflect the given theme, applies the given styles,

src/material-experimental/mdc-menu/_menu-theme.scss

@@ -4,6 +4,7 @@
 @import '@material/list/variables.import';
 @import '@material/theme/functions.import';
 @import '@material/theme/mixins.import';
+@import '@material/typography/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 
 @mixin mat-mdc-menu-color($config-or-theme) {
@@ -47,10 +48,16 @@
   @include mat-using-mdc-typography($config) {
     @include mdc-menu-surface-core-styles($mat-typography-styles-query);
 
-    .mat-mdc-menu-content, .mat-mdc-menu-item {
+    .mat-mdc-menu-content {
       // Note that we include this private mixin, because the public
       // one adds a bunch of styles that we aren't using for the menu.
       @include mdc-list-base_($mat-typography-styles-query);
+
+      // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
+      // level.
+      .mat-mdc-menu-item {
+        @include mdc-typography(body1, $query: $mat-typography-styles-query);
+      }
     }
   }
 }

src/material-experimental/mdc-paginator/_paginator-theme.scss

@@ -48,10 +48,15 @@
 
 @mixin mat-mdc-paginator-typography($config-or-theme) {
   $config: mat-get-typography-config($config-or-theme);
-  .mat-mdc-paginator {
-    @include mat-using-mdc-typography($config) {
+
+  @include mat-using-mdc-typography($config) {
+    .mat-mdc-paginator {
       @include mdc-typography(caption, $query: $mat-typography-styles-query);
     }
+
+    .mat-mdc-paginator .mat-mdc-select-value {
+      font-size: mat-font-size($config, caption);
+    }
   }
 }