fix(button): Adjust touch target size when density is applied (materi…

…al-components#5112)
lasalvavida · Sep 23, 2019 · e2506f4 · e2506f4
1 parent d3b515e
commit e2506f4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss
@@ -243,6 +243,31 @@ $mdc-button-ripple-target: ".mdc-button__ripple";
   );
 
   @include mdc-button-height($height, $query: $query);
+
+  @if $density-scale != 0 {
+    @include mdc-button-touch-target-reset_($query: $query);
+  }
+}
+
+///
+/// Resets touch target-related styles. This is called from the density mixin to
+/// automatically remove the increased touch target, since dense components
+/// don't have the same default a11y requirements.
+/// @access private
+///
+@mixin mdc-button-touch-target-reset_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-feature-targets($feat-structure) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .mdc-button__touch {
+    @include mdc-feature-targets($feat-structure) {
+      display: none;
+    }
+  }
 }
 
 @mixin mdc-button-height($height, $query: $query) {

diff --git a/test/scss/_feature-targeting-test.scss b/test/scss/_feature-targeting-test.scss
@@ -43,7 +43,7 @@
     @include mdc-button-ripple($query: $query);
     @include mdc-button-without-ripple($query: $query);
     @include mdc-button-theme-baseline($query: $query);
-    @include mdc-button-density(0, $query: $query);
+    @include mdc-button-density(-1, $query: $query);
     @include mdc-button-height(0, $query: $query);
 
     // Card