fix(textfield): Fix textarea label from overlapping border. (#1715)

material-components · Jan 10, 2018 · 673a84d · 673a84d
1 parent ae1993a
commit 673a84d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
@@ -50,6 +50,8 @@ $mdc-text-field-outlined-hover-border: rgba(black, .87);
 $mdc-textarea-border-on-light: rgba(black, .73);
 $mdc-textarea-border-on-dark: rgba(white, 1);
 $mdc-textarea-light-background: rgba(white, 1);
+// cannot be transparent because multiline textarea input
+// will make text unreadable
 $mdc-textarea-dark-background: rgba(48, 48, 48, 1);
 $mdc-textarea-disabled-background-on-light: rgba(249, 249, 249, 1);
 $mdc-textarea-disabled-background-on-dark: rgba(47, 47, 47, 1);

diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
@@ -439,6 +439,7 @@
   $label-offset-x: $padding-inset;
 
   display: flex;
+  width: fit-content;
   height: initial;
   transition: none;
   border: 1px solid $mdc-textarea-border-on-light;
@@ -450,6 +451,7 @@
 
   // stylelint-disable plugin/selector-bem-pattern
   .mdc-text-field__input {
+    margin: 0;
     padding: $padding-inset;
     padding-top: $padding-inset * 2;
     border: 1px solid transparent;
@@ -484,6 +486,7 @@
     bottom: auto;
     padding: 8px 16px;
     background-color: $mdc-textarea-light-background;
+    line-height: 1.15;
 
     @include mdc-theme-dark(".mdc-text-field") {
       background-color: $mdc-textarea-dark-background;
@@ -538,6 +541,10 @@
     }
   }
 
+  .mdc-text-field__input {
+    resize: vertical;
+  }
+
   @include mdc-theme-dark {
     border-bottom: 1px solid $mdc-text-field-divider-on-dark;
   }