feat: Add feature targeting support and apply to mdc-button (#4228)

material-components · Jan 18, 2019 · 531dffb · 531dffb
1 parent 017ecb6
commit 531dffb
Show file tree

Hide file tree

Showing 16 changed files with 648 additions and 202 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -34,7 +34,7 @@ matrix:
     env:
       - TEST_SUITE=lint
     script:
-      - if has_testable_files; then npm run lint; else log_untestable_files; fi
+      - if has_testable_files; then npm run lint && npm run test:feature-targeting; else log_untestable_files; fi
 
   - node_js: 8
     env:

diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "test:unit": "karma start --single-run",
     "test:closure": "./scripts/closure-test.sh",
     "test:dependency": "./scripts/dependency-test.sh",
+    "test:feature-targeting": "node test/scss/verify-feature-targeting.js",
     "test:site": "npm run clean:site && ./scripts/site-generator-test.sh"
   },
   "devDependencies": {
@@ -173,6 +174,7 @@
           "drawer",
           "elevation",
           "fab",
+          "feature-targeting",
           "floating-label",
           "form-field",
           "grid-list",

diff --git a/packages/material-components-web/package.json b/packages/material-components-web/package.json
@@ -25,6 +25,7 @@
     "@material/drawer": "^0.43.0",
     "@material/elevation": "^0.43.0",
     "@material/fab": "^0.43.0",
+    "@material/feature-targeting": "0.0.0",
     "@material/floating-label": "^0.43.0",
     "@material/form-field": "^0.43.0",
     "@material/grid-list": "^0.43.0",

diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss
@@ -21,6 +21,8 @@
 //
 
 @import "@material/elevation/mixins";
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
 @import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
 @import "@material/theme/functions";
@@ -30,6 +32,97 @@
 @import "@material/shape/functions";
 @import "./variables";
 
+@mixin mdc-button($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);
+
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-button-shape-radius(small);
+      // This fits under structure because it doesn't depend on the theme.
+      @include mdc-button-container-fill-color(transparent);
+
+      // The icon CSS class overrides styles defined in the .material-icons CSS
+      // class, which is loaded separately so the order of CSS definitions is not
+      // guaranteed. Therefore, increase specifity by nesting this class to ensure
+      // overrides apply.
+      .mdc-button__icon {
+        @include mdc-button__icon_;
+      }
+    }
+
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-button-ink-color(primary);
+    }
+
+    @include mdc-states(primary, false, $query);
+  }
+
+  @include mdc-feature-targets($feat-structure) {
+    .mdc-button__label + .mdc-button__icon {
+      @include mdc-button__icon-trailing_;
+    }
+
+    // stylelint-disable-next-line selector-no-qualifying-type
+    svg.mdc-button__icon {
+      @include mdc-button__icon-svg_;
+    }
+
+    .mdc-button--raised,
+    .mdc-button--unelevated,
+    .mdc-button--outlined {
+      .mdc-button__icon {
+        // Icons inside contained buttons have different styles due to increased button padding
+        @include mdc-button__icon-contained_;
+      }
+
+      .mdc-button__label + .mdc-button__icon {
+        @include mdc-button__icon-contained-trailing_;
+      }
+    }
+  }
+
+  .mdc-button--raised,
+  .mdc-button--unelevated {
+    @include mdc-button--filled_($query);
+
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-button-container-fill-color(primary);
+      @include mdc-button-ink-color(on-primary);
+    }
+
+    @include mdc-states(on-primary, false, $query);
+  }
+
+  .mdc-button--raised {
+    @include mdc-button--raised_($query);
+  }
+
+  .mdc-button--outlined {
+    @include mdc-button--outlined_($query);
+
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-button-outline-width(2px);
+    }
+
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-button-outline-color(primary);
+    }
+  }
+
+  .mdc-button--dense {
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-button--dense_;
+    }
+  }
+  // postcss-bem-linter: end
+}
+
 @mixin mdc-button-filled-accessible($container-fill-color) {
   $fill-tone: mdc-theme-tone($container-fill-color);
 
@@ -92,48 +185,63 @@
   border-width: $outline-width;
 }
 
-@mixin mdc-button-base_() {
-  @include mdc-typography(button);
-  @include mdc-ripple-surface;
-  @include mdc-ripple-radius-bounded;
-  @include mdc-button-horizontal-padding($mdc-button-horizontal-padding);
-
-  display: inline-flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  min-width: 64px;
-  height: $mdc-button-height;
-  border: none;
-  outline: none;
-  /* @alternate */
-  line-height: inherit;
-  user-select: none;
-  -webkit-appearance: none;
-  overflow: hidden;
-  vertical-align: middle;
-
-  &::-moz-focus-inner {
-    padding: 0;
-    border: 0;
-  }
-
-  // postcss-bem-linter: ignore
-  &:active {
-    outline: none;
+@mixin mdc-button-base_($query) {
+  $feat-color: mdc-feature-create-target($query, color);
+  $feat-structure: mdc-feature-create-target($query, structure);
+  $feat-typography: mdc-feature-create-target($query, typography);
+
+  @include mdc-feature-targets($feat-typography) {
+    @include mdc-typography(button);
   }
 
-  &:hover {
-    cursor: pointer;
+  @include mdc-ripple-surface($query);
+
+  @include mdc-feature-targets($feat-structure) {
+    @include mdc-ripple-radius-bounded;
+    @include mdc-button-horizontal-padding($mdc-button-horizontal-padding);
+
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 64px;
+    height: $mdc-button-height;
+    border: none;
+    outline: none;
+    /* @alternate */
+    line-height: inherit;
+    user-select: none;
+    -webkit-appearance: none;
+    overflow: hidden;
+    vertical-align: middle;
+
+    &::-moz-focus-inner {
+      padding: 0;
+      border: 0;
+    }
+
+    // postcss-bem-linter: ignore
+    &:active {
+      outline: none;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
   }
 
   &:disabled {
-    @include mdc-theme-prop(background-color, transparent);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(background-color, transparent);
+
+      color: $mdc-button-disabled-ink-color;
+    }
 
-    color: $mdc-button-disabled-ink-color;
-    cursor: default;
-    pointer-events: none;
+    @include mdc-feature-targets($feat-structure) {
+      cursor: default;
+      pointer-events: none;
+    }
   }
 }
 
@@ -163,39 +271,60 @@
   @include mdc-rtl-reflexive-property(margin, 8px, -4px);
 }
 
-@mixin mdc-button--outlined_() {
-  border-style: solid;
+@mixin mdc-button--outlined_($query) {
+  $feat-color: mdc-feature-create-target($query, color);
+  $feat-structure: mdc-feature-create-target($query, structure);
 
-  &:disabled {
-    border-color: $mdc-button-disabled-ink-color;
+  @include mdc-feature-targets($feat-structure) {
+    border-style: solid;
+  }
+
+  @include mdc-feature-targets($feat-color) {
+    &:disabled {
+      border-color: $mdc-button-disabled-ink-color;
+    }
   }
 }
 
-@mixin mdc-button--filled_() {
-  @include mdc-button-horizontal-padding($mdc-button-contained-horizontal-padding);
+@mixin mdc-button--filled_($query) {
+  $feat-color: mdc-feature-create-target($query, color);
+  $feat-structure: mdc-feature-create-target($query, structure);
 
-  &:disabled {
-    background-color: rgba(mdc-theme-prop-value(on-surface), .12);
-    color: $mdc-button-disabled-ink-color;
+  @include mdc-feature-targets($feat-structure) {
+    @include mdc-button-horizontal-padding($mdc-button-contained-horizontal-padding);
+  }
+
+  @include mdc-feature-targets($feat-color) {
+    &:disabled {
+      background-color: rgba(mdc-theme-prop-value(on-surface), .12);
+      color: $mdc-button-disabled-ink-color;
+    }
   }
 }
 
-@mixin mdc-button--raised_() {
-  @include mdc-elevation(2);
+@mixin mdc-button--raised_($query) {
+  $feat-animation: mdc-feature-create-target($query, animation);
+  $feat-color: mdc-feature-create-target($query, color);
 
-  transition: mdc-elevation-transition-value();
+  @include mdc-feature-targets($feat-color) {
+    @include mdc-elevation(2);
 
-  &:hover,
-  &:focus {
-    @include mdc-elevation(4);
-  }
+    &:hover,
+    &:focus {
+      @include mdc-elevation(4);
+    }
 
-  &:active {
-    @include mdc-elevation(8);
+    &:active {
+      @include mdc-elevation(8);
+    }
+
+    &:disabled {
+      @include mdc-elevation(0);
+    }
   }
 
-  &:disabled {
-    @include mdc-elevation(0);
+  @include mdc-feature-targets($feat-animation) {
+    transition: mdc-elevation-transition-value();
   }
 }
 

diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss
@@ -20,69 +20,5 @@
 // THE SOFTWARE.
 //
 
-@import "@material/ripple/common";
-@import "@material/ripple/mixins";
 @import "./mixins";
-@import "./variables";
-
-// postcss-bem-linter: define button
-.mdc-button {
-  @include mdc-button-base_;
-  @include mdc-button-shape-radius(small);
-  @include mdc-button-container-fill-color(transparent);
-  @include mdc-button-ink-color(primary);
-  @include mdc-states(primary);
-
-  // The icon CSS class overrides styles defined in the .material-icons CSS
-  // class, which is loaded separately so the order of CSS definitions is not
-  // guaranteed. Therefore, increase specifity by nesting this class to ensure
-  // overrides apply.
-  .mdc-button__icon {
-    @include mdc-button__icon_;
-  }
-}
-
-.mdc-button__label + .mdc-button__icon {
-  @include mdc-button__icon-trailing_;
-}
-
-// stylelint-disable-next-line selector-no-qualifying-type
-svg.mdc-button__icon {
-  @include mdc-button__icon-svg_;
-}
-
-.mdc-button--raised,
-.mdc-button--unelevated,
-.mdc-button--outlined {
-  .mdc-button__icon {
-    // Icons inside contained buttons have different styles due to increased button padding
-    @include mdc-button__icon-contained_;
-  }
-
-  .mdc-button__label + .mdc-button__icon {
-    @include mdc-button__icon-contained-trailing_;
-  }
-}
-
-.mdc-button--raised,
-.mdc-button--unelevated {
-  @include mdc-button--filled_;
-  @include mdc-button-container-fill-color(primary);
-  @include mdc-button-ink-color(on-primary);
-  @include mdc-states(on-primary);
-}
-
-.mdc-button--raised {
-  @include mdc-button--raised_;
-}
-
-.mdc-button--outlined {
-  @include mdc-button--outlined_;
-  @include mdc-button-outline-width(2px);
-  @include mdc-button-outline-color(primary);
-}
-
-.mdc-button--dense {
-  @include mdc-button--dense_;
-}
-// postcss-bem-linter: end
+@include mdc-button;
diff --git a/packages/mdc-button/package.json b/packages/mdc-button/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@material/elevation": "^0.43.0",
+    "@material/feature-targeting": "0.0.0",
     "@material/ripple": "^0.43.0",
     "@material/rtl": "^0.42.0",
     "@material/shape": "^0.43.0",