fix(text-field): Update caret color to match spec (#2894)

material-components · Jun 18, 2018 · 88fd0bf · 88fd0bf
1 parent 3ef8116
commit 88fd0bf
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 1 deletion.
diff --git a/demos/text-field.scss b/demos/text-field.scss
@@ -35,6 +35,7 @@
   @include mdc-text-field-helper-text-color($idle-border);
   @include mdc-text-field-textarea-stroke-color($idle-border);
   @include mdc-text-field-icon-color($hover-border);
+  @include mdc-text-field-caret-color($focused-border);
 
   &.mdc-text-field--focused {
     @include mdc-text-field-label-color(rgba(blue, .87));
@@ -50,6 +51,7 @@
   @include mdc-text-field-ink-color(black);
   @include mdc-text-field-label-color(rgba(blue, .5));
   @include mdc-text-field-textarea-stroke-color($idle-border);
+  @include mdc-text-field-caret-color($focused-border);
 
   &.mdc-text-field--focused {
     @include mdc-text-field-label-color(rgba(blue, .87));
@@ -61,6 +63,7 @@
   @include mdc-text-field-ink-color(orange);
   @include mdc-text-field-label-color(rgba(orange, .5));
   @include mdc-text-field-textarea-stroke-color(rgba(orange, .38));
+  @include mdc-text-field-caret-color(orange);
 
   &.mdc-text-field--focused {
     @include mdc-text-field-label-color(rgba(orange, .87));
@@ -73,6 +76,7 @@
   @include mdc-text-field-ink-color(black);
   @include mdc-text-field-label-color(rgba(blue, .5));
   @include mdc-text-field-line-ripple-color(blue);
+  @include mdc-text-field-caret-color(blue);
 
   &.mdc-text-field--focused {
     @include mdc-text-field-label-color(rgba(blue, .87));
@@ -84,6 +88,7 @@
   @include mdc-text-field-ink-color(orange);
   @include mdc-text-field-label-color(rgba(orange, .5));
   @include mdc-text-field-line-ripple-color(orange);
+  @include mdc-text-field-caret-color(orange);
 
   &.mdc-text-field--focused {
     @include mdc-text-field-label-color(rgba(orange, .87));
@@ -106,7 +111,7 @@
   @include mdc-text-field-focused-outline-color($focused-border);
   @include mdc-text-field-helper-text-validation-color($hover-border);
   @include mdc-text-field-textarea-stroke-color($idle-border);
-
+  @include mdc-text-field-caret-color($focused-border);
   @include mdc-text-field-icon-color($focused-border);
 
   // Example for --invalid textfield when helper text is not a validation message.

diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
@@ -247,6 +247,7 @@ Mixin | Description
 `mdc-text-field-ink-color($color)` | Customizes the text entered into the text field.
 `mdc-text-field-label-color($color)` | Customizes the text color of the label.
 `mdc-text-field-line-ripple-color($color)` | Customizes the color of the default line ripple of the text field.
+`mdc-text-field-caret-color($color)` | Customizes the color of the cursor caret of the text field.
 
 ## `MDCTextField` Properties and Methods
 

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -124,6 +124,12 @@
   }
 }
 
+@mixin mdc-text-field-caret-color($color) {
+  .mdc-text-field__input {
+    @include mdc-theme-prop(caret-color, $color);
+  }
+}
+
 // Private mixins
 
 // Baseline
@@ -153,6 +159,7 @@
   @include mdc-text-field-line-ripple-color($mdc-text-field-error);
   @include mdc-text-field-label-color($mdc-text-field-error);
   @include mdc-text-field-helper-text-validation-color($mdc-text-field-error);
+  @include mdc-text-field-caret-color($mdc-text-field-error);
 
   &.mdc-text-field--with-trailing-icon {
     @include mdc-text-field-icon-color($mdc-text-field-error);

diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
@@ -41,6 +41,7 @@
   @include mdc-text-field-helper-text-color($mdc-text-field-helper-text-color);
   @include mdc-text-field-fullwidth-bottom-line-color($mdc-text-field-fullwidth-bottom-line-color);
   @include mdc-text-field-icon-color($mdc-text-field-icon-color);
+  @include mdc-text-field-caret-color(primary);
 
   display: inline-block;
   position: relative;