fix(material/form-field): inconsistent height for non-text inputs (an…

…gular#26941)

Fixes that some non-text input variants were taller than the text ones.

Fixes angular#26915.

src/material/form-field/BUILD.bazel

@@ -62,6 +62,7 @@ sass_library(
         "_form-field-subscript.scss",
         "_mdc-text-field-structure-overrides.scss",
         "_mdc-text-field-textarea-overrides.scss",
+        "_user-agent-overrides.scss",
     ],
     deps = [
         "//:mdc_sass_lib",

src/material/form-field/_user-agent-overrides.scss

@@ -0,0 +1,24 @@
+// Mixin that resets user agent styles to make the form field behave consistently.
+@mixin private-form-field-user-agent-overrides() {
+  .mat-mdc-form-field-input-control {
+    // Due to the native input masking these inputs can be slightly taller than
+    // the plain text inputs. We normalize it by resetting the line height.
+    &[type='date'],
+    &[type='datetime'],
+    &[type='datetime-local'],
+    &[type='month'],
+    &[type='week'],
+    &[type='time'] {
+      line-height: 1;
+    }
+
+    // Native datetime inputs have an element in the shadow DOM that makes them taller than
+    // other inputs. These changes reset the user agent styles to make them consistent.
+    // via https://8yd.no/article/date-input-height-in-safari
+    &::-webkit-datetime-edit {
+      line-height: 1;
+      padding: 0;
+      margin-bottom: -2px;
+    }
+  }
+}

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

@@ -9,6 +9,7 @@
 @use './form-field-focus-overlay';
 @use './form-field-high-contrast';
 @use './form-field-native-select';
+@use './user-agent-overrides';
 @use './mdc-text-field-textarea-overrides';
 @use './mdc-text-field-structure-overrides';
 
@@ -33,6 +34,7 @@
 @include form-field-focus-overlay.private-form-field-focus-overlay();
 @include form-field-native-select.private-form-field-native-select();
 @include form-field-high-contrast.private-form-field-high-contrast();
+@include user-agent-overrides.private-form-field-user-agent-overrides();
 
 // Host element of the form-field. It contains the mdc-text-field wrapper
 // and the subscript wrapper.