feat(menu): add feature targeting for styles

Sets up style feature targeting for `mdc-menu`.
material-components · Jan 21, 2019 · 9eb0ccc · 9eb0ccc
1 parent 531dffb
commit 9eb0ccc
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 58 deletions.
diff --git a/packages/mdc-menu/_mixins.scss b/packages/mdc-menu/_mixins.scss
@@ -20,12 +20,128 @@
 // THE SOFTWARE.
 //
 
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
+@import "@material/rtl/mixins";
+@import "@material/list/mixins";
+@import "@material/ripple/mixins";
 @import "./variables";
 
+
+@mixin mdc-menu($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);
+
+  // Customize the menu-surface and contained list to match the mdc-menu styles.
+  .mdc-menu {
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-list-item-meta-ink-color(text-primary-on-background);
+      @include mdc-list-item-graphic-ink-color(text-primary-on-background);
+    }
+
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-menu-base_;
+
+      .mdc-list-divider {
+        @include mdc-list-divider_;
+      }
+
+      .mdc-list-item {
+        @include mdc-list-item_;
+      }
+
+      .mdc-list-item--disabled {
+        @include mdc-list-item--disabled_;
+      }
+
+      //stylelint-disable selector-max-type, selector-no-qualifying-type
+      a.mdc-list-item .mdc-list-item__text,
+      a.mdc-list-item .mdc-list-item__graphic {
+        @include mdc-list-item-link-content_;
+      }
+      // stylelint-enable selector-max-type, selector-no-qualifying-type
+    }
+  }
+
+  // postcss-bem-linter: define menu
+  .mdc-menu__selection-group {
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-menu__selection-group_;
+
+      .mdc-list-item {
+        @include mdc-menu__selection-group-item_;
+      }
+
+      // Extra specificity required to override `display` property on `mdc-list-item__graphic`.
+      .mdc-menu__selection-group-icon {
+        @include mdc-menu__selection-group-icon_;
+      }
+    }
+  }
+  // postcss-bem-linter: end
+
+  // stylelint-disable-next-line plugin/selector-bem-pattern
+  .mdc-menu-item--selected .mdc-menu__selection-group-icon {
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-menu__selection-group-icon-selected_;
+    }
+  }
+}
+
+//
+// Public
+//
 @mixin mdc-menu-width($width) {
   @if unitless($width) {
     width: $width * $mdc-menu-width-base;
   } @else {
     width: $width;
   }
 }
+
+
+//
+// Private
+//
+@mixin mdc-menu-base_ {
+  min-width: $mdc-menu-min-width;
+}
+
+@mixin mdc-list-divider_ {
+  margin: 8px 0;
+}
+
+@mixin mdc-list-item_ {
+  cursor: pointer;
+  user-select: none;
+}
+
+@mixin mdc-list-item--disabled_ {
+  cursor: auto;
+}
+
+@mixin mdc-list-item-link-content_ {
+  pointer-events: none;
+}
+
+@mixin mdc-menu__selection-group_ {
+  padding: 0;
+  fill: currentColor;
+}
+
+@mixin mdc-menu__selection-group-item_ {
+  @include mdc-rtl-reflexive-box(padding, left, 56px);
+}
+
+@mixin mdc-menu__selection-group-icon_ {
+  @include mdc-rtl-reflexive-position(left, 16px);
+
+  display: none;
+  position: absolute;
+}
+
+@mixin mdc-menu__selection-group-icon-selected_ {
+  display: inline;
+}
diff --git a/packages/mdc-menu/mdc-menu.scss b/packages/mdc-menu/mdc-menu.scss
@@ -20,62 +20,5 @@
 // THE SOFTWARE.
 //
 
-@import "@material/rtl/mixins";
-@import "@material/list/mixins";
-@import "@material/ripple/common";
-@import "@material/ripple/mixins";
-@import "./variables";
 @import "./mixins";
-
-// Customize the menu-surface and contained list to match the mdc-menu styles.
-.mdc-menu {
-  @include mdc-list-item-meta-ink-color(text-primary-on-background);
-  @include mdc-list-item-graphic-ink-color(text-primary-on-background);
-
-  min-width: $mdc-menu-min-width;
-
-  .mdc-list-divider {
-    margin: 8px 0;
-  }
-
-  .mdc-list-item {
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .mdc-list-item--disabled {
-    cursor: auto;
-  }
-
-  //stylelint-disable selector-max-type, selector-no-qualifying-type
-  a.mdc-list-item .mdc-list-item__text,
-  a.mdc-list-item .mdc-list-item__graphic {
-    pointer-events: none;
-  }
-  // stylelint-enable selector-max-type, selector-no-qualifying-type
-}
-
-// postcss-bem-linter: define menu
-.mdc-menu__selection-group {
-  padding: 0;
-  fill: currentColor;
-
-  .mdc-list-item {
-    @include mdc-rtl-reflexive-box(padding, left, 56px);
-  }
-
-  // Extra specificity required to override `display` property on `mdc-list-item__graphic`.
-  .mdc-menu__selection-group-icon {
-    @include mdc-rtl-reflexive-position(left, 16px);
-
-    display: none;
-    position: absolute;
-  }
-}
-
-// stylelint-disable-next-line plugin/selector-bem-pattern
-.mdc-menu-item--selected .mdc-menu__selection-group-icon {
-  display: inline;
-}
-
-// postcss-bem-linter: end
+@include mdc-menu;
diff --git a/test/scss/feature-targeting.scss b/test/scss/feature-targeting.scss
@@ -1,3 +1,5 @@
 @import "@material/feature-targeting/functions";
 @import "@material/button/mixins";
+@import "@material/menu/mixins";
 @include mdc-button($query: mdc-feature-any());
+@include mdc-menu($query: mdc-feature-any());