fix(material/form-field): safely coerce line-height to em (#23215)

Our typography mixins for form-field related components coerce line-height to `em` units in several places. If a user provides a `line-height` via typography config with a unit specified, this results in an error as the result with be em squared. This fix changes the coercion to only occur if the line-height is unitless.

(cherry picked from commit 278e67b)

Author: jelbourn

src/material/core/typography/_typography-utils.scss

@@ -1,5 +1,6 @@
 @use 'sass:list';
 @use 'sass:map';
+@use 'sass:math';
 @use 'sass:meta';
 @use 'sass:string';
 @use '../style/private';
@@ -96,3 +97,9 @@
   @include font-shorthand($font-size, $font-weight, $line-height, $font-family);
   letter-spacing: letter-spacing($config, $level);
 }
+
+/// Coerce a value to `em` if it is a unitless number, otherwise returns
+/// the value provided.
+@function private-coerce-unitless-to-em($value) {
+  @return if(math.is-unitless($value), 1em * $value, $value);
+}

src/material/form-field/_form-field-fill-theme.scss

@@ -72,7 +72,8 @@ $fill-dedupe: 0;
   // The padding below the infix.
   $infix-padding-bottom: 0.75em;
   // The margin applied to the form-field-infix to reserve space for the floating label.
-  $infix-margin-top: 1em * $line-height * $subscript-font-scale;
+  $infix-margin-top:
+      $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height);
   // The amount we offset the label from the input text in the fill appearance.
   $fill-appearance-label-offset: -0.5em;
 

src/material/form-field/_form-field-legacy-theme.scss

@@ -85,7 +85,9 @@ $legacy-dedupe: 0;
   // of the text itself, not the edge of the line; therefore we subtract off the line spacing.
   $infix-padding: 0.5em - $line-spacing;
   // The margin applied to the form-field-infix to reserve space for the floating label.
-  $infix-margin-top: 1em * $line-height * $subscript-font-scale;
+  // If the line-height is given as a unitless number, coerce it to `em`.
+  $infix-margin-top:
+      $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height);
   // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
   // Mocks 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

src/material/form-field/_form-field-outline-theme.scss

@@ -93,7 +93,8 @@ $outline-dedupe: 0;
   // The padding above and below the infix.
   $infix-padding: 1em;
   // The margin applied to the form-field-infix to reserve space for the floating label.
-  $infix-margin-top: 1em * $line-height * $subscript-font-scale;
+  $infix-margin-top:
+      $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height);
   // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
   // Mocks 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

src/material/form-field/_form-field-theme.scss

@@ -146,7 +146,9 @@ $dedupe: 0;
   // The padding on the infix. Mocks show half of the text size.
   $infix-padding: 0.5em;
   // The margin applied to the form-field-infix to reserve space for the floating label.
-  $infix-margin-top: 1em * $line-height * $subscript-font-scale;
+  // If the line-height is given as a unitless number, coerce it to `em`.
+  $infix-margin-top: $subscript-font-scale *
+      typography-utils.private-coerce-unitless-to-em($line-height);
   // Font size to use for the label and subscript text.
   $subscript-font-size: $subscript-font-scale * 100%;
   // Font size to use for the for the prefix and suffix icons.
@@ -183,7 +185,7 @@ $dedupe: 0;
       width: $prefix-suffix-icon-font-scale * 1em;
 
       .mat-icon {
-        height: $line-height * 1em;
+        height: typography-utils.private-coerce-unitless-to-em($line-height);
         line-height: $line-height;
       }
     }

src/material/input/_input-theme.scss

@@ -74,7 +74,7 @@
   // <input> elements seem to have their height set slightly too large on Safari causing the text to
   // be misaligned w.r.t. the placeholder. Adding this margin corrects it.
   input.mat-input-element {
-    margin-top: -$line-spacing * 1em;
+    margin-top: typography-utils.private-coerce-unitless-to-em(-$line-spacing);
   }
 }
 

src/material/select/_select-theme.scss

@@ -75,7 +75,7 @@
   }
 
   .mat-select-trigger {
-    height: $line-height * 1em;
+    height: typography-utils.private-coerce-unitless-to-em($line-height);
   }
 }