fix(text-field): Apply error color on bottom line of fullwidth field (#…

…2197)
material-components · Feb 8, 2018 · a6500bd · a6500bd
1 parent 667513c
commit a6500bd
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/demos/text-field.scss b/demos/text-field.scss
@@ -60,7 +60,7 @@
 .demo-textarea.mdc-text-field--invalid {
   @include mdc-text-field-ink-color(orange);
   @include mdc-text-field-label-color(rgba(orange, .5));
-  @include mdc-text-field-textarea-stroke-color(orange);
+  @include mdc-text-field-textarea-stroke-color(rgba(orange, .38));
 
   &.mdc-text-field--focused {
     @include mdc-text-field-label-color(rgba(orange, .87));
@@ -69,6 +69,7 @@
 }
 
 .demo-fullwidth-input:not(.mdc-text-field--invalid) {
+  @include mdc-text-field-fullwidth-bottom-line-color(rgba(blue, .38));
   @include mdc-text-field-ink-color(black);
   @include mdc-text-field-label-color(rgba(blue, .5));
   @include mdc-text-field-line-ripple-color(blue);
@@ -79,6 +80,7 @@
 }
 
 .demo-fullwidth-input.mdc-text-field--invalid {
+  @include mdc-text-field-fullwidth-bottom-line-color(rgba(orange, .38));
   @include mdc-text-field-ink-color(orange);
   @include mdc-text-field-label-color(rgba(orange, .5));
   @include mdc-text-field-line-ripple-color(orange);

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -139,7 +139,7 @@
 @mixin mdc-text-field-focused_ {
   @include mdc-text-field-label-color(primary);
 
-  @include mdc-required-text-field-label-asterix_ {
+  @include mdc-required-text-field-label-asterisk_ {
     color: $mdc-text-field-error;
   }
 
@@ -157,7 +157,7 @@
   font-size: .813rem;
 }
 
-@mixin mdc-required-text-field-label-asterix_() {
+@mixin mdc-required-text-field-label-asterisk_() {
   .mdc-text-field__input:required + .mdc-text-field__label::after {
     @content;
   }
@@ -339,7 +339,7 @@
 
 // Full Width
 
-@mixin mdc-text-field-full-width_ {
+@mixin mdc-text-field-fullwidth_ {
   width: 100%;
 
   .mdc-text-field__input {
@@ -366,6 +366,10 @@
   }
 }
 
+@mixin mdc-text-field-fullwidth-invalid_ {
+  @include mdc-text-field-fullwidth-bottom-line-color($mdc-text-field-error);
+}
+
 // Textarea
 
 @mixin mdc-text-field-textarea-disabled_ {

diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
@@ -173,7 +173,7 @@
   @include mdc-text-field-dense_;
 }
 
-@include mdc-required-text-field-label-asterix_ {
+@include mdc-required-text-field-label-asterisk_ {
   margin-left: 1px;
   content: "*";
 }
@@ -183,7 +183,11 @@
 }
 
 .mdc-text-field--fullwidth {
-  @include mdc-text-field-full-width_;
+  @include mdc-text-field-fullwidth_;
+}
+
+.mdc-text-field--fullwidth.mdc-text-field--invalid {
+  @include mdc-text-field-fullwidth-invalid_;
 }
 
 // postcss-bem-linter: define text-field-helper-text