feat(text-field): add feature targeting for styles

Sets up feature targeting for the text field and its related styles. Relates to #4227.
material-components · Dec 22, 2019 · 1378560 · 1378560
1 parent a08ccec
commit 1378560
Show file tree

Hide file tree

Showing 10 changed files with 990 additions and 615 deletions.
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
diff --git a/packages/mdc-textfield/character-counter/_mixins.scss b/packages/mdc-textfield/character-counter/_mixins.scss
@@ -20,46 +20,78 @@
 // THE SOFTWARE.
 //
 
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
 @import "@material/rtl/mixins";
+@import "@material/typography/mixins";
 
 // Public mixins
 
+@mixin mdc-text-field-character-counter-core-styles($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  // postcss-bem-linter: define text-field-character-counter
+
+  .mdc-text-field-character-counter {
+    @include mdc-typography(caption, $query: $query);
+    @include mdc-typography-baseline-top(16px, $query: $query);
+
+    @include mdc-feature-targets($feat-structure) {
+      // Keep flex item align to trailing side on absence of helper text.
+      @include mdc-rtl-reflexive-box(margin, left, auto);
+      @include mdc-rtl-reflexive-box(padding, left, 16px);
+
+      white-space: nowrap;
+    }
+  }
+
+  // postcss-bem-linter: end
+}
+
 ///
 /// Customizes the color of the character counter associated with an enabled text field.
 /// @param {Color} $color - The desired character counter color.
 ///
-@mixin mdc-text-field-character-counter-color($color) {
+@mixin mdc-text-field-character-counter-color($color, $query: mdc-feature-all()) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-character-counter-color_($color);
+    @include mdc-text-field-character-counter-color_($color, $query: $query);
   }
 }
 
 ///
 /// Customizes the color of the character counter associated with a disabled text field.
 /// @param {Color} $color - The desired character counter color.
 ///
-@mixin mdc-text-field-disabled-character-counter-color($color) {
+@mixin mdc-text-field-disabled-character-counter-color($color, $query: mdc-feature-all()) {
   &.mdc-text-field--disabled {
-    @include mdc-text-field-character-counter-color_($color);
+    @include mdc-text-field-character-counter-color_($color, $query: $query);
   }
 }
 
-@mixin mdc-text-field-character-counter-position($xOffset, $yOffset) {
+@mixin mdc-text-field-character-counter-position($xOffset, $yOffset, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
   .mdc-text-field-character-counter {
-    @include mdc-rtl-reflexive-position(right, $xOffset);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-position(right, $xOffset);
 
-    position: absolute;
-    bottom: $yOffset;
+      position: absolute;
+      bottom: $yOffset;
+    }
   }
 }
 
 // Private mixins
 
-@mixin mdc-text-field-character-counter-color_($color) {
-  // Character counter is placed inside mdc-textfield element (for textarea variant ) or
+@mixin mdc-text-field-character-counter-color_($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
+  // Character counter is placed inside mdc-textfield element (for textarea variant) or
   // inside helper line which is sibling to mdc-textfield.
   .mdc-text-field-character-counter,
   + .mdc-text-field-helper-line .mdc-text-field-character-counter {
-    @include mdc-theme-prop(color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(color, $color);
+    }
   }
 }
diff --git a/packages/mdc-textfield/character-counter/mdc-text-field-character-counter.scss b/packages/mdc-textfield/character-counter/mdc-text-field-character-counter.scss
@@ -20,20 +20,5 @@
 // THE SOFTWARE.
 //
 
-@import "../functions";
-@import "@material/rtl/mixins";
-@import "@material/typography/mixins";
-
-// postcss-bem-linter: define text-field-character-counter
-
-.mdc-text-field-character-counter {
-  @include mdc-typography(caption);
-  @include mdc-typography-baseline-top(16px);
-  // Keep flex item align to trailing side on absence of helper text.
-  @include mdc-rtl-reflexive-box(margin, left, auto);
-  @include mdc-rtl-reflexive-box(padding, left, 16px);
-
-  white-space: nowrap;
-}
-
-// postcss-bem-linter: end
+@import "./mixins";
+@include mdc-text-field-character-counter-core-styles;
diff --git a/packages/mdc-textfield/helper-text/_mixins.scss b/packages/mdc-textfield/helper-text/_mixins.scss
@@ -20,44 +20,92 @@
 // THE SOFTWARE.
 //
 
+@import "@material/theme/mixins";
+@import "@material/typography/mixins";
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
+
 // Public mixins
 
+@mixin mdc-text-field-helper-text-core-styles($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+  $feat-animation: mdc-feature-create-target($query, animation);
+
+  // postcss-bem-linter: define text-field-helper-text
+
+  .mdc-text-field-helper-text {
+    @include mdc-typography(caption, $query: $query);
+    @include mdc-typography-baseline-top(16px, $query: $query);
+
+    @include mdc-feature-targets($feat-structure) {
+      margin: 0;
+      opacity: 0;
+      will-change: opacity;
+    }
+
+    @include mdc-feature-targets($feat-animation) {
+      transition: mdc-text-field-transition(opacity);
+    }
+  }
+
+  .mdc-text-field-helper-text--persistent {
+    @include mdc-feature-targets($feat-structure) {
+      opacity: 1;
+      will-change: initial;
+    }
+
+    @include mdc-feature-targets($feat-animation) {
+      transition: none;
+    }
+  }
+
+  // postcss-bem-linter: end
+}
+
 ///
 /// Customizes the color of the helper text following an enabled text-field.
 /// @param {Color} $color - The desired helper text color.
 ///
-@mixin mdc-text-field-helper-text-color($color) {
+@mixin mdc-text-field-helper-text-color($color, $query: mdc-feature-all()) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-helper-text-color_($color);
+    @include mdc-text-field-helper-text-color_($color, $query: $query);
   }
 }
 
 ///
 /// Customizes the color of the helper text following a disabled text-field.
 /// @param {Color} $color - The desired helper text color.
 ///
-@mixin mdc-text-field-disabled-helper-text-color($color) {
+@mixin mdc-text-field-disabled-helper-text-color($color, $query: mdc-feature-all()) {
   &.mdc-text-field--disabled {
-    @include mdc-text-field-helper-text-color_($color);
+    @include mdc-text-field-helper-text-color_($color, $query: $query);
   }
 }
 
-@mixin mdc-text-field-helper-text-validation-color($color) {
+@mixin mdc-text-field-helper-text-validation-color($color, $query: mdc-feature-all()) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-helper-text-validation-color_($color);
+    @include mdc-text-field-helper-text-validation-color_($color, $query);
   }
 }
 
 // Private mixins
 
-@mixin mdc-text-field-helper-text-color_($color) {
+@mixin mdc-text-field-helper-text-color_($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
   + .mdc-text-field-helper-line .mdc-text-field-helper-text {
-    @include mdc-theme-prop(color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(color, $color);
+    }
   }
 }
 
-@mixin mdc-text-field-helper-text-validation-color_($color) {
+@mixin mdc-text-field-helper-text-validation-color_($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
   &.mdc-text-field--invalid + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
-    @include mdc-theme-prop(color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(color, $color);
+    }
   }
 }
diff --git a/packages/mdc-textfield/helper-text/mdc-text-field-helper-text.scss b/packages/mdc-textfield/helper-text/mdc-text-field-helper-text.scss
@@ -20,26 +20,5 @@
 // THE SOFTWARE.
 //
 
-@import "../functions";
-@import "@material/theme/mixins";
-@import "@material/typography/mixins";
-
-// postcss-bem-linter: define text-field-helper-text
-
-.mdc-text-field-helper-text {
-  @include mdc-typography(caption);
-  @include mdc-typography-baseline-top(16px);
-
-  margin: 0;
-  transition: mdc-text-field-transition(opacity);
-  opacity: 0;
-  will-change: opacity;
-}
-
-.mdc-text-field-helper-text--persistent {
-  transition: none;
-  opacity: 1;
-  will-change: initial;
-}
-
-// postcss-bem-linter: end
+@import "./mixins";
+@include mdc-text-field-helper-text-core-styles;
diff --git a/packages/mdc-textfield/icon/_mixins.scss b/packages/mdc-textfield/icon/_mixins.scss
@@ -20,47 +20,82 @@
 // THE SOFTWARE.
 //
 
+@import "@material/theme/variables";
+@import "@material/theme/mixins";
 @import "@material/rtl/mixins";
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
 
 // Public mixins
 
+@mixin mdc-text-field-icon-core-styles($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  .mdc-text-field--with-leading-icon .mdc-text-field__icon,
+  .mdc-text-field--with-trailing-icon .mdc-text-field__icon {
+    @include mdc-feature-targets($feat-structure) {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+  }
+
+  .mdc-text-field__icon:not([tabindex]),
+  .mdc-text-field__icon[tabindex="-1"] {
+    @include mdc-feature-targets($feat-structure) {
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+}
+
 ///
 /// Customizes the color for the leading/trailing icons in an enabled text-field.
 /// @param {Color} $color - The desired icon color.
 /// @param {Boolean} $styleSecondIcon [false] - whether to apply the color to only
 ///     the trailing icon when used with a leading icon
 ///
-@mixin mdc-text-field-icon-color($color, $styleSecondIcon: false) {
+@mixin mdc-text-field-icon-color($color, $styleSecondIcon: false, $query: mdc-feature-all()) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-icon-color_($color, $styleSecondIcon);
+    @include mdc-text-field-icon-color_($color, $styleSecondIcon, $query: $query);
   }
 }
 
 ///
 /// Customizes the color for the leading/trailing icons in a disabled text-field.
 /// @param {Color} $color - The desired icon color.
 ///
-@mixin mdc-text-field-disabled-icon-color($color) {
+@mixin mdc-text-field-disabled-icon-color($color, $query: mdc-feature-all()) {
   &.mdc-text-field--disabled {
-    @include mdc-text-field-icon-color_($color);
+    @include mdc-text-field-icon-color_($color, $query: $query);
   }
 }
 
 // Private mixins
 
-@mixin mdc-text-field-icon-horizontal-position_($position-property, $position, $padding, $input-padding) {
+@mixin mdc-text-field-icon-horizontal-position_(
+  $position-property, $position, $padding, $input-padding, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
   .mdc-text-field__icon {
-    @include mdc-rtl-reflexive-position($position-property, $position);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-position($position-property, $position);
+    }
   }
 
   // Move the input's position, to allow room for the icon
   @if ($position-property == left) {
     .mdc-text-field__input {
-      @include mdc-rtl-reflexive-property(padding, $padding, $input-padding);
+      @include mdc-feature-targets($feat-structure) {
+        @include mdc-rtl-reflexive-property(padding, $padding, $input-padding);
+      }
     }
   } @else {
     .mdc-text-field__input {
-      @include mdc-rtl-reflexive-property(padding, $input-padding, $padding);
+      @include mdc-feature-targets($feat-structure) {
+        @include mdc-rtl-reflexive-property(padding, $input-padding, $padding);
+      }
     }
   }
 }
@@ -69,31 +104,44 @@
   $position-left,
   $padding-left,
   $position-right,
-  $padding-right
+  $padding-right,
+  $query: mdc-feature-all()
 ) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
   .mdc-text-field__icon {
-    @include mdc-rtl-reflexive(left, $position-left, right, auto);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive(left, $position-left, right, auto);
 
-    ~ .mdc-text-field__icon {
-      @include mdc-rtl-reflexive(right, $position-right, left, auto);
+      ~ .mdc-text-field__icon {
+        @include mdc-rtl-reflexive(right, $position-right, left, auto);
+      }
     }
   }
 
   // Move the input's position, to allow room for the icons.
   .mdc-text-field__input {
-    @include mdc-rtl-reflexive-property(padding, $padding-left, $padding-right);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-property(padding, $padding-left, $padding-right);
+    }
   }
 }
 
-@mixin mdc-text-field-icon-color_($color, $styleSecondIcon: false) {
+@mixin mdc-text-field-icon-color_($color, $styleSecondIcon: false, $query: mdc-feature-all()) {
   .mdc-text-field__icon {
+    $feat-color: mdc-feature-create-target($query, color);
+
     @if ($styleSecondIcon) {
       // Select the second instance of this class regardless of element type.
       ~ .mdc-text-field__icon {
-        @include mdc-theme-prop(color, $color);
+        @include mdc-feature-targets($feat-color) {
+          @include mdc-theme-prop(color, $color);
+        }
       }
     } @else {
-      @include mdc-theme-prop(color, $color);
+      @include mdc-feature-targets($feat-color) {
+        @include mdc-theme-prop(color, $color);
+      }
     }
   }
 }