refactor(touchtarget): Rename mdc-touch-target-component => mdc… (#5245)

BREAKING CHANGE: Renames mixin from mdc-touch-target-component => mdc-touch-target-margin
material-components · Nov 11, 2019 · afe0dd1 · afe0dd1
1 parent b0cecf1
commit afe0dd1
Show file tree

Hide file tree

Showing 8 changed files with 10 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);