refactor(tooltip): Tooltip enter/exit animation timing is moved into _tooltip-theme.scss allowing users to configure their own animation timing.

PiperOrigin-RevId: 350466445

Author: sayris

packages/mdc-tooltip/README.md

@@ -160,6 +160,8 @@ Mixin | Description
 `shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to tooltip surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
 `word-break($value, $fallbackValue)` | Sets the `word-break` property for the tooltip label. This is used to force-wrap long tooltip labels that lack spaces and hyphens. The optional $fallbackValue param can be used for IE11 as it does not support the `break-word` option. Users for IE11 who do not want their tooltip labels to be broken in the middle of the word can use this mixin to remove the default IE11 behavior of `break-all`.
 `z-index($z-index)` | Sets the z-index of the tooltip.
+`show-transition($enter-duration)` | Sets the duration for the animation that shows the tooltip.
+`exit-transition($exit-duration)` | Sets the duration for the animation that hides the tooltip.
 
 ### `MDCTooltip` Methods
 

packages/mdc-tooltip/_tooltip-theme.scss

@@ -21,8 +21,10 @@
 //
 
 // Selector '.mdc-*' should only be used in this project.
-// stylelint-disable selector-class-pattern
+// stylelint-disable selector-class-pattern --
+// Internal styling for Tooltip MDC component.
 
+@use '@material/animation/functions' as animation-functions;
 @use '@material/feature-targeting/feature-targeting';
 @use '@material/shape/mixins' as shape-mixins;
 @use '@material/theme/theme';
@@ -34,6 +36,9 @@ $background-color: rgba(black, theme-color.text-emphasis(medium));
 $border-radius: small;
 $label-color: text-primary-on-dark;
 
+$enter-duration: 150ms;
+$exit-duration: 75ms;
+
 // Rich Tooltip variables
 $rich-background-color: rgba(white, theme-color.text-emphasis(medium));
 $rich-title-text-color: text-primary-on-light;
@@ -149,3 +154,28 @@ $z-index: 2;
     }
   }
 }
+
+// Sets the duration for the animation that shows the tooltip.
+// @param {Number} $enter-duration
+@mixin show-transition($enter-duration, $query: feature-targeting.all()) {
+  $feat-animation: feature-targeting.create-target($query, animation);
+
+  @include feature-targeting.targets($feat-animation) {
+    .mdc-tooltip--showing-transition .mdc-tooltip__surface {
+      transition: animation-functions.enter(opacity, $enter-duration),
+        animation-functions.enter(transform, $enter-duration);
+    }
+  }
+}
+
+// Sets the duration for the animation that hides the tooltip.
+// @param {Number} $exit-duration
+@mixin hide-transition($exit-duration, $query: feature-targeting.all()) {
+  $feat-animation: feature-targeting.create-target($query, animation);
+
+  @include feature-targeting.targets($feat-animation) {
+    .mdc-tooltip--hide-transition .mdc-tooltip__surface {
+      transition: animation-functions.exit-permanent(opacity, $exit-duration);
+    }
+  }
+}

packages/mdc-tooltip/_tooltip.scss

@@ -21,9 +21,9 @@
 //
 
 // Selector '.mdc-*' should only be used in this project.
-// stylelint-disable selector-class-pattern
+// stylelint-disable selector-class-pattern --
+// Internal styling for Tooltip MDC component.
 
-@use '@material/animation/functions' as animation-functions;
 @use '@material/elevation/mixins' as elevation-mixins;
 @use '@material/feature-targeting/feature-targeting';
 @use '@material/rtl/rtl' as rtl;
@@ -49,12 +49,8 @@ $_content-margin-x: 8px;
 $_content-type-scale: body1;
 $_title-type-scale: subtitle2;
 
-$enter-duration: 150ms;
-$exit-duration: 75ms;
-
 @mixin core-styles($query: feature-targeting.all()) {
   $feat-structure: feature-targeting.create-target($query, structure);
-  $feat-animation: feature-targeting.create-target($query, animation);
 
   @include tooltip-theme.shape-radius(
     tooltip-theme.$border-radius,
@@ -74,6 +70,14 @@ $exit-duration: 75ms;
     $query: $query
   );
   @include tooltip-theme.z-index(tooltip-theme.$z-index, $query: $query);
+  @include tooltip-theme.show-transition(
+    tooltip-theme.$enter-duration,
+    $query: $query
+  );
+  @include tooltip-theme.hide-transition(
+    tooltip-theme.$exit-duration,
+    $query: $query
+  );
 
   .mdc-tooltip {
     @include feature-targeting.targets($feat-structure) {
@@ -164,25 +168,12 @@ $exit-duration: 75ms;
       }
     }
 
-    .mdc-tooltip--showing-transition & {
-      @include feature-targeting.targets($feat-animation) {
-        transition: animation-functions.enter(opacity, $enter-duration),
-          animation-functions.enter(transform, $enter-duration);
-      }
-    }
-
     .mdc-tooltip--hide & {
       @include feature-targeting.targets($feat-structure) {
         transform: scale(1);
       }
     }
 
-    .mdc-tooltip--hide-transition & {
-      @include feature-targeting.targets($feat-animation) {
-        transition: animation-functions.exit-permanent(opacity, $exit-duration);
-      }
-    }
-
     .mdc-tooltip__title {
       @include typography.text-baseline($top: 20px, $query: $query);
       @include typography.typography(