feat(chips): Add trailing action feature targeting test

PiperOrigin-RevId: 300610005

packages/mdc-chips/trailingaction/_mixins.scss

@@ -20,22 +20,24 @@
 // THE SOFTWARE.
 //
 
-@use "@material/feature-targeting" as feature;
-@use "@material/ripple";
-@use "@material/theme";
-@use "@material/touch-target" as touch;
+@use "@material/feature-targeting/mixins" as feature-mixins;
+@use "@material/feature-targeting/functions" as feature-functions;
+@use "@material/ripple/mixins" as ripple;
+@use "@material/rtl/mixins" as rtl;
+@use "@material/theme/mixins" as theme;
+@use "@material/touch-target/mixins" as touch;
 @use "./variables";
 
 $ripple-target: '.mdc-chip-trailing-action__ripple';
 
-@mixin core-styles($query: feature.all()) {
+@mixin core-styles($query: feature-functions.all()) {
   @include without-ripple($query: $query);
   @include ripple($query: $query);
 }
 
-@mixin without-ripple($query: feature.all()) {
-  $feat-structure: feature.create-target($query, structure);
-  $feat-color: feature.create-target($query, color);
+@mixin without-ripple($query: feature-functions.all()) {
+  $feat-structure: feature-functions.create-target($query, structure);
+  $feat-color: feature-functions.create-target($query, color);
 
   @include touch.wrapper($query); // COPYBARA_COMMENT_THIS_LINE
   @include _touch-target-base($query);
@@ -44,7 +46,7 @@ $ripple-target: '.mdc-chip-trailing-action__ripple';
     @include size(variables.$size, $query);
     @include color(variables.$color, $query);
 
-    @include feature.targets($feat-structure) {
+    @include feature-mixins.targets($feat-structure) {
       border: none;
       display: inline-flex;
       position: relative;
@@ -57,33 +59,33 @@ $ripple-target: '.mdc-chip-trailing-action__ripple';
       -webkit-appearance: none;
     }
 
-    @include feature.targets($feat-color) {
+    @include feature-mixins.targets($feat-color) {
       background: none;
     }
 
     // Nested to increase specificity, ensuring SVG and font icon
     // color is affected regardless of load order without needing
     // !important or HTML tag targetting.
     .mdc-chip-trailing-action__icon {
-      @include feature.targets($feat-color) {
+      @include feature-mixins.targets($feat-color) {
         fill: currentColor;
         color: inherit;
       }
     }
   }
 }
 
-@mixin ripple($query: feature.all()) {
+@mixin ripple($query: feature-functions.all()) {
   @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE
-  $feat-structure: feature.create-target($query, structure);
+  $feat-structure: feature-functions.create-target($query, structure);
 
   .mdc-chip-trailing-action {
     @include ripple.surface($query: $query, $ripple-target: $ripple-target);
     @include ripple.radius-unbounded($query: $query, $ripple-target: $ripple-target);
     @include ripple.states(variables.$ripple-color, $query: $query, $ripple-target: $ripple-target);
 
     #{$ripple-target} {
-      @include feature.targets($feat-structure) {
+      @include feature-mixins.targets($feat-structure) {
         position: absolute;
         // Ripple needs content-box as the box sizing and box-sizing: border-box
         // is often set as a default, so we override that here.
@@ -98,21 +100,21 @@ $ripple-target: '.mdc-chip-trailing-action__ripple';
 
 /// Set the color of the trailing action
 /// @param {Color} $color The trailing action color
-@mixin color($color, $query: feature.all()) {
-  $feat-color: feature.create-target($query, color);
+@mixin color($color, $query: feature-functions.all()) {
+  $feat-color: feature-functions.create-target($query, color);
 
-  @include feature.targets($feat-color) {
+  @include feature-mixins.targets($feat-color) {
     @include theme.prop(color, $color);
   }
 }
 
 /// Set the size of the trailing action
 /// @param {Number} $number The size of the trailing action
-@mixin size($size, $query: feature.all()) {
-  $feat-structure: feature.create-target($query, structure);
+@mixin size($size, $query: feature-functions.all()) {
+  $feat-structure: feature-functions.create-target($query, structure);
 
   .mdc-chip-trailing-action__icon {
-    @include feature.targets($feat-structure) {
+    @include feature-mixins.targets($feat-structure) {
       height: $size;
       width: $size;
       font-size: $size;
@@ -123,30 +125,29 @@ $ripple-target: '.mdc-chip-trailing-action__ripple';
 /// Set the horizontal spacing of the trailing action
 /// @param {Number} $left The left spacing
 /// @param {Number} $right The right spacing
-@mixin horizontal-spacing($left, $right, $query: feature.all()) {
-  $feat-structure: feature.create-target($query, structure);
+@mixin horizontal-spacing($left, $right, $query: feature-functions.all()) {
+  $feat-structure: feature-functions.create-target($query, structure);
 
-  @include feature.targets($feat-structure) {
-    margin-left: $left;
-    margin-right: $right;
+  @include feature-mixins.targets($feat-structure) {
+    @include rtl.reflexive-property(margin, $left, $right);
   }
 }
 
 /// Set the width of the touch target
 /// @param {Number} $width The width of the touch target
-@mixin touch-target-width($width, $query: feature.all()) {
-  $feat-structure: feature.create-target($query, structure);
+@mixin touch-target-width($width, $query: feature-functions.all()) {
+  $feat-structure: feature-functions.create-target($query, structure);
 
   .mdc-chip-trailing-action__touch {
-    @include feature.targets($feat-structure) {
+    @include feature-mixins.targets($feat-structure) {
       width: $width;
     }
   }
 }
 
 /// Private mixins
 
-@mixin _touch-target-base($query: feature.all()) {
+@mixin _touch-target-base($query: feature-functions.all()) {
   @include touch-target-width(variables.$touch-target-width, $query);
 
   .mdc-chip-trailing-action__touch {

packages/mdc-chips/trailingaction/_variables.scss

@@ -20,8 +20,6 @@
 // THE SOFTWARE.
 //
 
-@use "@material/theme";
-
 $size: 18px !default;
 $margin-right: -4px !default;
 $margin-left: 4px !default;

packages/mdc-chips/trailingaction/test/feature-targeting-any.test.scss

@@ -0,0 +1,17 @@
+@use "../mixins" as trailingaction;
+@use "@material/feature-targeting/functions" as feature-functions;
+
+@mixin test($query) {
+  .test {
+    @include trailingaction.core-styles($query: $query);
+    @include trailingaction.color(red, $query: $query);
+    @include trailingaction.size(0, $query: $query);
+    @include trailingaction.horizontal-spacing(10px, 10px, $query: $query);
+    @include trailingaction.touch-target-width(10px, $query: $query);
+    @include trailingaction.ripple($query: $query);
+    @include trailingaction.without-ripple($query: $query);
+  }
+}
+
+// This shouldn't output any CSS.
+@include test(feature-functions.any());

packages/mdc-chips/trailingaction/test/mdc-chip-trailing-action.scss.test.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2020 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import 'jasmine';
+
+import * as path from 'path';
+import {expectStylesWithNoFeaturesToBeEmpty} from '../../../../testing/featuretargeting';
+
+describe('mdc-chip-trailing-action.scss', () => {
+  expectStylesWithNoFeaturesToBeEmpty(
+      path.join(__dirname, 'feature-targeting-any.test.css'));
+});