diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss index 94134420f23..81aba4609b7 100644 --- a/packages/mdc-button/_mixins.scss +++ b/packages/mdc-button/_mixins.scss @@ -123,7 +123,7 @@ $mdc-button-ripple-target: ".mdc-button__ripple"; } .mdc-button--touch { - @include mdc-touch-target-component( + @include mdc-touch-target-margin( $component-height: $mdc-button-height, $query: $query); } // postcss-bem-linter: end diff --git a/packages/mdc-checkbox/_mixins.scss b/packages/mdc-checkbox/_mixins.scss index 43fe7338a10..6209addc41a 100644 --- a/packages/mdc-checkbox/_mixins.scss +++ b/packages/mdc-checkbox/_mixins.scss @@ -154,7 +154,7 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple"; } .mdc-checkbox--touch { - @include mdc-touch-target-component( + @include mdc-touch-target-margin( $component-height: $mdc-checkbox-ripple-size, $component-width: $mdc-checkbox-ripple-size, $query: $query); diff --git a/packages/mdc-chips/_mixins.scss b/packages/mdc-chips/_mixins.scss index bf351dbd9ea..d29d33b6f2b 100644 --- a/packages/mdc-chips/_mixins.scss +++ b/packages/mdc-chips/_mixins.scss @@ -514,7 +514,7 @@ $mdc-chip-ripple-target: ".mdc-chip__ripple"; } .mdc-chip--touch { - @include mdc-touch-target-component( + @include mdc-touch-target-margin( $component-height: $mdc-chip-height, $query: $query); } } diff --git a/packages/mdc-fab/_mixins.scss b/packages/mdc-fab/_mixins.scss index b61ad7edfe3..ef134bf41c0 100644 --- a/packages/mdc-fab/_mixins.scss +++ b/packages/mdc-fab/_mixins.scss @@ -62,7 +62,7 @@ $mdc-fab-ripple-target: ".mdc-fab__ripple"; } .mdc-fab--touch { - @include mdc-touch-target-component( + @include mdc-touch-target-margin( $component-height: $mdc-fab-mini-height, $component-width: $mdc-fab-mini-height, $query: $query); diff --git a/packages/mdc-radio/_mixins.scss b/packages/mdc-radio/_mixins.scss index 21774060e5b..ecbd5a81d75 100644 --- a/packages/mdc-radio/_mixins.scss +++ b/packages/mdc-radio/_mixins.scss @@ -150,7 +150,7 @@ $mdc-radio-ripple-target: ".mdc-radio__ripple"; } &--touch { - @include mdc-touch-target-component( + @include mdc-touch-target-margin( $component-height: $mdc-radio-ripple-size, $component-width: $mdc-radio-ripple-size, $query: $query); diff --git a/packages/mdc-touch-target/README.md b/packages/mdc-touch-target/README.md index b6ac8236610..ac7a47a8b5d 100644 --- a/packages/mdc-touch-target/README.md +++ b/packages/mdc-touch-target/README.md @@ -74,4 +74,4 @@ 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. +`mdc-touch-target-margin` | 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 30f172308fd..4657af0f7a4 100644 --- a/packages/mdc-touch-target/_mixins.scss +++ b/packages/mdc-touch-target/_mixins.scss @@ -72,8 +72,9 @@ } } -/// Styles applied to the component with the increased touch target. -@mixin mdc-touch-target-component($component-height, $component-width: null, $query: mdc-feature-all()) { +/// Applies margin to the component with the increased touch target, +/// to compensate for the touch target. +@mixin mdc-touch-target-margin($component-height, $component-width: null, $query: mdc-feature-all()) { $feat-structure: mdc-feature-create-target($query, structure); $vertical-margin-value: ($mdc-touch-target-height - $component-height) / 2; diff --git a/test/scss/_feature-targeting-test.scss b/test/scss/_feature-targeting-test.scss index 2a2ec1bf686..7ac31af4cda 100644 --- a/test/scss/_feature-targeting-test.scss +++ b/test/scss/_feature-targeting-test.scss @@ -308,7 +308,7 @@ // Touch Target @include mdc-touch-target-wrapper($query: $query); @include mdc-touch-target($query: $query); - @include mdc-touch-target-component(0, $query: $query); + @include mdc-touch-target-margin(0, $query: $query); // Typography @include mdc-typography-core-styles($query: $query);