From ca965fdbdab8051d2eb692a31ac0902b71650a89 Mon Sep 17 00:00:00 2001 From: Will Ernest Date: Wed, 6 Jun 2018 13:55:03 -0700 Subject: [PATCH 1/4] fix(text-field): Update caret-color to primary or error --- packages/mdc-textfield/_mixins.scss | 1 + packages/mdc-textfield/mdc-text-field.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss index ce14bdd0ff1..5a051d65ee5 100644 --- a/packages/mdc-textfield/_mixins.scss +++ b/packages/mdc-textfield/_mixins.scss @@ -153,6 +153,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-theme-prop(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 index 22418853593..4b5781eb9ad 100644 --- 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-theme-prop(caret-color, primary); display: inline-block; position: relative; From 20075c1e7e1cce7603d64f3cbc98a2be45d0dd2b Mon Sep 17 00:00:00 2001 From: Will Ernest Date: Wed, 6 Jun 2018 14:08:09 -0700 Subject: [PATCH 2/4] fix(text-field): Update error color --- packages/mdc-textfield/_mixins.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss index 5a051d65ee5..ce14bdd0ff1 100644 --- a/packages/mdc-textfield/_mixins.scss +++ b/packages/mdc-textfield/_mixins.scss @@ -153,7 +153,6 @@ @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-theme-prop(caret-color, $mdc-text-field-error); &.mdc-text-field--with-trailing-icon { @include mdc-text-field-icon-color($mdc-text-field-error); From 02c1b795098b3f3a9e6e99f883db967ddd6aeab6 Mon Sep 17 00:00:00 2001 From: Will Ernest Date: Wed, 6 Jun 2018 14:42:07 -0700 Subject: [PATCH 3/4] fix(text-field): Add mixin for caret-color --- demos/text-field.scss | 7 ++++++- packages/mdc-textfield/README.md | 1 + packages/mdc-textfield/_mixins.scss | 13 +++++++++++++ packages/mdc-textfield/mdc-text-field.scss | 2 +- 4 files changed, 21 insertions(+), 2 deletions(-) diff --git a/demos/text-field.scss b/demos/text-field.scss index b5c4ab1d9e4..13b70672fb1 100644 --- 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 index f354e164b78..5caf8341068 100644 --- 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 index ce14bdd0ff1..8f4a9fede18 100644 --- a/packages/mdc-textfield/_mixins.scss +++ b/packages/mdc-textfield/_mixins.scss @@ -124,6 +124,12 @@ } } +@mixin mdc-text-field-caret-color($color) { + &:not(.mdc-text-field--disabled) { + @include mdc-text-field-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); @@ -565,3 +572,9 @@ @include mdc-theme-prop(color, $color); } } + +@mixin mdc-text-field-caret-color_($color) { + .mdc-text-field__input { + @include mdc-theme-prop(caret-color, $color); + } +} diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss index 4b5781eb9ad..32f4f576abe 100644 --- a/packages/mdc-textfield/mdc-text-field.scss +++ b/packages/mdc-textfield/mdc-text-field.scss @@ -41,7 +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-theme-prop(caret-color, primary); + @include mdc-text-field-caret-color(primary); display: inline-block; position: relative; From a90b2b55f109148f0391c85e894e1bc1bc3f6094 Mon Sep 17 00:00:00 2001 From: Will Ernest Date: Mon, 18 Jun 2018 10:10:46 -0700 Subject: [PATCH 4/4] fix(text-field): Update for comments --- packages/mdc-textfield/_mixins.scss | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss index 8f4a9fede18..217adbc9249 100644 --- a/packages/mdc-textfield/_mixins.scss +++ b/packages/mdc-textfield/_mixins.scss @@ -125,8 +125,8 @@ } @mixin mdc-text-field-caret-color($color) { - &:not(.mdc-text-field--disabled) { - @include mdc-text-field-caret-color_($color); + .mdc-text-field__input { + @include mdc-theme-prop(caret-color, $color); } } @@ -572,9 +572,3 @@ @include mdc-theme-prop(color, $color); } } - -@mixin mdc-text-field-caret-color_($color) { - .mdc-text-field__input { - @include mdc-theme-prop(caret-color, $color); - } -}