fix(textfield): hide filled-variant floating label at <52px

packages/mdc-textfield/_mixins.scss

@@ -95,16 +95,13 @@
   .mdc-text-field__input {
     // Exclude setting line-height to keep caret (text cursor) same height as the input text in iOS browser.
     @include typography-mixins.typography(subtitle1, $exclude-props: (line-height), $query: $query);
+    @include input-padding_($query: $query);
 
     @include feature-targeting-mixins.targets($feat-structure) {
       align-self: flex-end;
       box-sizing: border-box;
       width: 100%;
       height: 100%;
-      padding:
-        variables.$input-padding-top
-        variables.$input-padding
-        variables.$input-padding-bottom + variables.$input-border-bottom;
       border: none;
       border-radius: 0;
       background: none;
@@ -162,10 +159,7 @@
 
     // Vertically center aligns the text input placeholder and value for only filled variant.
     .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) & {
-      @include feature-targeting-mixins.targets($feat-structure) {
-        padding-top: 16px;
-        padding-bottom: 16px + variables.$input-border-bottom;
-      }
+      @include input-no-label-padding_($query: $query);
     }
   }
 
@@ -389,15 +383,17 @@
 ///
 /// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,
 ///     `-3`, `-2`, `-1`, `0`. Default is `0`.
+/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for
+///     filled textfields at which to allow floating labels.
 ///
-@mixin density($density-scale, $query: feature-targeting-functions.all()) {
+@mixin density($density-scale, $minimum-height-for-filled-label: variables.$minimum-height-for-filled-label, $query: feature-targeting-functions.all()) {
   $height: density-functions.prop-value(
     $density-config: variables.$density-config,
     $density-scale: $density-scale,
     $property-name: height,
   );
 
-  @include height($height, $query: $query);
+  @include height($height, $minimum-height-for-filled-label: $minimum-height-for-filled-label, $query: $query);
 }
 
 ///
@@ -436,29 +432,29 @@
 /// Sets height of default text field variant.
 ///
 /// @param {Number} $height
+/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for
+///     filled textfields at which to allow floating labels.
 /// @access public
 ///
-@mixin height($height, $query: feature-targeting-functions.all()) {
+@mixin height($height, $minimum-height-for-filled-label: variables.$minimum-height-for-filled-label, $query: feature-targeting-functions.all()) {
   $feat-structure: feature-targeting-functions.create-target($query, structure);
 
   @include feature-targeting-mixins.targets($feat-structure) {
     height: $height;
   }
 
-  // Target only dense text field.
-  @if $height <= 40px {
-    // Target only IE 11.
-    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-      .mdc-text-field__input {
-        @include feature-targeting-mixins.targets($feat-structure) {
-          // Set line-height to the height of input element excluding padding & border.
-          line-height:
-            $height
-            - variables.$input-padding-top
-            - variables.$input-padding-bottom
-            - variables.$input-border-bottom;
+  @if $height < $minimum-height-for-filled-label {
+    // Filled text fields must be tall enough to display a label
+    &:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) {
+      @include feature-targeting-mixins.targets($feat-structure) {
+        .mdc-floating-label {
+          display: none;
         }
       }
+
+      .mdc-text-field__input {
+        @include input-no-label-padding_($query: $query);
+      }
     }
   }
 }
@@ -741,6 +737,26 @@
 
 // Baseline
 
+@mixin input-padding_($query: feature-targeting-functions.all()) {
+  $feat-structure: feature-targeting-functions.create-target($query, structure);
+
+  @include feature-targeting-mixins.targets($feat-structure) {
+    padding:
+      variables.$input-padding-top
+      variables.$input-padding
+      variables.$input-padding-bottom + variables.$input-border-bottom;
+  }
+}
+
+@mixin input-no-label-padding_($query: feature-targeting-functions.all()) {
+  $feat-structure: feature-targeting-functions.create-target($query, structure);
+
+  @include feature-targeting-mixins.targets($feat-structure) {
+    padding-top: 0;
+    padding-bottom: variables.$input-border-bottom;
+  }
+}
+
 @mixin disabled_($query: feature-targeting-functions.all()) {
   $feat-structure: feature-targeting-functions.create-target($query, structure);
 
@@ -1016,9 +1032,9 @@
   }
 
   .mdc-text-field__input {
+    @include outlined-input-padding_($query: $query);
     @include feature-targeting-mixins.targets($feat-structure) {
       display: flex;
-      padding: 12px 16px 14px;
       border: none !important; // FF adds unwanted border in HC mode on windows.
       background-color: transparent;
       z-index: 1;
@@ -1036,6 +1052,15 @@
   }
 }
 
+@mixin outlined-input-padding_($query: feature-targeting-functions.all()) {
+  $feat-structure: feature-targeting-functions.create-target($query, structure);
+
+  @include feature-targeting-mixins.targets($feat-structure) {
+    padding-top: variables.$outlined-input-padding-top;
+    padding-bottom: variables.$outlined-input-padding-bottom;
+  }
+}
+
 @mixin hover-outline-color_($color, $query: feature-targeting-functions.all()) {
   &:not(.mdc-text-field--focused):hover {
     .mdc-notched-outline {

packages/mdc-textfield/_variables.scss

@@ -73,6 +73,7 @@ $textarea-disabled-background: rgba(249, 249, 249, 1) !default;
 $outlined-stroke-width: 2px !default;
 $height: 56px !default;
 $minimum-height: 40px !default;
+$minimum-height-for-filled-label: 52px !default;
 $maximum-height: $height !default;
 $density-scale: density-variables.$default-scale !default;
 $density-config: (
@@ -96,5 +97,7 @@ $helper-line-padding: 16px !default;
 $input-padding: 16px !default;
 $input-padding-top: 20px !default;
 $input-padding-bottom: 6px !default;
+$outlined-input-padding-top: 12px !default;
+$outlined-input-padding-bottom: 14px !default;
 $input-border-bottom: 1px !default;
 // Note that the scale factor is an eyeballed approximation of what's shown in the mocks.