fix(textfield): Fix several tokens in theming API

1. Correctly apply `disabled-active-indicator-color` token 2. Apply `hover-state-layer` related tokens 3. Fix active indicator (underline) token 4. Do not apply heigh customisations for textarea 5. Fix selector for supporting text color and font tokens PiperOrigin-RevId: 475872348
material-components · Sep 21, 2022 · 9f17ff2 · 9f17ff2
1 parent 271aedc
commit 9f17ff2
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 76 deletions.
diff --git a/packages/mdc-textfield/_filled-text-field-theme.scss b/packages/mdc-textfield/_filled-text-field-theme.scss
@@ -26,7 +26,6 @@
 
 @use 'sass:map';
 @use '@material/line-ripple/mixins' as line-ripple-mixins;
-@use '@material/ripple/ripple-theme';
 @use '@material/theme/theme';
 @use '@material/tokens/resolvers';
 @use './text-field-theme';
@@ -145,7 +144,7 @@ $_light-theme: (
       default: map.get($theme, active-indicator-color),
       hover: map.get($theme, hover-active-indicator-color),
       focus: map.get($theme, focus-active-indicator-color),
-      disabled: map.get($theme, disabled-active-indicator-color),
+      disabled: map.get($theme, disabled-indicator-color),
     )
   );
   @include _error-active-indicator-color(
@@ -156,16 +155,6 @@ $_light-theme: (
     )
   );
   @include _active-indicator-height(map.get($theme, active-indicator-height));
-  @include _hover-state-layer(
-    (
-      error-hover-state-layer-color:
-        map.get($theme, error-hover-state-layer-color),
-      error-hover-state-layer-opacity:
-        map.get($theme, error-hover-state-layer-opacity),
-      hover-state-layer-color: map.get($theme, hover-state-layer-color),
-      hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),
-    )
-  );
 }
 
 @mixin _container-color($colors) {
@@ -186,7 +175,7 @@ $_light-theme: (
   @include text-field-theme.if-enabled {
     @include _set-active-indicator-color(map.get($colors, default));
 
-    @include text-field-theme.if-hovered {
+    &:hover {
       @include _set-active-indicator-color(map.get($colors, hover));
     }
 
@@ -221,24 +210,3 @@ $_light-theme: (
     @include line-ripple-mixins.height($height);
   }
 }
-
-@mixin _hover-state-layer($colors) {
-  @include ripple-theme.theme-styles(
-    (
-      hover-state-layer-color: map.get($colors, hover-state-layer-color),
-      hover-state-layer-opacity: map.get($colors, hover-state-layer-opacity),
-    ),
-    $ripple-target: '.mdc-text-field__ripple'
-  );
-
-  &.mdc-text-field--invalid {
-    @include ripple-theme.theme-styles(
-      (
-        hover-state-layer-color: map.get($colors, error-hover-state-layer-color),
-        hover-state-layer-opacity:
-          map.get($colors, error-hover-state-layer-opacity),
-      ),
-      $ripple-target: '.mdc-text-field__ripple'
-    );
-  }
-}
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -658,15 +658,12 @@ $_density-config: map.merge(
   $query: feature-targeting.all()
 ) {
   $feat-structure: feature-targeting.create-target($query, structure);
+  @include feature-targeting.targets($feat-structure) {
+    height: $height;
+  }
 
-  &:not(.mdc-text-field--textarea) {
-    @include feature-targeting.targets($feat-structure) {
-      height: $height;
-    }
-
-    @if $height < $minimum-height-for-filled-label {
-      @include _filled-no-label($query: $query);
-    }
+  @if $height < $minimum-height-for-filled-label {
+    @include _filled-no-label($query: $query);
   }
 }
 
@@ -686,29 +683,27 @@ $_density-config: map.merge(
   $feat-structure: feature-targeting.create-target($query, structure);
   $positionY: variables.get-outlined-label-position-y($height);
 
-  &:not(.mdc-text-field--textarea) {
-    // Floating label position
-    @include notched-outline-mixins.floating-label-float-position-absolute(
-      $positionY,
-      $query: $query
-    );
+  // Floating label position
+  @include notched-outline-mixins.floating-label-float-position-absolute(
+    $positionY,
+    $query: $query
+  );
 
-    // Floating label animation
-    @include floating-label-mixins.shake-animation(
+  // Floating label animation
+  @include floating-label-mixins.shake-animation(
+    $keyframe-suffix,
+    $query: $query
+  );
+  @at-root {
+    @include floating-label-mixins.shake-keyframes(
       $keyframe-suffix,
+      $positionY,
       $query: $query
     );
-    @at-root {
-      @include floating-label-mixins.shake-keyframes(
-        $keyframe-suffix,
-        $positionY,
-        $query: $query
-      );
-    }
+  }
 
-    @include feature-targeting.targets($feat-structure) {
-      height: $height;
-    }
+  @include feature-targeting.targets($feat-structure) {
+    height: $height;
   }
 }
 
@@ -727,21 +722,19 @@ $_density-config: map.merge(
 ) {
   $feat-structure: feature-targeting.create-target($query, structure);
 
-  &:not(.mdc-text-field--textarea) {
-    // This extra specificity is needed because textfield applies the below mixin
-    // already to two selectors (outlined + with-leading-icon). To override
-    // them with a new label position and animation, another selector is needed.
-    &.mdc-text-field--outlined {
-      @include _outlined-with-leading-icon-floating-label-position-animation(
-        $height,
-        $keyframe-suffix,
-        $query
-      );
-    }
+  // This extra specificity is needed because textfield applies the below mixin
+  // already to two selectors (outlined + with-leading-icon). To override
+  // them with a new label position and animation, another selector is needed.
+  &.mdc-text-field--outlined {
+    @include _outlined-with-leading-icon-floating-label-position-animation(
+      $height,
+      $keyframe-suffix,
+      $query
+    );
+  }
 
-    @include feature-targeting.targets($feat-structure) {
-      height: $height;
-    }
+  @include feature-targeting.targets($feat-structure) {
+    height: $height;
   }
 }
 

diff --git a/packages/mdc-textfield/_text-field-theme.scss b/packages/mdc-textfield/_text-field-theme.scss
@@ -439,7 +439,7 @@ $_light-theme: (
 }
 
 @mixin _set-supporting-text-color($color) {
-  & + .mdc-text-field-helper-line .mdc-text-field-helper-text {
+  & + .mdc-text-field-helper-text {
     @include theme.property(color, $color);
   }
 }
@@ -463,7 +463,7 @@ $_light-theme: (
 }
 
 @mixin _supporting-text-typography($typography-theme) {
-  & + .mdc-text-field-helper-line .mdc-text-field-helper-text {
+  & + .mdc-text-field-helper-text {
     @include typography.theme-styles($typography-theme);
   }
 }