feat(icon-button): Add feature targeting for styles (#4536)

(cherry picked from commit a58f2d2)
material-components · Mar 26, 2019 · ab8beeb · ab8beeb
1 parent b3458d8
commit ab8beeb
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 59 deletions.
diff --git a/packages/mdc-icon-button/_mixins.scss b/packages/mdc-icon-button/_mixins.scss
@@ -20,51 +20,123 @@
 // THE SOFTWARE.
 //
 
-@import "@material/ripple/common";
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
 @import "@material/ripple/mixins";
 @import "@material/theme/mixins";
 @import "./variables";
 
-@mixin mdc-icon-button-size($width, $height: $width, $padding: max($width, $height)/2) {
-  width: $width + $padding * 2;
-  height: $height + $padding * 2;
-  padding: $padding;
-  font-size: max($width, $height);
+@mixin mdc-icon-button-core-styles($query: mdc-feature-all()) {
+  @include mdc-icon-button-without-ripple($query);
+  @include mdc-icon-button-ripple($query);
+}
+
+@mixin mdc-icon-button-without-ripple($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  // postcss-bem-linter: define icon-button
+  .mdc-icon-button {
+    @include mdc-icon-button-base_($query: $query);
+  }
+
+  .mdc-icon-button__icon {
+    @include mdc-feature-targets($feat-structure) {
+      display: inline-block;
+    }
+
+    // stylelint-disable-next-line plugin/selector-bem-pattern
+    &.mdc-icon-button__icon--on {
+      @include mdc-feature-targets($feat-structure) {
+        display: none;
+      }
+    }
+  }
+
+  .mdc-icon-button--on {
+    .mdc-icon-button__icon {
+      @include mdc-feature-targets($feat-structure) {
+        display: none;
+      }
+
+      // stylelint-disable-next-line plugin/selector-bem-pattern
+      &.mdc-icon-button__icon--on {
+        @include mdc-feature-targets($feat-structure) {
+          display: inline-block;
+        }
+      }
+    }
+  }
+  // postcss-bem-linter: end
+}
+
+@mixin mdc-icon-button-ripple($query: mdc-feature-all()) {
+  @include mdc-ripple-common($query);
+
+  .mdc-icon-button {
+    @include mdc-ripple-surface($query: $query);
+    @include mdc-ripple-radius-unbounded($query: $query);
+    @include mdc-states($query: $query);
+  }
+}
+
+@mixin mdc-icon-button-size($width, $height: $width, $padding: max($width, $height)/2, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-feature-targets($feat-structure) {
+    width: $width + $padding * 2;
+    height: $height + $padding * 2;
+    padding: $padding;
+    font-size: max($width, $height);
+  }
 
   // stylelint-disable-next-line selector-max-type
   svg,
   img {
-    width: $width;
-    height: $height;
+    @include mdc-feature-targets($feat-structure) {
+      width: $width;
+      height: $height;
+    }
   }
 }
 
-@mixin mdc-icon-button-ink-color($color) {
-  @include mdc-theme-prop(color, $color);
-  @include mdc-states($color);
+@mixin mdc-icon-button-ink-color($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
+  @include mdc-feature-targets($feat-color) {
+    @include mdc-theme-prop(color, $color);
+  }
+
+  @include mdc-states($color, $query: $query);
 }
 
-@mixin mdc-icon-button-base_() {
-  @include mdc-ripple-surface;
-  @include mdc-ripple-radius-unbounded;
-  @include mdc-icon-button-size($mdc-icon-button-size);
-
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  border: none;
-  outline: none;
-  background-color: transparent;
-  fill: currentColor;
-  color: inherit;
-  text-decoration: none;
-  cursor: pointer;
-  user-select: none;
+@mixin mdc-icon-button-base_($query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-icon-button-size($mdc-icon-button-size, $query: $query);
+
+  @include mdc-feature-targets($feat-structure) {
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    fill: currentColor;
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+  }
 
   &:disabled {
-    @include mdc-theme-prop(color, text-disabled-on-light);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(color, text-disabled-on-light);
+    }
 
-    cursor: default;
-    pointer-events: none;
+    @include mdc-feature-targets($feat-structure) {
+      cursor: default;
+      pointer-events: none;
+    }
   }
 }
diff --git a/packages/mdc-icon-button/mdc-icon-button.scss b/packages/mdc-icon-button/mdc-icon-button.scss
@@ -20,33 +20,5 @@
 // THE SOFTWARE.
 //
 
-// postcss-bem-linter: define icon-button
-
 @import "./mixins";
-
-.mdc-icon-button {
-  @include mdc-icon-button-base_;
-  @include mdc-states;
-}
-
-.mdc-icon-button__icon {
-  display: inline-block;
-
-  // stylelint-disable-next-line plugin/selector-bem-pattern
-  &.mdc-icon-button__icon--on {
-    display: none;
-  }
-}
-
-.mdc-icon-button--on {
-  .mdc-icon-button__icon {
-    display: none;
-
-    // stylelint-disable-next-line plugin/selector-bem-pattern
-    &.mdc-icon-button__icon--on {
-      display: inline-block;
-    }
-  }
-}
-
-// postcss-bem-linter: end
+@include mdc-icon-button-core-styles;
diff --git a/packages/mdc-icon-button/package.json b/packages/mdc-icon-button/package.json
@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@material/base": "^1.0.0",
+    "@material/feature-targeting": "^0.44.1",
     "@material/ripple": "^1.0.0",
     "@material/theme": "^1.0.0",
     "tslib": "^1.9.3"

diff --git a/test/scss/_feature-targeting-test.scss b/test/scss/_feature-targeting-test.scss
@@ -5,6 +5,7 @@
 @import "@material/elevation/mixins";
 @import "@material/fab/mixins";
 @import "@material/form-field/mixins";
+@import "@material/icon-button/mixins";
 @import "@material/image-list/mixins";
 @import "@material/list/mixins";
 @import "@material/menu-surface/mixins";
@@ -81,6 +82,11 @@
     // Form Field
     @include mdc-form-field-core-styles($query: $query);
 
+    // Icon Button
+    @include mdc-icon-button-core-styles($query: $query);
+    @include mdc-icon-button-size(0, $query: $query);
+    @include mdc-icon-button-ink-color(red, $query: $query);
+
     // Image List
     @include mdc-image-list-core-styles($query: $query);
     @include mdc-image-list-aspect(1, $query: $query);