From 0c4d8f3923f9a089132ed8dca4062b72d3576aca Mon Sep 17 00:00:00 2001
From: Joy Zhong <joytzhong@gmail.com>
Date: Wed, 6 Nov 2019 15:39:19 -0500
Subject: [PATCH] feat(fab): Add support for increased touch target to mini
 FAB. (#5231)

---
 packages/mdc-button/_mixins.scss       |  2 +-
 packages/mdc-chips/_mixins.scss        |  2 +-
 packages/mdc-fab/README.md             | 18 ++++++++++++++++++
 packages/mdc-fab/_mixins.scss          | 20 +++++++++++++++++---
 packages/mdc-touch-target/_mixins.scss | 22 +++++++++++++++++++---
 5 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss
index d7a15db5e5d..c22aa5ea4da 100644
--- a/packages/mdc-button/_mixins.scss
+++ b/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);
diff --git a/packages/mdc-chips/_mixins.scss b/packages/mdc-chips/_mixins.scss
index f88b226b40e..bf351dbd9ea 100644
--- a/packages/mdc-chips/_mixins.scss
+++ b/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);
     }
   }
 
diff --git a/packages/mdc-fab/README.md b/packages/mdc-fab/README.md
index 8d71493b4da..3d47c951e35 100644
--- a/packages/mdc-fab/README.md
+++ b/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.
diff --git a/packages/mdc-fab/_mixins.scss b/packages/mdc-fab/_mixins.scss
index c6933ead69d..722420106c0 100644
--- a/packages/mdc-fab/_mixins.scss
+++ b/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);
   }
diff --git a/packages/mdc-touch-target/_mixins.scss b/packages/mdc-touch-target/_mixins.scss
index 457404ab418..30f172308fd 100644
--- a/packages/mdc-touch-target/_mixins.scss
+++ b/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%);
+    }
   }
 }