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 · Jan 10, 2020 · ce0be4d · ce0be4d
1 parent 910c375
commit ce0be4d
Show file tree

Hide file tree

Showing 10 changed files with 1,016 additions and 629 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,83 +20,113 @@
 // THE SOFTWARE.
 //
 
-@import "@material/rtl/mixins";
 @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()) {
+  .mdc-text-field__icon {
+    @include mdc-text-field-icon_($query: $query);
+  }
+}
+
 ///
 /// Customizes the color for the leading icon in an enabled text-field.
 /// @param {Color} $color - The desired icon color.
 ///
-@mixin mdc-text-field-leading-icon-color($color) {
+@mixin mdc-text-field-leading-icon-color($color, $query: mdc-feature-all()) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-leading-icon-color_($color);
+    @include mdc-text-field-leading-icon-color_($color, $query: $query);
   }
 }
 
 ///
 /// Customizes the color for the trailing icon in an enabled text-field.
 /// @param {Color} $color - The desired icon color.
 ///
-@mixin mdc-text-field-trailing-icon-color($color) {
+@mixin mdc-text-field-trailing-icon-color($color, $query: mdc-feature-all()) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-trailing-icon-color_($color);
+    @include mdc-text-field-trailing-icon-color_($color, $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-leading-icon-color_($color);
-    @include mdc-text-field-trailing-icon-color_($color);
+    @include mdc-text-field-leading-icon-color_($color, $query: $query);
+    @include mdc-text-field-trailing-icon-color_($color, $query: $query);
   }
 }
 
 // Private mixins
 
-@mixin mdc-text-field-leading-icon-horizontal-position_($position) {
+@mixin mdc-text-field-leading-icon-horizontal-position_($position, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
   .mdc-text-field__icon--leading {
-    @include mdc-rtl-reflexive-position(left, $position);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-position(left, $position);
+    }
   }
 }
 
-@mixin mdc-text-field-trailing-icon-horizontal-position_($position) {
+@mixin mdc-text-field-trailing-icon-horizontal-position_($position, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
   .mdc-text-field__icon--trailing {
-    @include mdc-rtl-reflexive-position(right, $position);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-position(right, $position);
+    }
   }
 }
 
-@mixin mdc-text-field-icon-horizontal-position-two-icons_($position-left, $position-right) {
-  @include mdc-text-field-leading-icon-horizontal-position_($position-left);
-  @include mdc-text-field-trailing-icon-horizontal-position_($position-right);
+@mixin mdc-text-field-icon-horizontal-position-two-icons_($position-left, $position-right, $query: mdc-feature-all()) {
+  @include mdc-text-field-leading-icon-horizontal-position_($position-left, $query: $query);
+  @include mdc-text-field-trailing-icon-horizontal-position_($position-right, $query: $query);
 }
 
-@mixin mdc-text-field-icon_ {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
+@mixin mdc-text-field-icon_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-feature-targets($feat-structure) {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+  }
 
   &:not([tabindex]),
   &[tabindex="-1"] {
-    cursor: default;
-    pointer-events: none;
+    @include mdc-feature-targets($feat-structure) {
+      cursor: default;
+      pointer-events: none;
+    }
   }
 }
 
-@mixin mdc-text-field-leading-icon-color_($color) {
+@mixin mdc-text-field-leading-icon-color_($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
   .mdc-text-field__icon--leading {
-    @include mdc-theme-prop(color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(color, $color);
+    }
   }
 }
 
-@mixin mdc-text-field-trailing-icon-color_($color) {
+@mixin mdc-text-field-trailing-icon-color_($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
   .mdc-text-field__icon--trailing {
-    @include mdc-theme-prop(color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(color, $color);
+    }
   }
 }
diff --git a/packages/mdc-textfield/icon/mdc-text-field-icon.scss b/packages/mdc-textfield/icon/mdc-text-field-icon.scss
@@ -21,7 +21,4 @@
 //
 
 @import "./mixins";
-
-.mdc-text-field__icon {
-  @include mdc-text-field-icon_;
-}
+@include mdc-text-field-icon-core-styles;