diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md index c0ca271d5c5..548c814ea7a 100644 --- a/packages/mdc-button/README.md +++ b/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 - +
- +
``` -Note that the wrapper `` 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 diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss index 1192d744380..b6f1815ca54 100644 --- a/packages/mdc-button/_mixins.scss +++ b/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); diff --git a/packages/mdc-checkbox/README.md b/packages/mdc-checkbox/README.md index 62c815b6438..0fa8ba7ea89 100644 --- a/packages/mdc-checkbox/README.md +++ b/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 - +
- +
``` -Note that the wrapper `` 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 diff --git a/packages/mdc-checkbox/_mixins.scss b/packages/mdc-checkbox/_mixins.scss index bae96c04db3..9f43eb2d6c8 100644 --- a/packages/mdc-checkbox/_mixins.scss +++ b/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_; } diff --git a/packages/mdc-chips/README.md b/packages/mdc-chips/README.md index 89bfa59305c..8418fff1d91 100644 --- a/packages/mdc-chips/README.md +++ b/packages/mdc-chips/README.md @@ -257,7 +257,7 @@ 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 - +
- +
``` -Note that the wrapper `` 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 diff --git a/packages/mdc-chips/_mixins.scss b/packages/mdc-chips/_mixins.scss index 94ddfa13eb4..f88b226b40e 100644 --- a/packages/mdc-chips/_mixins.scss +++ b/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); diff --git a/packages/mdc-radio/README.md b/packages/mdc-radio/README.md index f554f4d9016..2c7849a16d3 100644 --- a/packages/mdc-radio/README.md +++ b/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 - +
@@ -114,10 +114,10 @@ To meet this requirement, add the `mdc-radio--touch` class to your radio as foll
- +
``` -Note that the wrapper `` 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 diff --git a/packages/mdc-radio/_mixins.scss b/packages/mdc-radio/_mixins.scss index 21380ff633c..ebf1290858a 100644 --- a/packages/mdc-radio/_mixins.scss +++ b/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); diff --git a/packages/mdc-touch-target/README.md b/packages/mdc-touch-target/README.md index 932a97547fa..b6ac8236610 100644 --- a/packages/mdc-touch-target/README.md +++ b/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 - +
My Accessible Button
- +
``` -Note that the wrapper `` 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 `` 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. diff --git a/packages/mdc-touch-target/_mixins.scss b/packages/mdc-touch-target/_mixins.scss index e1bd4f9019a..457404ab418 100644 --- a/packages/mdc-touch-target/_mixins.scss +++ b/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); diff --git a/packages/mdc-touch-target/mdc-touch-target.scss b/packages/mdc-touch-target/mdc-touch-target.scss new file mode 100644 index 00000000000..b2b485dbcb5 --- /dev/null +++ b/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; diff --git a/test/scss/_feature-targeting-test.scss b/test/scss/_feature-targeting-test.scss index dbec6cebd46..2a2ec1bf686 100644 --- a/test/scss/_feature-targeting-test.scss +++ b/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);