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

Author: crisbeto

packages/mdc-textfield/_mixins.scss

@@ -22,45 +22,77 @@
 
 @use "@material/theme/mixins" as theme-mixins;
 @use "@material/rtl/mixins" as rtl-mixins;
+@use "@material/feature-targeting/functions" as feature-targeting-functions;
+@use "@material/feature-targeting/mixins" as feature-targeting-mixins;
+@use "@material/typography/mixins" as typography-mixins;
 
 // Public mixins
 
+@mixin character-counter-core-styles($query: feature-targeting-functions.all()) {
+  $feat-structure: feature-targeting-functions.create-target($query, structure);
+
+  // postcss-bem-linter: define text-field-character-counter
+
+  .mdc-text-field-character-counter {
+    @include typography-mixins.typography(caption, $query: $query);
+    @include typography-mixins.baseline-top(16px, $query: $query);
+
+    @include feature-targeting-mixins.targets($feat-structure) {
+      // Keep flex item align to trailing side on absence of helper text.
+      @include rtl-mixins.reflexive-box(margin, left, auto);
+      @include rtl-mixins.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 character-counter-color($color) {
+@mixin character-counter-color($color, $query: feature-targeting-functions.all()) {
   &:not(.mdc-text-field--disabled) {
-    @include character-counter-color_($color);
+    @include character-counter-color_($color, $query);
   }
 }
 
 ///
 /// Customizes the color of the character counter associated with a disabled text field.
 /// @param {Color} $color - The desired character counter color.
 ///
-@mixin disabled-character-counter-color($color) {
+@mixin disabled-character-counter-color($color, $query: feature-targeting-functions.all()) {
   &.mdc-text-field--disabled {
-    @include character-counter-color_($color);
+    @include character-counter-color_($color, $query);
   }
 }
 
-@mixin character-counter-position($xOffset, $yOffset) {
-  .mdc-text-field-character-counter {
-    @include rtl-mixins.reflexive-position(right, $xOffset);
+@mixin character-counter-position($xOffset, $yOffset, $query: feature-targeting-functions.all()) {
+  $feat-structure: feature-targeting-functions.create-target($query, structure);
 
-    position: absolute;
-    bottom: $yOffset;
+  .mdc-text-field-character-counter {
+    @include feature-targeting-mixins.targets($feat-structure) {
+      @include rtl-mixins.reflexive-position(right, $xOffset);
+      position: absolute;
+      bottom: $yOffset;
+    }
   }
 }
 
+
 // Private mixins
 
-@mixin character-counter-color_($color) {
-  // Character counter is placed inside mdc-textfield element (for textarea variant ) or
+@mixin character-counter-color_($color, $query: feature-targeting-functions.all()) {
+  $feat-color: feature-targeting-functions.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 theme-mixins.prop(color, $color);
+    @include feature-targeting-mixins.targets($feat-color) {
+      @include theme-mixins.prop(color, $color);
+    }
   }
 }

packages/mdc-textfield/character-counter/_mixins.scss

@@ -20,20 +20,5 @@
 // THE SOFTWARE.
 //
 
-@use "../functions";
-@use "@material/rtl/mixins" as rtl-mixins;
-@use "@material/typography/mixins" as typography-mixins;
-
-// postcss-bem-linter: define text-field-character-counter
-
-.mdc-text-field-character-counter {
-  @include typography-mixins.typography(caption);
-  @include typography-mixins.baseline-top(16px);
-  // Keep flex item align to trailing side on absence of helper text.
-  @include rtl-mixins.reflexive-box(margin, left, auto);
-  @include rtl-mixins.reflexive-box(padding, left, 16px);
-
-  white-space: nowrap;
-}
-
-// postcss-bem-linter: end
+@use "./mixins";
+@include mixins.character-counter-core-styles;

packages/mdc-textfield/character-counter/mdc-text-field-character-counter.scss

@@ -20,45 +20,92 @@
 // THE SOFTWARE.
 //
 
+@use "../functions";
 @use "@material/theme/mixins";
+@use "@material/typography/mixins" as typography-mixins;
+@use "@material/feature-targeting/functions" as feature-targeting-functions;
+@use "@material/feature-targeting/mixins" as feature-targeting-mixins;
 // Public mixins
 
+@mixin helper-text-core-styles($query: feature-targeting-functions.all()) {
+  $feat-structure: feature-targeting-functions.create-target($query, structure);
+  $feat-animation: feature-targeting-functions.create-target($query, animation);
+
+  // postcss-bem-linter: define text-field-helper-text
+
+  .mdc-text-field-helper-text {
+    @include typography-mixins.typography(caption, $query: $query);
+    @include typography-mixins.baseline-top(16px, $query: $query);
+
+    @include feature-targeting-mixins.targets($feat-structure) {
+      margin: 0;
+      opacity: 0;
+      will-change: opacity;
+    }
+
+    @include feature-targeting-mixins.targets($feat-animation) {
+      transition: functions.transition(opacity);
+    }
+  }
+
+  .mdc-text-field-helper-text--persistent {
+    @include feature-targeting-mixins.targets($feat-animation) {
+      transition: none;
+    }
+
+    @include feature-targeting-mixins.targets($feat-structure) {
+      opacity: 1;
+      will-change: initial;
+    }
+  }
+
+  // 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 helper-text-color($color) {
+@mixin helper-text-color($color, $query: feature-targeting-functions.all()) {
   &:not(.mdc-text-field--disabled) {
-    @include helper-text-color_($color);
+    @include helper-text-color_($color, $query);
   }
 }
 
 ///
 /// Customizes the color of the helper text following a disabled text-field.
 /// @param {Color} $color - The desired helper text color.
 ///
-@mixin disabled-helper-text-color($color) {
+@mixin disabled-helper-text-color($color, $query: feature-targeting-functions.all()) {
   &.mdc-text-field--disabled {
-    @include helper-text-color_($color);
+    @include helper-text-color_($color, $query);
   }
 }
 
-@mixin helper-text-validation-color($color) {
+@mixin helper-text-validation-color($color, $query: feature-targeting-functions.all()) {
   &:not(.mdc-text-field--disabled) {
-    @include helper-text-validation-color_($color);
+    @include helper-text-validation-color_($color, $query);
   }
 }
 
 // Private mixins
 
-@mixin helper-text-color_($color) {
+@mixin helper-text-color_($color, $query: feature-targeting-functions.all()) {
+  $feat-color: feature-targeting-functions.create-target($query, color);
+
   + .mdc-text-field-helper-line .mdc-text-field-helper-text {
-    @include mixins.prop(color, $color);
+    @include feature-targeting-mixins.targets($feat-color) {
+      @include mixins.prop(color, $color);
+    }
   }
 }
 
-@mixin helper-text-validation-color_($color) {
+@mixin helper-text-validation-color_($color, $query: feature-targeting-functions.all()) {
+  $feat-color: feature-targeting-functions.create-target($query, color);
+
   &.mdc-text-field--invalid + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
-    @include mixins.prop(color, $color);
+    @include feature-targeting-mixins.targets($feat-color) {
+      @include mixins.prop(color, $color);
+    }
   }
 }

packages/mdc-textfield/helper-text/_mixins.scss

@@ -20,26 +20,5 @@
 // THE SOFTWARE.
 //
 
-@use "../functions";
-@use "@material/theme/mixins" as mixins2;
-@use "@material/typography/mixins";
-
-// postcss-bem-linter: define text-field-helper-text
-
-.mdc-text-field-helper-text {
-  @include mixins.typography(caption);
-  @include mixins.baseline-top(16px);
-
-  margin: 0;
-  transition: functions.transition(opacity);
-  opacity: 0;
-  will-change: opacity;
-}
-
-.mdc-text-field-helper-text--persistent {
-  transition: none;
-  opacity: 1;
-  will-change: initial;
-}
-
-// postcss-bem-linter: end
+@use "./mixins";
+@include mixins.helper-text-core-styles;

packages/mdc-textfield/helper-text/mdc-text-field-helper-text.scss

@@ -23,80 +23,112 @@
 @use "@material/rtl/mixins" as rtl-mixins;
 @use "@material/theme/variables";
 @use "@material/theme/mixins" as theme-mixins;
+@use "@material/feature-targeting/functions" as feature-targeting-functions;
+@use "@material/feature-targeting/mixins" as feature-targeting-mixins;
 
 // Public mixins
 
+@mixin icon-core-styles($query: feature-targeting-functions.all()) {
+  .mdc-text-field__icon {
+    @include icon_($query: $query);
+  }
+}
+
 ///
 /// Customizes the color for the leading icon in an enabled text-field.
 /// @param {Color} $color - The desired icon color.
 ///
-@mixin leading-icon-color($color) {
+@mixin leading-icon-color($color, $query: feature-targeting-functions.all()) {
   &:not(.mdc-text-field--disabled) {
-    @include leading-icon-color_($color);
+    @include leading-icon-color_($color, $query);
   }
 }
 
 ///
 /// Customizes the color for the trailing icon in an enabled text-field.
 /// @param {Color} $color - The desired icon color.
 ///
-@mixin trailing-icon-color($color) {
+@mixin trailing-icon-color($color, $query: feature-targeting-functions.all()) {
   &:not(.mdc-text-field--disabled) {
-    @include trailing-icon-color_($color);
+    @include trailing-icon-color_($color, $query);
   }
 }
 
 ///
 /// Customizes the color for the leading/trailing icons in a disabled text-field.
 /// @param {Color} $color - The desired icon color.
 ///
-@mixin disabled-icon-color($color) {
+@mixin disabled-icon-color($color, $query: feature-targeting-functions.all()) {
   &.mdc-text-field--disabled {
-    @include leading-icon-color_($color);
-    @include trailing-icon-color_($color);
+    @include leading-icon-color_($color, $query);
+    @include trailing-icon-color_($color, $query);
   }
 }
 
 // Private mixins
 
-@mixin leading-icon-horizontal-position_($position) {
+@mixin leading-icon-horizontal-position_($position, $query: feature-targeting-functions.all()) {
+  $feat-structure: feature-targeting-functions.create-target($query, structure);
+
   .mdc-text-field__icon--leading {
-    @include rtl-mixins.reflexive-position(left, $position);
+    @include feature-targeting-mixins.targets($feat-structure) {
+      @include rtl-mixins.reflexive-position(left, $position);
+    }
   }
 }
 
-@mixin trailing-icon-horizontal-position_($position) {
+@mixin trailing-icon-horizontal-position_($position, $query: feature-targeting-functions.all()) {
+  $feat-structure: feature-targeting-functions.create-target($query, structure);
+
   .mdc-text-field__icon--trailing {
-    @include rtl-mixins.reflexive-position(right, $position);
+    @include feature-targeting-mixins.targets($feat-structure) {
+      @include rtl-mixins.reflexive-position(right, $position);
+    }
   }
 }
 
-@mixin icon-horizontal-position-two-icons_($position-left, $position-right) {
-  @include leading-icon-horizontal-position_($position-left);
-  @include trailing-icon-horizontal-position_($position-right);
+@mixin icon-horizontal-position-two-icons_(
+  $position-left, $position-right, $query: feature-targeting-functions.all()) {
+  @include leading-icon-horizontal-position_($position-left, $query);
+  @include trailing-icon-horizontal-position_($position-right, $query);
 }
 
-@mixin icon_ {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
+@mixin icon_($query: feature-targeting-functions.all()) {
+  $feat-structure: feature-targeting-functions.create-target($query, structure);
+  $feat-color: feature-targeting-functions.create-target($query, color);
+
+  @include feature-targeting-mixins.targets($feat-structure) {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+  }
 
   &:not([tabindex]),
   &[tabindex="-1"] {
-    cursor: default;
-    pointer-events: none;
+    @include feature-targeting-mixins.targets($feat-color) {
+      cursor: default;
+      pointer-events: none;
+    }
   }
 }
 
-@mixin leading-icon-color_($color) {
+@mixin leading-icon-color_($color, $query: feature-targeting-functions.all()) {
+  $feat-color: feature-targeting-functions.create-target($query, color);
+
   .mdc-text-field__icon--leading {
-    @include theme-mixins.prop(color, $color);
+    @include feature-targeting-mixins.targets($feat-color) {
+      @include theme-mixins.prop(color, $color);
+    }
   }
 }
 
-@mixin trailing-icon-color_($color) {
+@mixin trailing-icon-color_($color, $query: feature-targeting-functions.all()) {
+  $feat-color: feature-targeting-functions.create-target($query, color);
+
   .mdc-text-field__icon--trailing {
-    @include theme-mixins.prop(color, $color);
+    @include feature-targeting-mixins.targets($feat-color) {
+      @include theme-mixins.prop(color, $color);
+    }
   }
 }

packages/mdc-textfield/icon/_mixins.scss

@@ -21,7 +21,4 @@
 //
 
 @use "./mixins";
-
-.mdc-text-field__icon {
-  @include mixins.icon_;
-}
+@include mixins.icon-core-styles;