fix(text-field): Fixes input text alignment on IE11 for densed text f…

…ield (#5136)
material-components · Oct 2, 2019 · 892dd4e · 892dd4e
1 parent b26ad23
commit 892dd4e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -91,6 +91,22 @@
 ///
 @mixin mdc-text-field-height($height) {
   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 {
+        // Set line-height to the height of input element excluding padding & border.
+        line-height:
+          $height
+          - $mdc-text-field-input-padding
+          - $mdc-text-field-input-padding-top
+          - $mdc-text-field-input-padding-bottom
+          - $mdc-text-field-input-border-bottom;
+      }
+    }
+  }
 }
 
 ///
@@ -363,8 +379,9 @@
   $resolved-radius: nth(mdc-shape-resolve-percentage-radius($text-field-height, mdc-shape-prop-value($radius)), 1);
 
   @if (length(mdc-shape-prop-value($radius)) > 1) {
-    // stylelint-disable-next-line max-line-length
+    // stylelint-disable max-line-length
     @warn "mdc-text-field-outline-shape-radius only supports a single radius; see https://github.com/material-components/material-components-web/issues/4140";
+    // stylelint-enable
   }
 
   .mdc-notched-outline {

diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
@@ -91,4 +91,7 @@ $mdc-text-field-outlined-dense-with-leading-icon-label-position-x: 21px !default
 $mdc-text-field-textarea-label-position-y: 130% !default;
 $mdc-text-field-helper-line-padding: 16px !default;
 $mdc-text-field-input-padding: 16px !default;
+$mdc-text-field-input-padding-top: 20px !default;
+$mdc-text-field-input-padding-bottom: 6px !default;
+$mdc-text-field-input-border-bottom: 1px !default;
 // Note that the scale factor is an eyeballed approximation of what's shown in the mocks.
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
@@ -85,7 +85,10 @@
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding: 20px 16px 6px;
+  padding:
+    $mdc-text-field-input-padding-top
+    $mdc-text-field-input-padding
+    $mdc-text-field-input-padding-bottom;
   transition: mdc-text-field-transition(opacity);
   border: none;
   border-bottom: 1px solid;