fix(feature-targeting): Move ripple styles into separate mixins (#4454)

(cherry picked from commit 720bef0)

Author: mmalerba

packages/mdc-button/_mixins.scss

@@ -33,11 +33,16 @@
 @import "./variables";
 
 @mixin mdc-button-core-styles($query: mdc-feature-all()) {
+  @include mdc-button-without-ripple($query);
+  @include mdc-button-ripple($query);
+}
+
+// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
+// button styles. It is recommended that most users use `mdc-button-core-styles` instead.
+@mixin mdc-button-without-ripple($query: mdc-feature-all()) {
   $feat-color: mdc-feature-create-target($query, color);
   $feat-structure: mdc-feature-create-target($query, structure);
 
-  @include mdc-ripple-common($query);
-
   // postcss-bem-linter: define button
   .mdc-button {
     @include mdc-button-base_($query);
@@ -55,7 +60,6 @@
     }
 
     @include mdc-button-ink-color(primary, $query);
-    @include mdc-states(primary, false, $query);
   }
 
   .mdc-button__label + .mdc-button__icon {
@@ -93,7 +97,6 @@
     @include mdc-button--filled_($query);
     @include mdc-button-container-fill-color(primary, $query);
     @include mdc-button-ink-color(on-primary, $query);
-    @include mdc-states(on-primary, false, $query);
   }
 
   .mdc-button--raised {
@@ -114,6 +117,23 @@
   // postcss-bem-linter: end
 }
 
+// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
+// button styles. It is recommended that most users use `mdc-button-core-styles` instead.
+@mixin mdc-button-ripple($query: mdc-feature-all()) {
+  @include mdc-ripple-common($query);
+
+  .mdc-button {
+    @include mdc-ripple-surface($query);
+    @include mdc-ripple-radius-bounded($query: $query);
+    @include mdc-states(primary, false, $query);
+  }
+
+  .mdc-button--raised,
+  .mdc-button--unelevated {
+    @include mdc-states(on-primary, false, $query);
+  }
+}
+
 @mixin mdc-button-filled-accessible($container-fill-color, $query: mdc-feature-all()) {
   $fill-tone: mdc-theme-tone($container-fill-color);
 
@@ -216,8 +236,6 @@
   $feat-structure: mdc-feature-create-target($query, structure);
 
   @include mdc-typography(button, $query);
-  @include mdc-ripple-surface($query);
-  @include mdc-ripple-radius-bounded($query: $query);
   @include mdc-button-horizontal-padding($mdc-button-horizontal-padding, $query);
 
   @include mdc-feature-targets($feat-structure) {

packages/mdc-card/_mixins.scss

@@ -34,6 +34,13 @@
 //
 
 @mixin mdc-card-core-styles($query: mdc-feature-all()) {
+  @include mdc-card-without-ripple($query);
+  @include mdc-card-ripple($query);
+}
+
+// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
+// card styles. It is recommended that most users use `mdc-card-core-styles` instead.
+@mixin mdc-card-without-ripple($query: mdc-feature-all()) {
   // postcss-bem-linter: define card
 
   $feat-color: mdc-feature-create-target($query, color);
@@ -113,9 +120,6 @@
   //
 
   .mdc-card__primary-action {
-    @include mdc-ripple-surface($query);
-    @include mdc-ripple-radius-bounded($query: $query);
-
     @include mdc-feature-targets($feat-structure) {
       @include mdc-card-container-layout_;
 
@@ -126,8 +130,6 @@
       cursor: pointer;
       overflow: hidden;
     }
-
-    @include mdc-states($query: $query);
   }
 
   .mdc-card__primary-action:first-child {
@@ -268,6 +270,18 @@
   // postcss-bem-linter: end
 }
 
+// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
+// card styles. It is recommended that most users use `mdc-card-core-styles` instead.
+@mixin mdc-card-ripple($query: mdc-feature-all()) {
+  @include mdc-ripple-common($query);
+
+  .mdc-card__primary-action {
+    @include mdc-ripple-surface($query);
+    @include mdc-ripple-radius-bounded($query: $query);
+    @include mdc-states($query: $query);
+  }
+}
+
 @mixin mdc-card-fill-color($color, $query: mdc-feature-all()) {
   $feat-color: mdc-feature-create-target($query, color);
 

packages/mdc-checkbox/_mixins.scss

@@ -34,14 +34,19 @@
 //
 
 @mixin mdc-checkbox-core-styles($query: mdc-feature-all()) {
+  @include mdc-checkbox-without-ripple($query);
+  @include mdc-checkbox-ripple($query);
+}
+
+// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
+// checkbox styles. It is recommended that most users use `mdc-checkbox-core-styles` instead.
+@mixin mdc-checkbox-without-ripple($query: mdc-feature-all()) {
   // postcss-bem-linter: define checkbox
 
   $feat-animation: mdc-feature-create-target($query, animation);
   $feat-color: mdc-feature-create-target($query, color);
   $feat-structure: mdc-feature-create-target($query, structure);
 
-  @include mdc-ripple-common($query);
-
   @include mdc-feature-targets($feat-animation) {
     @include mdc-checkbox-mark-keyframes_;
   }
@@ -50,10 +55,6 @@
     @include mdc-feature-targets($feat-structure) {
       @include mdc-checkbox-base_;
     }
-
-    @include mdc-ripple-surface($query);
-    @include mdc-states($mdc-checkbox-baseline-theme-color, $query: $query);
-    @include mdc-ripple-radius-unbounded($query: $query);
   }
 
   @include mdc-checkbox-container-colors($query: $query);
@@ -131,12 +132,6 @@
     @include mdc-checkbox__focus-indicator_($query);
   }
 
-  .mdc-ripple-upgraded--background-focused .mdc-checkbox__background::before {
-    @include mdc-feature-targets($feat-structure) {
-      @include mdc-checkbox__focus-indicator--ripple-upgraded-unbounded_;
-    }
-  }
-
   .mdc-checkbox__native-control:focus ~ .mdc-checkbox__background::before {
     @include mdc-checkbox__focus-indicator--focused_($query);
   }
@@ -180,6 +175,26 @@
   // postcss-bem-linter: end
 }
 
+// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
+// checkbox styles. It is recommended that most users use `mdc-checkbox-core-styles` instead.
+@mixin mdc-checkbox-ripple($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-ripple-common($query);
+
+  .mdc-checkbox {
+    @include mdc-ripple-surface($query);
+    @include mdc-states($mdc-checkbox-baseline-theme-color, $query: $query);
+    @include mdc-ripple-radius-unbounded($query: $query);
+  }
+
+  .mdc-ripple-upgraded--background-focused .mdc-checkbox__background::before {
+    @include mdc-feature-targets($feat-structure) {
+      content: none;
+    }
+  }
+}
+
 @mixin mdc-checkbox-container-colors(
   $unmarked-stroke-color: $mdc-checkbox-border-color,
   $unmarked-fill-color: transparent,
@@ -508,10 +523,6 @@
   }
 }
 
-@mixin mdc-checkbox__focus-indicator--ripple-upgraded-unbounded_ {
-  content: none;
-}
-
 // Native input
 
 @mixin mdc-checkbox__native-control_ {

packages/mdc-dom/package-lock.json

@@ -34,6 +34,13 @@
 //
 
 @mixin mdc-list-core-styles($query: mdc-feature-all()) {
+  @include mdc-list-without-ripple($query);
+  @include mdc-list-ripple($query);
+}
+
+// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
+// list styles. It is recommended that most users use `mdc-list-core-styles` instead.
+@mixin mdc-list-without-ripple($query: mdc-feature-all()) {
   $feat-color: mdc-feature-create-target($query, color);
   $feat-structure: mdc-feature-create-target($query, structure);
   $feat-typography: mdc-feature-create-target($query, typography);
@@ -47,8 +54,6 @@
     $mdc-list-divider-color-on-light-bg
   );
 
-  @include mdc-ripple-common($query);
-
   .mdc-list {
     @include mdc-list-base_($query);
   }
@@ -213,13 +218,6 @@
     }
   }
 
-  // List items should support states by default, but it should be possible to opt out.
-  // Direct child combinator is necessary for non-interactive modifier on parent to not
-  // match this selector.
-  :not(.mdc-list--non-interactive) > :not(.mdc-list-item--disabled).mdc-list-item {
-    @include mdc-list-item-interactive-ripple_($query);
-  }
-
   // Override anchor tag styles for the use-case of a list being used for navigation
   // stylelint-disable selector-max-type,selector-no-qualifying-type
   a.mdc-list-item {
@@ -287,6 +285,19 @@
   }
 }
 
+// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
+// list styles. It is recommended that most users use `mdc-list-core-styles` instead.
+@mixin mdc-list-ripple($query: mdc-feature-all()) {
+  @include mdc-ripple-common($query);
+
+  // List items should support states by default, but it should be possible to opt out.
+  // Direct child combinator is necessary for non-interactive modifier on parent to not
+  // match this selector.
+  :not(.mdc-list--non-interactive) > :not(.mdc-list-item--disabled).mdc-list-item {
+    @include mdc-list-item-interactive-ripple_($query);
+  }
+}
+
 @mixin mdc-list-item-primary-text-ink-color($color, $query: mdc-feature-all()) {
   $feat-color: mdc-feature-create-target($query, color);
 

packages/mdc-list/_mixins.scss

@@ -31,22 +31,24 @@
 @import "./variables";
 
 @mixin mdc-radio-core-styles($query: mdc-feature-all()) {
+  @include mdc-radio-without-ripple($query);
+  @include mdc-radio-ripple($query);
+}
+
+// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
+// radio styles. It is recommended that most users use `mdc-radio-core-styles` instead.
+@mixin mdc-radio-without-ripple($query: mdc-feature-all()) {
   // postcss-bem-linter: define radio
 
   $feat-animation: mdc-feature-create-target($query, animation);
   $feat-color: mdc-feature-create-target($query, color);
   $feat-structure: mdc-feature-create-target($query, structure);
 
-  @include mdc-ripple-common($query);
-
   .mdc-radio {
     @include mdc-radio-unchecked-stroke-color($mdc-radio-unchecked-color, $query);
     @include mdc-radio-checked-stroke-color($mdc-radio-baseline-theme-color, $query);
     @include mdc-radio-ink-color($mdc-radio-baseline-theme-color, $query);
     @include mdc-radio-focus-indicator-color($mdc-radio-baseline-theme-color, $query);
-    @include mdc-ripple-surface($query);
-    @include mdc-ripple-radius-unbounded($query: $query);
-    @include mdc-states($mdc-radio-baseline-theme-color, $query: $query);
 
     @include mdc-feature-targets($feat-structure) {
       display: inline-block;
@@ -145,17 +147,6 @@
         z-index: 1;
       }
     }
-
-    // stylelint-disable plugin/selector-bem-pattern
-
-    &.mdc-ripple-upgraded--background-focused {
-      .mdc-radio__background::before {
-        @include mdc-feature-targets($feat-structure) {
-          content: none;
-        }
-      }
-    }
-    // stylelint-enable plugin/selector-bem-pattern
   }
 
   .mdc-radio__native-control:checked,
@@ -245,6 +236,28 @@
   // postcss-bem-linter: end
 }
 
+// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
+// radio styles. It is recommended that most users use `mdc-radio-core-styles` instead.
+@mixin mdc-radio-ripple($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-ripple-common($query);
+
+  .mdc-radio {
+    @include mdc-ripple-surface($query);
+    @include mdc-ripple-radius-unbounded($query: $query);
+    @include mdc-states($mdc-radio-baseline-theme-color, $query: $query);
+
+    &.mdc-ripple-upgraded--background-focused {
+      .mdc-radio__background::before {
+        @include mdc-feature-targets($feat-structure) {
+          content: none;
+        }
+      }
+    }
+  }
+}
+
 @mixin mdc-radio-unchecked-stroke-color($color, $query: mdc-feature-all()) {
   $feat-color: mdc-feature-create-target($query, color);