fix(material/tooltip): change tooltip to use MDC's token API

angular · May 5, 2023 · 44b57a5 · 44b57a5
1 parent d10c189
commit 44b57a5
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 39 deletions.
diff --git a/src/material/core/tokens/m2/mdc/_plain-tooltip.scss b/src/material/core/tokens/m2/mdc/_plain-tooltip.scss
@@ -0,0 +1,80 @@
+@use 'sass:map';
+@use '../../../theming/theming';
+@use '../../../typography/typography-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, plain-tooltip);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+@function get-unthemable-tokens() {
+  @return (
+    // Border radius for the tooltip container.
+    container-shape: 4px,
+    // Line height of the tooltip text.
+    supporting-text-line-height: 16px,
+    // MDC does not seem to use these token.
+    supporting-text-type: null,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $background: map.get($config, background);
+
+  @return (
+    // Color of the tooltip container.
+    container-color: theming.get-color-from-palette($background, tooltip),
+    // Color of the tooltip text.
+    supporting-text-color: #fff,
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  // TODO(amysorto): The earlier implementation of the tooltip used MDC's APIs to create the
+  // typography tokens. As a result, we unintentionally allowed `null` typography configs to be
+  // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary
+  // fallback.
+  @if ($config == null) {
+    $config: mdc-helpers.private-fallback-typography-from-mdc();
+  }
+
+  @return (
+    // Font for the tooltip text.
+    supporting-text-font: typography-utils.font-family($config, caption)
+    or typography-utils.font-family($config),
+    // Font size for the the tooltip text.
+    supporting-text-size: typography-utils.font-size($config, caption),
+    // Font weight of the the tooltip text.
+    supporting-text-weight: typography-utils.font-weight($config, caption),
+    // Tracking (space between letters) of the tooltip text.
+    supporting-text-tracking: typography-utils.letter-spacing($config, caption),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return map.merge(
+          get-unthemable-tokens(),
+          map.merge(
+                  get-color-tokens(token-utils.$placeholder-color-config),
+                  map.merge(
+                          get-typography-tokens(token-utils.$placeholder-typography-config),
+                          get-density-tokens(token-utils.$placeholder-density-config)
+                  )
+          )
+  );
+}
diff --git a/src/material/core/tokens/tests/test-validate-tokens.scss b/src/material/core/tokens/tests/test-validate-tokens.scss
@@ -8,6 +8,7 @@
 @use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
 @use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
 @use '@material/list/list-theme' as mdc-list-theme;
+@use '@material/tooltip/plain-tooltip-theme' as mdc-plaintip-tooltip-theme;
 @use '@material/radio/radio-theme' as mdc-radio-theme;
 @use '@material/tab-indicator/tab-indicator-theme' as mdc-tab-indicator-theme;
 @use '@material/tab/tab-theme' as mdc-tab-theme;
@@ -21,6 +22,7 @@
 @use '../m2/mdc/linear-progress' as tokens-mdc-linear-progress;
 @use '../m2/mdc/list' as tokens-mdc-list;
 @use '../m2/mdc/outlined-card' as tokens-mdc-outlined-card;
+@use '../m2/mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
 @use '../m2/mdc/radio' as tokens-mdc-radio;
 @use '../m2/mdc/tab-indicator' as tokens-mdc-tab-indicator;
 @use '../m2/mdc/tab' as tokens-mdc-tab;
@@ -73,6 +75,11 @@
   $slots: tokens-mdc-linear-progress.get-token-slots(),
   $reference: mdc-linear-progress-theme.$light-theme
 );
+@include validate-slots(
+  $component: 'm2.mdc.plain-tooltip',
+  $slots: tokens-mdc-plain-tooltip.get-token-slots(),
+  $reference: mdc-plaintip-tooltip-theme.$light-theme
+);
 @include validate-slots(
   $component: 'm2.mdc.radio',
   $slots: tokens-mdc-radio.get-token-slots(),

diff --git a/src/material/tooltip/_tooltip-theme.scss b/src/material/tooltip/_tooltip-theme.scss
@@ -1,41 +1,37 @@
-@use 'sass:map';
-@use '@material/tooltip/plain-tooltip-theme';
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/typography/typography' as mdc-typography;
+@use '@material/tooltip/plain-tooltip-theme' as mdc-plain-tooltip-theme;
 @use '../core/theming/theming';
-@use '../core/theming/palette';
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/typography/typography';
+@use '../core/tokens/m2/mdc/plain-tooltip' as m2-mdc-plain-tooltip;
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  @include mdc-helpers.using-mdc-theme($config) {
-    .mat-mdc-tooltip {
-      @include plain-tooltip-theme.theme((
-        container-color: map.get(palette.$light-theme-background-palette, tooltip),
-        supporting-text-color: mdc-theme-color.prop-value(text-primary-on-dark)
-      ));
-    }
+  $mdc-tooltip-color-tokens: m2-mdc-plain-tooltip.get-color-tokens($config);
+
+  // Add values for MDC tooltip tokens.
+  .mat-mdc-tooltip {
+    @include mdc-plain-tooltip-theme.theme($mdc-tooltip-color-tokens);
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
           theming.get-typography-config($config-or-theme));
-  @include mdc-helpers.using-mdc-typography($config) {
-    .mat-mdc-tooltip {
-      @include plain-tooltip-theme.theme((
-        supporting-text-font: mdc-typography.get-font(caption),
-        supporting-text-size: mdc-typography.get-size(caption),
-        supporting-text-weight: mdc-typography.get-weight(caption),
-        supporting-text-tracking: mdc-typography.get-tracking(caption),
-      ));
-    }
+  $mdc-tooltip-typography-tokens: m2-mdc-plain-tooltip.get-typography-tokens($config);
+
+  // Add values for MDC tooltip tokens.
+  .mat-mdc-tooltip {
+    @include mdc-plain-tooltip-theme.theme($mdc-tooltip-typography-tokens);
   }
 }
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
+  $mdc-tooltip-density-tokens: m2-mdc-plain-tooltip.get-density-tokens($density-scale);
+
+  // Add values for MDC tooltip tokens.
+  .mat-mdc-tooltip {
+    @include mdc-plain-tooltip-theme.theme($mdc-tooltip-density-tokens);
+  }
 }
 
 @mixin theme($theme-or-color-config) {

diff --git a/src/material/tooltip/tooltip.scss b/src/material/tooltip/tooltip.scss
@@ -1,20 +1,22 @@
-@use '@material/tooltip/tooltip';
-@use '@material/tooltip/tooltip-theme';
-@use '@material/tooltip/plain-tooltip-theme';
-@use '../core/mdc-helpers/mdc-helpers';
-
-@include mdc-helpers.disable-mdc-fallback-declarations {
-  // Only include the structural styles, because we handle the animation ourselves.
-  @include tooltip.static-styles($query: structure);
-  @include plain-tooltip-theme.theme-styles((
-    container-shape: tooltip-theme.$border-radius,
-    container-color: #fff,
-    supporting-text-color: #000,
-    supporting-text-font: inherit,
-    supporting-text-size: inherit,
-    supporting-text-tracking: inherit,
-    supporting-text-weight: inherit,
-  ));
+@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);
+
+    // Add default values for MDC tooltip tokens that aren't outputted by the theming API.
+    @include mdc-plain-tooltip-theme.theme(m2-mdc-plain-tooltip.get-unthemable-tokens());
+  }
 }
 
 .mat-mdc-tooltip {