feat(line-ripple): add active/inactive states to line-ripple

asyncLiz · web-flow · commit b6c7f624bc7d · 2020-01-31T08:57:29.000-08:00
BREAKING CHANGE: `mdc-line-ripple-color()` mixin has been renamed to `mdc-line-ripple-active-color()`
diff --git a/packages/mdc-line-ripple/_mixins.scss b/packages/mdc-line-ripple/_mixins.scss
@@ -34,39 +34,66 @@
   // postcss-bem-linter: define line-ripple
   .mdc-line-ripple {
     @include feature-targeting-mixins.targets($feat-structure) {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 2px;
-      transform: scaleX(0);
-      opacity: 0;
-      z-index: 2;
+      &::before,
+      &::after {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        border-bottom-style: solid;
+        content: "";
+      }
+
+      &::before {
+        border-bottom-width: 1px;
+        z-index: 1;
+      }
+
+      &::after {
+        transform: scaleX(0);
+        border-bottom-width: 2px;
+        opacity: 0;
+        z-index: 2;
+      }
     }
 
     @include feature-targeting-mixins.targets($feat-animation) {
-      transition: functions.transition-value(transform), functions.transition-value(opacity);
+      &::after {
+        transition: functions.transition-value(transform), functions.transition-value(opacity);
+      }
     }
   }
 
-  .mdc-line-ripple--active {
+  .mdc-line-ripple--active::after {
     @include feature-targeting-mixins.targets($feat-structure) {
       transform: scaleX(1);
       opacity: 1;
     }
   }
 
-  .mdc-line-ripple--deactivating {
+  .mdc-line-ripple--deactivating::after {
     @include feature-targeting-mixins.targets($feat-structure) {
       opacity: 0;
     }
   }
 }
 
-@mixin color($color, $query: feature-targeting-functions.all()) {
+@mixin active-color($color, $query: feature-targeting-functions.all()) {
   $feat-color: feature-targeting-functions.create-target($query, color);
 
   @include feature-targeting-mixins.targets($feat-color) {
-    @include theme-mixins.prop(background-color, $color);
+    &::after {
+      @include theme-mixins.prop(border-bottom-color, $color);
+    }
+  }
+}
+
+@mixin inactive-color($color, $query: feature-targeting-functions.all()) {
+  $feat-color: feature-targeting-functions.create-target($query, color);
+
+  @include feature-targeting-mixins.targets($feat-color) {
+    &::before {
+      @include theme-mixins.prop(border-bottom-color, $color);
+    }
   }
 }
diff --git a/packages/mdc-line-ripple/test/feature-targeting-any.test.scss b/packages/mdc-line-ripple/test/feature-targeting-any.test.scss
@@ -4,7 +4,7 @@
 @mixin test($query) {
   .test {
     @include line-ripple.core-styles($query: $query);
-    @include line-ripple.color(red, $query: $query);
+    @include line-ripple.active-color(red, $query: $query);
   }
 }
 
diff --git a/packages/mdc-select/_mixins.scss b/packages/mdc-select/_mixins.scss
@@ -59,8 +59,8 @@
 }
 
 @mixin hover-bottom-line-color($color) {
-  &:not(.mdc-select--disabled) .mdc-select__selected-text:hover {
-    @include native-control-bottom-line-color_($color);
+  &:not(.mdc-select--disabled):hover {
+    @include bottom-line-color_($color);
   }
 }
 
@@ -180,18 +180,14 @@
 }
 
 @mixin bottom-line-color_($color) {
-  .mdc-select__selected-text {
-    @include native-control-bottom-line-color_($color);
+  .mdc-line-ripple {
+    @include line-ripple-mixins.inactive-color($color);
   }
 }
 
-@mixin native-control-bottom-line-color_($color) {
-  @include theme-mixins.prop(border-bottom-color, $color);
-}
-
 @mixin focused-line-ripple-color_($color) {
   @include focused-line-ripple_ {
-    @include line-ripple-mixins.color($color);
+    @include line-ripple-mixins.active-color($color);
   }
 }
 
@@ -305,7 +301,6 @@
     padding-top: 20px;
     padding-bottom: 4px;
     border: none;
-    border-bottom: 1px solid;
     outline: none;
     background-color: transparent;
     color: inherit; // Override default user agent stylesheet
@@ -327,7 +322,12 @@
   }
 
   .mdc-line-ripple {
-    display: none;
+    @include line-ripple-mixins.inactive-color(variables.$disabled-ink-color);
+
+    &::before {
+      // TODO(b/146080006)
+      border-bottom-style: dotted;
+    }
   }
 
   .mdc-select__icon {
@@ -337,17 +337,12 @@
   .mdc-select__selected-text {
     @include theme-mixins.prop(color, variables.$disabled-ink-color);
 
-    border-bottom-style: dotted;
     pointer-events: none;
   }
 
   &.mdc-select--outlined {
     @include container-fill-color_(transparent);
     @include outline-color_(variables.$outlined-disabled-border);
-
-    .mdc-select__selected-text {
-      border-bottom-style: none;
-    }
   }
 
   cursor: default;
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -104,9 +104,8 @@
       padding:
         variables.$input-padding-top
         variables.$input-padding
-        variables.$input-padding-bottom;
+        variables.$input-padding-bottom + variables.$input-border-bottom;
       border: none;
-      border-bottom: 1px solid;
       border-radius: 0;
       background: none;
       appearance: none;
@@ -165,7 +164,7 @@
     .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) & {
       @include feature-targeting-mixins.targets($feat-structure) {
         padding-top: 16px;
-        padding-bottom: 16px;
+        padding-bottom: 16px + variables.$input-border-bottom;
       }
     }
   }
@@ -755,8 +754,11 @@
   @include icon-mixins.trailing-icon-color_(variables.$disabled-icon, $query: $query);
   @include fill-color_(variables.$disabled-background, $query: $query);
 
+  @media screen and (-ms-high-contrast: active) {
+    @include bottom-line-color_(GrayText, $query: $query);
+  }
+
   @include feature-targeting-mixins.targets($feat-structure) {
-    border-bottom: none;
     pointer-events: none;
   }
 
@@ -938,16 +940,8 @@
 // Outlined
 
 @mixin outlined-disabled_($query: feature-targeting-functions.all()) {
-  $feat-structure: feature-targeting-functions.create-target($query, structure);
-
   @include notched-outline-mixins.color(variables.$outlined-disabled-border, $query: $query);
   @include fill-color_(transparent, $query);
-
-  .mdc-text-field__input {
-    @include feature-targeting-mixins.targets($feat-structure) {
-      border-bottom: none;
-    }
-  }
 }
 
 @mixin outlined-invalid_($query: feature-targeting-functions.all()) {
@@ -1008,7 +1002,6 @@
   @include fill-color(transparent, $query: $query);
 
   @include feature-targeting-mixins.targets($feat-structure) {
-    border: none;
     overflow: visible;
   }
 
@@ -1034,13 +1027,9 @@
 }
 
 @mixin hover-outline-color_($color, $query: feature-targeting-functions.all()) {
-  &:not(.mdc-text-field--focused) {
-    // stylelint-disable-next-line selector-combinator-space-after
-    .mdc-text-field__input:hover ~,
-    .mdc-text-field__icon:hover ~ {
-      .mdc-notched-outline {
-        @include notched-outline-mixins.color($color, $query: $query);
-      }
+  &:not(.mdc-text-field--focused):hover {
+    .mdc-notched-outline {
+      @include notched-outline-mixins.color($color, $query: $query);
     }
   }
 }
@@ -1212,7 +1201,7 @@
 
     .mdc-text-field__input {
       @include feature-targeting-mixins.targets($feat-structure) {
-        padding: 0;
+        padding: 0 0 variables.$input-border-bottom;
       }
     }
   }
@@ -1276,7 +1265,6 @@
       height: auto;
       margin: $padding-inset / 2 1px 1px 0;
       padding: 0 $padding-inset $padding-inset;
-      border: none;
     }
 
     @include feature-targeting-mixins.targets($feat-typography) {
@@ -1385,28 +1373,22 @@
 }
 
 @mixin bottom-line-color_($color, $query: feature-targeting-functions.all()) {
-  $feat-color: feature-targeting-functions.create-target($query, color);
-
-  .mdc-text-field__input {
-    @include feature-targeting-mixins.targets($feat-color) {
-      @include theme-mixins.prop(border-bottom-color, $color);
-    }
+  .mdc-line-ripple {
+    @include line-ripple-mixins.inactive-color($color, $query: $query);
   }
 }
 
 @mixin hover-bottom-line-color_($color, $query: feature-targeting-functions.all()) {
   $feat-color: feature-targeting-functions.create-target($query, color);
 
-  .mdc-text-field__input:hover {
-    @include feature-targeting-mixins.targets($feat-color) {
-      @include theme-mixins.prop(border-bottom-color, $color);
-    }
+  &:hover .mdc-line-ripple {
+    @include line-ripple-mixins.inactive-color($color, $query: $query);
   }
 }
 
 @mixin line-ripple-color_($color, $query: feature-targeting-functions.all()) {
   .mdc-line-ripple {
-    @include line-ripple-mixins.color($color, $query: $query);
+    @include line-ripple-mixins.active-color($color, $query: $query);
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`	`@mixin test($query) {`
`5`	`5`	`.test {`
`6`	`6`	`@include line-ripple.core-styles($query: $query);`
`7`		`- @include line-ripple.color(red, $query: $query);`
	`7`	`+ @include line-ripple.active-color(red, $query: $query);`
`8`	`8`	`}`
`9`	`9`	`}`
`10`	`10`
Original file line number	Diff line number	Diff line change
`@@ -59,8 +59,8 @@`
`59`	`59`	`}`
`60`	`60`
`61`	`61`	`@mixin hover-bottom-line-color($color) {`
`62`		`- &:not(.mdc-select--disabled) .mdc-select__selected-text:hover {`
`63`		`- @include native-control-bottom-line-color_($color);`
	`62`	`+ &:not(.mdc-select--disabled):hover {`
	`63`	`+ @include bottom-line-color_($color);`
`64`	`64`	`}`
`65`	`65`	`}`
`66`	`66`
`@@ -180,18 +180,14 @@`
`180`	`180`	`}`
`181`	`181`
`182`	`182`	`@mixin bottom-line-color_($color) {`
`183`		`- .mdc-select__selected-text {`
`184`		`- @include native-control-bottom-line-color_($color);`
	`183`	`+ .mdc-line-ripple {`
	`184`	`+ @include line-ripple-mixins.inactive-color($color);`
`185`	`185`	`}`
`186`	`186`	`}`
`187`	`187`
`188`		`-@mixin native-control-bottom-line-color_($color) {`
`189`		`- @include theme-mixins.prop(border-bottom-color, $color);`
`190`		`-}`
`191`		`-`
`192`	`188`	`@mixin focused-line-ripple-color_($color) {`
`193`	`189`	`@include focused-line-ripple_ {`
`194`		`- @include line-ripple-mixins.color($color);`
	`190`	`+ @include line-ripple-mixins.active-color($color);`
`195`	`191`	`}`
`196`	`192`	`}`
`197`	`193`
`@@ -305,7 +301,6 @@`
`305`	`301`	`padding-top: 20px;`
`306`	`302`	`padding-bottom: 4px;`
`307`	`303`	`border: none;`
`308`		`- border-bottom: 1px solid;`
`309`	`304`	`outline: none;`
`310`	`305`	`background-color: transparent;`
`311`	`306`	`color: inherit; // Override default user agent stylesheet`
`@@ -327,7 +322,12 @@`
`327`	`322`	`}`
`328`	`323`
`329`	`324`	`.mdc-line-ripple {`
`330`		`- display: none;`
	`325`	`+ @include line-ripple-mixins.inactive-color(variables.$disabled-ink-color);`
	`326`	`+`
	`327`	`+ &::before {`
	`328`	`+ // TODO(b/146080006)`
	`329`	`+ border-bottom-style: dotted;`
	`330`	`+ }`
`331`	`331`	`}`
`332`	`332`
`333`	`333`	`.mdc-select__icon {`
`@@ -337,17 +337,12 @@`
`337`	`337`	`.mdc-select__selected-text {`
`338`	`338`	`@include theme-mixins.prop(color, variables.$disabled-ink-color);`
`339`	`339`
`340`		`- border-bottom-style: dotted;`
`341`	`340`	`pointer-events: none;`
`342`	`341`	`}`
`343`	`342`
`344`	`343`	`&.mdc-select--outlined {`
`345`	`344`	`@include container-fill-color_(transparent);`
`346`	`345`	`@include outline-color_(variables.$outlined-disabled-border);`
`347`		`-`
`348`		`- .mdc-select__selected-text {`
`349`		`- border-bottom-style: none;`
`350`		`- }`
`351`	`346`	`}`
`352`	`347`
`353`	`348`	`cursor: default;`
Original file line number	Diff line number	Diff line change
`@@ -104,9 +104,8 @@`
`104`	`104`	`padding:`
`105`	`105`	`variables.$input-padding-top`
`106`	`106`	`variables.$input-padding`
`107`		`- variables.$input-padding-bottom;`
	`107`	`+ variables.$input-padding-bottom + variables.$input-border-bottom;`
`108`	`108`	`border: none;`
`109`		`- border-bottom: 1px solid;`
`110`	`109`	`border-radius: 0;`
`111`	`110`	`background: none;`
`112`	`111`	`appearance: none;`
`@@ -165,7 +164,7 @@`
`165`	`164`	`.mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) & {`
`166`	`165`	`@include feature-targeting-mixins.targets($feat-structure) {`
`167`	`166`	`padding-top: 16px;`
`168`		`- padding-bottom: 16px;`
	`167`	`+ padding-bottom: 16px + variables.$input-border-bottom;`
`169`	`168`	`}`
`170`	`169`	`}`
`171`	`170`	`}`
`@@ -755,8 +754,11 @@`
`755`	`754`	`@include icon-mixins.trailing-icon-color_(variables.$disabled-icon, $query: $query);`
`756`	`755`	`@include fill-color_(variables.$disabled-background, $query: $query);`
`757`	`756`
	`757`	`+ @media screen and (-ms-high-contrast: active) {`
	`758`	`+ @include bottom-line-color_(GrayText, $query: $query);`
	`759`	`+ }`
	`760`	`+`
`758`	`761`	`@include feature-targeting-mixins.targets($feat-structure) {`
`759`		`- border-bottom: none;`
`760`	`762`	`pointer-events: none;`
`761`	`763`	`}`
`762`	`764`
`@@ -938,16 +940,8 @@`
`938`	`940`	`// Outlined`
`939`	`941`
`940`	`942`	`@mixin outlined-disabled_($query: feature-targeting-functions.all()) {`
`941`		`- $feat-structure: feature-targeting-functions.create-target($query, structure);`
`942`		`-`
`943`	`943`	`@include notched-outline-mixins.color(variables.$outlined-disabled-border, $query: $query);`
`944`	`944`	`@include fill-color_(transparent, $query);`
`945`		`-`
`946`		`- .mdc-text-field__input {`
`947`		`- @include feature-targeting-mixins.targets($feat-structure) {`
`948`		`- border-bottom: none;`
`949`		`- }`
`950`		`- }`
`951`	`945`	`}`
`952`	`946`
`953`	`947`	`@mixin outlined-invalid_($query: feature-targeting-functions.all()) {`
`@@ -1008,7 +1002,6 @@`
`1008`	`1002`	`@include fill-color(transparent, $query: $query);`
`1009`	`1003`
`1010`	`1004`	`@include feature-targeting-mixins.targets($feat-structure) {`
`1011`		`- border: none;`
`1012`	`1005`	`overflow: visible;`
`1013`	`1006`	`}`
`1014`	`1007`
`@@ -1034,13 +1027,9 @@`
`1034`	`1027`	`}`
`1035`	`1028`
`1036`	`1029`	`@mixin hover-outline-color_($color, $query: feature-targeting-functions.all()) {`
`1037`		`- &:not(.mdc-text-field--focused) {`
`1038`		`- // stylelint-disable-next-line selector-combinator-space-after`
`1039`		`- .mdc-text-field__input:hover ~,`
`1040`		`- .mdc-text-field__icon:hover ~ {`
`1041`		`- .mdc-notched-outline {`
`1042`		`- @include notched-outline-mixins.color($color, $query: $query);`
`1043`		`- }`
	`1030`	`+ &:not(.mdc-text-field--focused):hover {`
	`1031`	`+ .mdc-notched-outline {`
	`1032`	`+ @include notched-outline-mixins.color($color, $query: $query);`
`1044`	`1033`	`}`
`1045`	`1034`	`}`
`1046`	`1035`	`}`
`@@ -1212,7 +1201,7 @@`
`1212`	`1201`
`1213`	`1202`	`.mdc-text-field__input {`
`1214`	`1203`	`@include feature-targeting-mixins.targets($feat-structure) {`
`1215`		`- padding: 0;`
	`1204`	`+ padding: 0 0 variables.$input-border-bottom;`
`1216`	`1205`	`}`
`1217`	`1206`	`}`
`1218`	`1207`	`}`
`@@ -1276,7 +1265,6 @@`
`1276`	`1265`	`height: auto;`
`1277`	`1266`	`margin: $padding-inset / 2 1px 1px 0;`
`1278`	`1267`	`padding: 0 $padding-inset $padding-inset;`
`1279`		`- border: none;`
`1280`	`1268`	`}`
`1281`	`1269`
`1282`	`1270`	`@include feature-targeting-mixins.targets($feat-typography) {`
`@@ -1385,28 +1373,22 @@`
`1385`	`1373`	`}`
`1386`	`1374`
`1387`	`1375`	`@mixin bottom-line-color_($color, $query: feature-targeting-functions.all()) {`
`1388`		`- $feat-color: feature-targeting-functions.create-target($query, color);`
`1389`		`-`
`1390`		`- .mdc-text-field__input {`
`1391`		`- @include feature-targeting-mixins.targets($feat-color) {`
`1392`		`- @include theme-mixins.prop(border-bottom-color, $color);`
`1393`		`- }`
	`1376`	`+ .mdc-line-ripple {`
	`1377`	`+ @include line-ripple-mixins.inactive-color($color, $query: $query);`
`1394`	`1378`	`}`
`1395`	`1379`	`}`
`1396`	`1380`
`1397`	`1381`	`@mixin hover-bottom-line-color_($color, $query: feature-targeting-functions.all()) {`
`1398`	`1382`	`$feat-color: feature-targeting-functions.create-target($query, color);`
`1399`	`1383`
`1400`		`- .mdc-text-field__input:hover {`
`1401`		`- @include feature-targeting-mixins.targets($feat-color) {`
`1402`		`- @include theme-mixins.prop(border-bottom-color, $color);`
`1403`		`- }`
	`1384`	`+ &:hover .mdc-line-ripple {`
	`1385`	`+ @include line-ripple-mixins.inactive-color($color, $query: $query);`
`1404`	`1386`	`}`
`1405`	`1387`	`}`
`1406`	`1388`
`1407`	`1389`	`@mixin line-ripple-color_($color, $query: feature-targeting-functions.all()) {`
`1408`	`1390`	`.mdc-line-ripple {`
`1409`		`- @include line-ripple-mixins.color($color, $query: $query);`
	`1391`	`+ @include line-ripple-mixins.active-color($color, $query: $query);`
`1410`	`1392`	`}`
`1411`	`1393`	`}`
`1412`	`1394`