feat(shape): add feature targeting to public mixins (#4384)

material-components · Feb 8, 2019 · e0860dd · e0860dd
1 parent ed4c945
commit e0860dd
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 39 deletions.
diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss
@@ -171,16 +171,18 @@
 }
 
 @mixin mdc-button-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
-  $feat-structure: mdc-feature-create-target($query, structure);
-
-  @include mdc-feature-targets($feat-structure) {
-    @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius), $rtl-reflexive);
-  }
+  @include mdc-shape-radius(
+    mdc-shape-resolve-percentage-radius($mdc-button-height, $radius),
+    $rtl-reflexive,
+    $query: $query
+  );
 
   &.mdc-button--dense {
-    @include mdc-feature-targets($feat-structure) {
-      @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-dense-button-height, $radius), $rtl-reflexive);
-    }
+    @include mdc-shape-radius(
+      mdc-shape-resolve-percentage-radius($mdc-dense-button-height, $radius),
+      $rtl-reflexive,
+      $query: $query
+    );
   }
 }
 

diff --git a/packages/mdc-card/_mixins.scss b/packages/mdc-card/_mixins.scss
@@ -291,11 +291,7 @@
 }
 
 @mixin mdc-card-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
-  $feat-structure: mdc-feature-create-target($query, structure);
-
-  @include mdc-feature-targets($feat-structure) {
-    @include mdc-shape-radius($radius, $rtl-reflexive);
-  }
+  @include mdc-shape-radius($radius, $rtl-reflexive, $query: $query);
 }
 
 @mixin mdc-card-media-aspect-ratio($x, $y, $query: mdc-feature-all()) {

diff --git a/packages/mdc-list/_mixins.scss b/packages/mdc-list/_mixins.scss
@@ -275,8 +275,7 @@
   .mdc-list-group__subheader {
     $mdc-list-subheader-virtual-height: 3rem;
     $mdc-list-subheader-leading: map-get(map-get($mdc-typography-styles, body1), line-height);
-    $mdc-list-subheader-margin:
-      ($mdc-list-subheader-virtual-height - $mdc-list-subheader-leading) / 2;
+    $mdc-list-subheader-margin: ($mdc-list-subheader-virtual-height - $mdc-list-subheader-leading) / 2;
 
     @include mdc-typography(subtitle1, $query);
 
@@ -335,12 +334,8 @@
 }
 
 @mixin mdc-list-item-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
-  $feat-structure: mdc-feature-create-target($query, structure);
-
   .mdc-list-item {
-    @include mdc-feature-targets($feat-structure) {
-      @include mdc-shape-radius($radius, $rtl-reflexive);
-    }
+    @include mdc-shape-radius($radius, $rtl-reflexive, $query: $query);
   }
 }
 

diff --git a/packages/mdc-menu-surface/_mixins.scss b/packages/mdc-menu-surface/_mixins.scss
@@ -81,11 +81,7 @@
 }
 
 @mixin mdc-menu-surface-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
-  $feat-structure: mdc-feature-create-target($query, structure);
-
-  @include mdc-feature-targets($feat-structure) {
-    @include mdc-shape-radius($radius, $rtl-reflexive);
-  }
+  @include mdc-shape-radius($radius, $rtl-reflexive, $query: $query);
 }
 
 //

diff --git a/packages/mdc-shape/_mixins.scss b/packages/mdc-shape/_mixins.scss
@@ -20,23 +20,29 @@
 // THE SOFTWARE.
 //
 
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
 @import "./variables";
 @import "./functions";
 
-@mixin mdc-shape-radius($radius, $rtl-reflexive: false) {
-  // Even if $rtl-reflexive is true, only emit RTL styles if we can't easily tell that the given radius is symmetrical
-  $needs-flip: $rtl-reflexive and length($radius) > 1;
+@mixin mdc-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
 
-  @if ($needs-flip) {
-    /* @noflip */
-  }
-
-  border-radius: mdc-shape-prop-value($radius);
+  @include mdc-feature-targets($feat-structure) {
+    // Even if $rtl-reflexive is true, only emit RTL styles if we can't easily tell that the given radius is symmetrical
+    $needs-flip: $rtl-reflexive and length($radius) > 1;
 
-  @if ($needs-flip) {
-    @include mdc-rtl {
+    @if ($needs-flip) {
       /* @noflip */
-      border-radius: mdc-shape-flip-radius(mdc-shape-prop-value($radius));
+    }
+
+    border-radius: mdc-shape-prop-value($radius);
+
+    @if ($needs-flip) {
+      @include mdc-rtl {
+        /* @noflip */
+        border-radius: mdc-shape-flip-radius(mdc-shape-prop-value($radius));
+      }
     }
   }
 }
diff --git a/test/scss/feature-targeting.scss b/test/scss/feature-targeting.scss
@@ -1,15 +1,16 @@
 @import "@material/button/mixins";
 @import "@material/card/mixins";
-@import "@material/menu-surface/mixins";
 @import "@material/checkbox/mixins";
 @import "@material/elevation/mixins";
 @import "@material/feature-targeting/functions";
+@import "@material/list/mixins";
+@import "@material/menu-surface/mixins";
 @import "@material/menu/mixins";
 @import "@material/radio/mixins";
 @import "@material/ripple/mixins";
-@import "@material/typography/mixins";
+@import "@material/shape/mixins";
 @import "@material/switch/mixins";
-@import "@material/list/mixins";
+@import "@material/typography/mixins";
 
 .mdc-test {
   // Button
@@ -80,6 +81,9 @@
   @include mdc-ripple-radius-bounded($query: mdc-feature-any());
   @include mdc-ripple-radius-unbounded($query: mdc-feature-any());
 
+  // Shape
+  @include mdc-shape-radius(1px 2px, true, $query: mdc-feature-any());
+
   // Switch
   @include mdc-switch($query: mdc-feature-any());
   @include mdc-switch-toggled-on-color(on-surface, $query: mdc-feature-any());