From c8fa10fbad5945a8f74b535227d6d47d49cf19ca Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Sat, 22 Jun 2024 09:18:09 +0200
Subject: [PATCH] refactor(material/tooltip): simplify structural styles

Simplifies the structural styles of `MatTooltip` to make them smaller and easier to maintain.
---
 src/material/tooltip/_tooltip-theme.scss | 34 ++++++-----
 src/material/tooltip/tooltip.html        |  4 +-
 src/material/tooltip/tooltip.scss        | 75 ++++++++++++++++++------
 3 files changed, 76 insertions(+), 37 deletions(-)

diff --git a/src/material/tooltip/_tooltip-theme.scss b/src/material/tooltip/_tooltip-theme.scss
index 5e4b3449860e..5615194ada4b 100644
--- a/src/material/tooltip/_tooltip-theme.scss
+++ b/src/material/tooltip/_tooltip-theme.scss
@@ -1,5 +1,3 @@
-@use 'sass:map';
-@use '@material/tooltip/plain-tooltip-theme' as mdc-plain-tooltip-theme;
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -15,7 +13,10 @@
   @else {
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-plain-tooltip-theme.theme(tokens-mdc-plain-tooltip.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mdc-plain-tooltip.$prefix,
+        tokens-mdc-plain-tooltip.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -25,11 +26,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
   @else {
-    $mdc-tooltip-color-tokens: tokens-mdc-plain-tooltip.get-color-tokens($theme);
-
-    // Add values for MDC tooltip tokens.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-plain-tooltip-theme.theme($mdc-tooltip-color-tokens);
+      @include token-utils.create-token-values(
+        tokens-mdc-plain-tooltip.$prefix,
+        tokens-mdc-plain-tooltip.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -39,11 +40,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {
-    $mdc-tooltip-typography-tokens: tokens-mdc-plain-tooltip.get-typography-tokens($theme);
-
-    // Add values for MDC tooltip tokens.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-plain-tooltip-theme.theme($mdc-tooltip-typography-tokens);
+      @include token-utils.create-token-values(
+        tokens-mdc-plain-tooltip.$prefix,
+        tokens-mdc-plain-tooltip.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -53,11 +54,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {
-    $mdc-tooltip-density-tokens: tokens-mdc-plain-tooltip.get-density-tokens($theme);
-
-    // Add values for MDC tooltip tokens.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-plain-tooltip-theme.theme($mdc-tooltip-density-tokens);
+      @include token-utils.create-token-values(
+        tokens-mdc-plain-tooltip.$prefix,
+        tokens-mdc-plain-tooltip.get-density-tokens($theme)
+      );
     }
   }
 }
@@ -93,6 +94,7 @@
   @include validation.selector-defined(
       'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if $tokens != () {
-    @include mdc-plain-tooltip-theme.theme(map.get($tokens, tokens-mdc-plain-tooltip.$prefix));
+    $tokens: token-utils.get-tokens-for($tokens, tokens-mdc-plain-tooltip.$prefix);
+    @include token-utils.create-token-values(tokens-mdc-plain-tooltip.$prefix, $tokens);
   }
 }
diff --git a/src/material/tooltip/tooltip.html b/src/material/tooltip/tooltip.html
index 28b374a88f8a..b0910db1465f 100644
--- a/src/material/tooltip/tooltip.html
+++ b/src/material/tooltip/tooltip.html
@@ -1,8 +1,8 @@
 <div
   #tooltip
-  class="mdc-tooltip mdc-tooltip--shown mat-mdc-tooltip"
+  class="mdc-tooltip mat-mdc-tooltip"
   [ngClass]="tooltipClass"
   (animationend)="_handleAnimationEnd($event)"
   [class.mdc-tooltip--multiline]="_isMultiline">
-  <div class="mdc-tooltip__surface mdc-tooltip__surface-animation">{{message}}</div>
+  <div class="mat-mdc-tooltip-surface mdc-tooltip__surface">{{message}}</div>
 </div>
diff --git a/src/material/tooltip/tooltip.scss b/src/material/tooltip/tooltip.scss
index e00e0b55aab2..2371550ad14c 100644
--- a/src/material/tooltip/tooltip.scss
+++ b/src/material/tooltip/tooltip.scss
@@ -1,25 +1,11 @@
-@use '@material/theme/custom-properties' as mdc-custom-properties;
-@use '@material/tooltip/tooltip' as mdc-tooltip;
-@use '@material/tooltip/plain-tooltip-theme' as mdc-plain-tooltip-theme;
-@use '../core/tokens/m2/mdc/plain-tooltip' as m2-mdc-plain-tooltip;
-
-@include mdc-custom-properties.configure($emit-fallback-values: false,
-  $emit-fallback-vars: false) {
-  $mdc-tooltip-token-slots: m2-mdc-plain-tooltip.get-token-slots();
-
-  // Add the MDC tooltip static styles.
-  @include mdc-tooltip.static-styles();
-
-  .mat-mdc-tooltip {
-    // Add the official slots for the MDC tooltip.
-    @include mdc-plain-tooltip-theme.theme-styles($mdc-tooltip-token-slots);
-  }
-}
+@use '../core/tokens/m2/mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
+@use '../core/tokens/token-utils';
 
 .mat-mdc-tooltip {
   // We don't use MDC's positioning so this has to be relative.
   position: relative;
   transform: scale(0);
+  display: inline-flex;
 
   // Increases the area of the tooltip so the user's pointer can go from the trigger directly to it.
   &::before {
@@ -59,13 +45,64 @@
   }
 }
 
+.mat-mdc-tooltip-surface {
+  word-break: normal;
+  overflow-wrap: anywhere;
+  padding: 4px 8px;
+  min-width: 40px;
+  max-width: 200px;
+  min-height: 24px;
+  max-height: 40vh;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-align: center;
+
+  // TODO(crisbeto): these styles aren't necessary, but they were present in
+  // MDC and removing them is likely to cause screenshot differences.
+  will-change: transform, opacity;
+
+  @include token-utils.use-tokens(
+    tokens-mdc-plain-tooltip.$prefix,
+    tokens-mdc-plain-tooltip.get-token-slots()
+  ) {
+    @include token-utils.create-token-slot(background-color, container-color);
+    @include token-utils.create-token-slot(color, supporting-text-color);
+    @include token-utils.create-token-slot(border-radius, container-shape);
+    @include token-utils.create-token-slot(font-family, supporting-text-font);
+    @include token-utils.create-token-slot(font-size, supporting-text-size);
+    @include token-utils.create-token-slot(font-weight, supporting-text-weight);
+    @include token-utils.create-token-slot(line-height, supporting-text-line-height);
+    @include token-utils.create-token-slot(letter-spacing, supporting-text-tracking);
+  }
+
+  // Renders an outline in high contrast mode.
+  &::before {
+    position: absolute;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    border: 1px solid transparent;
+    border-radius: inherit;
+    content: '';
+    pointer-events: none;
+  }
+
+  .mdc-tooltip--multiline & {
+    text-align: left;
+  }
+
+  [dir='rtl'] .mdc-tooltip--multiline & {
+    text-align: right;
+  }
+}
+
 // We need the additional specificity here, because it can be overridden by `.cdk-overlay-panel`.
 .mat-mdc-tooltip-panel.mat-mdc-tooltip-panel-non-interactive {
   pointer-events: none;
 }
 
-// TODO(crisbeto): we may be able to use MDC directly for these animations.
-
 @keyframes mat-mdc-tooltip-show {
   0% {
     opacity: 0;