feat(fab): Add support for increased touch target to mini FAB. (#5231)

Author: joyzhong

packages/mdc-button/_mixins.scss

@@ -72,7 +72,7 @@ $mdc-button-ripple-target: ".mdc-button__ripple";
     }
 
     .mdc-button__touch {
-      @include mdc-touch-target($query);
+      @include mdc-touch-target($query: $query);
     }
 
     @include mdc-button-ink-color(primary, $query);

packages/mdc-chips/_mixins.scss

@@ -89,7 +89,7 @@ $mdc-chip-ripple-target: ".mdc-chip__ripple";
     }
 
     .mdc-chip__touch {
-      @include mdc-touch-target($query);
+      @include mdc-touch-target($query: $query);
     }
   }
 

packages/mdc-fab/README.md

@@ -143,6 +143,24 @@ In browsers that fully support CSS custom properties, the above mixins will work
 
 ### Additional Information
 
+#### Accessibility
+
+Material Design spec advises that touch targets should be at least 48x48px.
+While the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:
+
+```html
+<div class="mdc-touch-target-wrapper">
+  <button class="mdc-fab mdc-fab--mini mdc-fab--touch">
+    <div class="mdc-fab__ripple"></div>
+    <span class="material-icons mdc-fab__icon">add</span>
+    <span class="mdc-fab__label">Create</span>
+    <div class="mdc-fab__touch"></div>
+  </button>
+</div>
+```
+
+Note that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).
+
 #### Positioning
 
 Developers must position MDC FAB as needed within their application's design.

packages/mdc-fab/_mixins.scss

@@ -25,11 +25,12 @@
 @import "@material/feature-targeting/mixins";
 @import "@material/ripple/mixins";
 @import "@material/ripple/variables";
-@import "@material/theme/functions";
-@import "@material/theme/mixins";
+@import "@material/rtl/mixins";
 @import "@material/shape/mixins";
 @import "@material/shape/functions";
-@import "@material/rtl/mixins";
+@import "@material/theme/functions";
+@import "@material/theme/mixins";
+@import "@material/touch-target/mixins";
 @import "@material/typography/mixins";
 @import "./variables";
 
@@ -43,6 +44,8 @@ $mdc-fab-ripple-target: ".mdc-fab__ripple";
 @mixin mdc-fab-without-ripple($query: mdc-feature-all()) {
   // postcss-bem-linter: define fab
 
+  @include mdc-touch-target-wrapper($query);
+
   .mdc-fab {
     @include mdc-fab-base_($query: $query);
     @include mdc-fab-container-color(secondary, $query: $query);
@@ -58,6 +61,17 @@ $mdc-fab-ripple-target: ".mdc-fab__ripple";
     @include mdc-fab--extended_($query: $query);
   }
 
+  .mdc-fab--touch {
+    @include mdc-touch-target-component(
+      $component-height: $mdc-fab-mini-height,
+      $component-width: $mdc-fab-mini-height,
+      $query: $query);
+
+    .mdc-fab__touch {
+      @include mdc-touch-target($set-width: true, $query: $query);
+    }
+  }
+
   .mdc-fab__label {
     @include mdc-fab--label_($query: $query);
   }

packages/mdc-touch-target/_mixins.scss

@@ -43,16 +43,32 @@
 }
 
 /// Styles applied to the component's inner touch target element.
-@mixin mdc-touch-target($query: mdc-feature-all()) {
+/// By default, only sets the inner element height to the minimum touch target
+/// height ($mdc-touch-target-height).
+/// @param {Boolean} $set-width [false] - Sets the inner element width to the
+///     minimum touch target width ($mdc-touch-target-width).
+@mixin mdc-touch-target($set-width: false, $query: mdc-feature-all()) {
   $feat-structure: mdc-feature-create-target($query, structure);
 
   @include mdc-feature-targets($feat-structure) {
     position: absolute;
     top: 50%;
     right: 0;
-    left: 0;
     height: $mdc-touch-target-height;
-    transform: translateY(-50%);
+  }
+
+  @if $set-width {
+    @include mdc-feature-targets($feat-structure) {
+      /* @noflip */
+      left: 50%;
+      width: $mdc-touch-target-width;
+      transform: translate(-50%, -50%);
+    }
+  } @else {
+    @include mdc-feature-targets($feat-structure) {
+      left: 0;
+      transform: translateY(-50%);
+    }
   }
 }