feat(touch-target): margin mixin now also allows custom property maps…

… as arguments. PiperOrigin-RevId: 492448536
material-components · Dec 2, 2022 · dd99c87 · dd99c87
1 parent f0a0bbc
commit dd99c87
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 23 deletions.
diff --git a/packages/mdc-button/_button-filled-theme.scss b/packages/mdc-button/_button-filled-theme.scss
@@ -30,7 +30,7 @@
 @use '@material/theme/theme';
 @use './button-shared-theme';
 
-$_custom-property-prefix: 'filled-button';
+$custom-property-prefix: 'filled-button';
 
 $light-theme: (
   container-color: primary,
@@ -76,7 +76,7 @@ $light-theme: (
     $theme,
     $resolver: $resolver
   );
-  @include keys.declare-custom-properties($theme, $_custom-property-prefix);
+  @include keys.declare-custom-properties($theme, $custom-property-prefix);
 }
 
 @mixin theme-styles(
@@ -87,7 +87,7 @@ $light-theme: (
   @include theme.validate-theme($light-theme, $theme);
   $theme: keys.create-theme-properties(
     $theme,
-    $prefix: $_custom-property-prefix
+    $prefix: $custom-property-prefix
   );
   @include button-shared-theme.theme-styles($theme, $resolver, $query: $query);
 }

diff --git a/packages/mdc-button/_button-outlined-theme.scss b/packages/mdc-button/_button-outlined-theme.scss
@@ -40,7 +40,7 @@
 $outlined-border-width: 1px !default;
 $outline-color: rgba(theme-color.prop-value(on-surface), 0.12) !default;
 
-$_custom-property-prefix: 'outlined-button';
+$custom-property-prefix: 'outlined-button';
 
 $light-theme: (
   container-height: button-shared-theme.$height,
@@ -84,7 +84,7 @@ $light-theme: (
     $theme,
     $resolver: $resolver
   );
-  @include keys.declare-custom-properties($theme, $_custom-property-prefix);
+  @include keys.declare-custom-properties($theme, $custom-property-prefix);
 }
 
 @mixin theme-styles(
@@ -95,7 +95,7 @@ $light-theme: (
   @include theme.validate-theme-styles($light-theme, $theme);
   $theme: keys.create-theme-properties(
     $theme,
-    $prefix: $_custom-property-prefix
+    $prefix: $custom-property-prefix
   );
   @include _theme($theme, $resolver, $query: $query);
 }

diff --git a/packages/mdc-button/_button-protected-theme.scss b/packages/mdc-button/_button-protected-theme.scss
@@ -26,7 +26,7 @@
 @use '@material/tokens/resolvers';
 @use './button-shared-theme';
 
-$_custom-property-prefix: 'protected-button';
+$custom-property-prefix: 'protected-button';
 
 $light-theme: (
   container-color: primary,
@@ -72,7 +72,7 @@ $light-theme: (
     $theme,
     $resolver: $resolver
   );
-  @include keys.declare-custom-properties($theme, $_custom-property-prefix);
+  @include keys.declare-custom-properties($theme, $custom-property-prefix);
 }
 
 @mixin theme-styles(
@@ -84,7 +84,7 @@ $light-theme: (
 
   $theme: keys.create-theme-properties(
     $theme,
-    $prefix: $_custom-property-prefix
+    $prefix: $custom-property-prefix
   );
   @include button-shared-theme.theme-styles($theme, $resolver, $query: $query);
 }
diff --git a/packages/mdc-button/_button-text-theme.scss b/packages/mdc-button/_button-text-theme.scss
@@ -30,7 +30,7 @@
 @use '@material/tokens/resolvers';
 @use './button-shared-theme';
 
-$_custom-property-prefix: 'text-button';
+$custom-property-prefix: 'text-button';
 
 $light-theme: (
   container-height: button-shared-theme.$height,
@@ -68,7 +68,7 @@ $light-theme: (
     $theme,
     $resolver: $resolver
   );
-  @include keys.declare-custom-properties($theme, $_custom-property-prefix);
+  @include keys.declare-custom-properties($theme, $custom-property-prefix);
 }
 
 @mixin theme-styles(
@@ -79,7 +79,7 @@ $light-theme: (
   @include theme.validate-theme-styles($light-theme, $theme);
   $theme: keys.create-theme-properties(
     $theme,
-    $prefix: $_custom-property-prefix
+    $prefix: $custom-property-prefix
   );
   @include theme-styles-internal($theme, $resolver: $resolver, $query: $query);
 }

diff --git a/packages/mdc-touch-target/_touch-target.scss b/packages/mdc-touch-target/_touch-target.scss
@@ -27,6 +27,9 @@
 @use '@material/base/mixins' as base-mixins;
 @use '@material/feature-targeting/feature-targeting';
 @use '@material/rtl/rtl';
+@use '@material/theme/theme';
+@use '@material/theme/keys';
+@use '@material/theme/custom-properties';
 
 $height: 48px !default;
 $width: $height !default;
@@ -96,22 +99,73 @@ $width: $height !default;
 ) {
   $feat-structure: feature-targeting.create-target($query, structure);
 
-  $vertical-margin-value: math.div($touch-target-height - $component-height, 2);
-
   @include feature-targeting.targets($feat-structure) {
-    margin-top: $vertical-margin-value;
-    margin-bottom: $vertical-margin-value;
+    @if keys.is-key($touch-target-height) or
+      keys.is-key($component-height) or
+      custom-properties.is-custom-prop($touch-target-height) or
+      custom-properties.is-custom-prop($component-height)
+    {
+      // Custom properties
+      @include theme.property(
+        margin-top,
+        'max((touch-target-height - component-height) / 2, 0px)',
+        $replace: (
+          component-height: $component-height,
+          touch-target-height: $touch-target-height
+        )
+      );
+      @include theme.property(
+        margin-bottom,
+        'max((touch-target-height - component-height) / 2, 0px)',
+        $replace: (
+          component-height: $component-height,
+          touch-target-height: $touch-target-height
+        )
+      );
+    } @else {
+      // Static values
+      $vertical-margin-value: math.div(
+        $touch-target-height - $component-height,
+        2
+      );
+      margin-top: $vertical-margin-value;
+      margin-bottom: $vertical-margin-value;
+    }
   }
 
   @if $component-width {
-    $horizontal-margin-value: math.div(
-      $touch-target-width - $component-width,
-      2
-    );
-
     @include feature-targeting.targets($feat-structure) {
-      margin-right: $horizontal-margin-value;
-      margin-left: $horizontal-margin-value;
+      @if keys.is-key($touch-target-width) or
+        keys.is-key($component-width) or
+        custom-properties.is-custom-prop($touch-target-width) or
+        custom-properties.is-custom-prop($component-width)
+      {
+        // Custom properties
+        @include theme.property(
+          margin-right,
+          'max((touch-target-width - component-width) / 2, 0px)',
+          $replace: (
+            component-width: $component-width,
+            touch-target-width: $touch-target-width
+          )
+        );
+        @include theme.property(
+          margin-left,
+          'max((touch-target-width - component-width) / 2), 0px',
+          $replace: (
+            component-width: $component-width,
+            touch-target-width: $touch-target-width
+          )
+        );
+      } @else {
+        // Static values
+        $horizontal-margin-value: math.div(
+          $touch-target-width - $component-width,
+          2
+        );
+        margin-right: $horizontal-margin-value;
+        margin-left: $horizontal-margin-value;
+      }
     }
   }
 }
diff --git a/packages/mdc-touch-target/package.json b/packages/mdc-touch-target/package.json
@@ -19,6 +19,7 @@
     "@material/base": "^14.0.0",
     "@material/feature-targeting": "^14.0.0",
     "@material/rtl": "^14.0.0",
+    "@material/theme": "^14.0.0",
     "tslib": "^2.1.0"
   },
   "publishConfig": {