fix(touch-target): Add class to touch target wrapper. (material-components#5174)

Author: joyzhong

packages/mdc-button/README.md

@@ -145,16 +145,16 @@ Material Design spec advises that touch targets should be at least 48 x 48 px.
 To meet this requirement, add the following to your button:
 
 ```html
-<span>
+<div class="mdc-touch-target-wrapper">
   <button class="mdc-button mdc-button--touch">
     <div class="mdc-button__ripple"></div>
     <span class="mdc-button__label">My Accessible Button</span>
     <div class="mdc-button__touch"></div>
   </button>
-</span>
+</div>
 ```
 
-Note that the wrapper `<span>` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).
+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).
 
 ## Style Customization
 

packages/mdc-button/_mixins.scss

@@ -53,6 +53,8 @@ $mdc-button-ripple-target: ".mdc-button__ripple";
   $feat-color: mdc-feature-create-target($query, color);
   $feat-structure: mdc-feature-create-target($query, structure);
 
+  @include mdc-touch-target-wrapper($query);
+
   // postcss-bem-linter: define button
   .mdc-button {
     @include mdc-button-base_($query);

packages/mdc-checkbox/README.md

@@ -119,7 +119,7 @@ Material Design spec advises that touch targets should be at least 48 x 48 px.
 To meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:
 
 ```html
-<span>
+<div class="mdc-touch-target-wrapper">
   <div class="mdc-checkbox mdc-checkbox--touch">
     <input type="checkbox"
            class="mdc-checkbox__native-control"
@@ -135,10 +135,10 @@ To meet this requirement, add the `mdc-checkbox--touch` class to your checkbox a
     </div>
     <div class="mdc-checkbox__ripple"></div>
   </div>
-</span>
+</div>
 ```
 
-Note that the wrapper `<span>` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).
+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).
 
 ## Style Customization
 

packages/mdc-checkbox/_mixins.scss

@@ -50,6 +50,8 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple";
   $feat-color: mdc-feature-create-target($query, color);
   $feat-structure: mdc-feature-create-target($query, structure);
 
+  @include mdc-touch-target-wrapper($query);
+
   @include mdc-feature-targets($feat-animation) {
     @include mdc-checkbox-mark-keyframes_;
   }

packages/mdc-chips/README.md

@@ -257,18 +257,18 @@ Material Design spec advises that touch targets should be at least 48 x 48 px.
 To meet this requirement, add the following to your chip:
 
 ```html
-<span>
+<div class="mdc-touch-target-wrapper">
   <button class="mdc-chip mdc-chip--touch">
     <div class="mdc-chip__ripple"></div>
     <span role="gridcell">
       <span role="button" tabindex="0" class="mdc-chip__text">Chip One</span>
     </span>
     <div class="mdc-chip__touch"></div>
   </button>
-</span>
+</div>
 ```
 
-Note that the wrapper `<span>` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).
+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).
 
 ## Style Customization
 

packages/mdc-chips/_mixins.scss

@@ -55,6 +55,7 @@ $mdc-chip-ripple-target: ".mdc-chip__ripple";
   @include mdc-chip-leading-icon-size($mdc-chip-leading-icon-size, $query: $query);
   @include mdc-chip-trailing-icon-size($mdc-chip-trailing-icon-size, $query: $query);
   @include mdc-chip-trailing-icon-margin($query: $query);
+  @include mdc-touch-target-wrapper($query);
 
   .mdc-chip {
     @include mdc-chip-shape-radius(50%, $query: $query);

packages/mdc-radio/README.md

@@ -105,7 +105,7 @@ Material Design spec advises that touch targets should be at least 48 x 48 px.
 To meet this requirement, add the `mdc-radio--touch` class to your radio as follows:
 
 ```html
-<span>
+<div class="mdc-touch-target-wrapper">
   <div class="mdc-radio mdc-radio--touch">
     <input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
     <div class="mdc-radio__background">
@@ -114,10 +114,10 @@ To meet this requirement, add the `mdc-radio--touch` class to your radio as foll
     </div>
     <div class="mdc-radio__ripple"></div>
   </div>
-</span>
+</div>
 ```
 
-Note that the wrapper `<span>` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).
+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).
 
 ## Style Customization
 

packages/mdc-radio/_mixins.scss

@@ -49,6 +49,8 @@ $mdc-radio-ripple-target: ".mdc-radio__ripple";
   $feat-color: mdc-feature-create-target($query, color);
   $feat-structure: mdc-feature-create-target($query, structure);
 
+  @include mdc-touch-target-wrapper($query);
+
   .mdc-radio {
     @include mdc-radio-unchecked-stroke-color($mdc-radio-unchecked-color, $query);
     @include mdc-radio-checked-stroke-color($mdc-radio-baseline-theme-color, $query);

packages/mdc-touch-target/README.md

@@ -49,16 +49,16 @@ For a given button component:
 You would add an increased touch target as follows:
 
 ```html
-<span>
+<div class="mdc-touch-target-wrapper>
   <button class="mdc-button mdc-button--touch">
     <div class="mdc-button__ripple"></div>
     <span class="mdc-button__label">My Accessible Button</span>
     <div class="mdc-button__touch"></div>
   </button>
-</span>
+</div>
 ```
 
-Note that the wrapper `<span>` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).
+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).
 
 ### Styles
 
@@ -72,5 +72,6 @@ Note that the wrapper `<span>` element is only necessary if you want to avoid po
 
 Mixin | Description
 --- | ---
+`mdc-touch-target-wrapper` | Applied to the wrapper touch target element.
 `mdc-touch-target` | Applied to the inner touch target element.
 `mdc-touch-target-component` | Applied to the component root element. Adds margin to compensate for the increased touch target.

packages/mdc-touch-target/_mixins.scss

@@ -20,11 +20,29 @@
 // THE SOFTWARE.
 //
 
+@import "@material/base/mixins";
 @import "@material/feature-targeting/functions";
 @import "@material/feature-targeting/mixins";
 @import "./variables";
 
-// Styles applied to the component's inner touch target element.
+/// Styles applied to the component's touch target wrapper element.
+@mixin mdc-touch-target-wrapper($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  .mdc-touch-target-wrapper {
+    @include mdc-feature-targets($feat-structure) {
+      // Ensure that styles are only emitted once across all components that
+      // have increased touch targets.
+      @include mdc-base-emit-once("mdc-touch-target/wrapper") {
+        // NOTE: Will change to `inline-block` in the future, but keeping as is
+        // temporarily for backwards-compatibility.
+        display: inline;
+      }
+    }
+  }
+}
+
+/// Styles applied to the component's inner touch target element.
 @mixin mdc-touch-target($query: mdc-feature-all()) {
   $feat-structure: mdc-feature-create-target($query, structure);
 
@@ -38,7 +56,7 @@
   }
 }
 
-// Styles applied to the component with the increased touch target.
+/// Styles applied to the component with the increased touch target.
 @mixin mdc-touch-target-component($component-height, $component-width: null, $query: mdc-feature-all()) {
   $feat-structure: mdc-feature-create-target($query, structure);
 

packages/mdc-touch-target/mdc-touch-target.scss

@@ -0,0 +1,24 @@
+//
+// Copyright 2019 Google Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+//
+
+@import "./mixins";
+@include mdc-touch-target-wrapper;

test/scss/_feature-targeting-test.scss

@@ -25,6 +25,7 @@
 @import "@material/tab-indicator/mixins";
 @import "@material/tab/mixins";
 @import "@material/theme/mixins";
+@import "@material/touch-target/mixins";
 @import "@material/typography/mixins";
 @import "@material/data-table/mixins";
 
@@ -304,6 +305,11 @@
     // Theme
     @include mdc-theme-core-styles($query: $query);
 
+    // Touch Target
+    @include mdc-touch-target-wrapper($query: $query);
+    @include mdc-touch-target($query: $query);
+    @include mdc-touch-target-component(0, $query: $query);
+
     // Typography
     @include mdc-typography-core-styles($query: $query);
     @include mdc-typography-base($query: $query);