From 3c1449c9f646093ff1d1e23e348b3b27f53591a9 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Thu, 10 Oct 2024 09:34:00 +0200
Subject: [PATCH] fix(material/badge): content incorrectly truncated in M3

Fixes that at some point the M3 badge regressed to where the content was always being truncated. The regression was likely, because the previous setup was very fragile and it was relying on some tokens never being emitted.

These changes remove the need to rely on fallbacks and resolve the issue by setting the correct token values.

Fixes #29788.
---
 src/material/badge/badge.scss               | 10 +++++-----
 src/material/core/tokens/m2/mat/_badge.scss | 15 ++++++++++++---
 src/material/core/tokens/m3/mat/_badge.scss |  9 ++++++---
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/material/badge/badge.scss b/src/material/badge/badge.scss
index 22f40ac3e8c9..a7bc40b04a12 100644
--- a/src/material/badge/badge.scss
+++ b/src/material/badge/badge.scss
@@ -22,11 +22,11 @@ $large-size: $default-size + 6;
       // * `container-size` token - In M2 the token is emitted as `unset` to preserve the legacy
       // behavior while in M3 it targets `min-width` and `min-height` which allows the badge to
       // grow with the content.
-      width: token-utils.get-token-variable($legacy-size-var-name, $fallback: unset);
-      height: token-utils.get-token-variable($legacy-size-var-name, $fallback: unset);
-      min-width: token-utils.get-token-variable($size-var-name, $fallback: unset);
-      min-height: token-utils.get-token-variable($size-var-name, $fallback: unset);
-      line-height: token-utils.get-token-variable($legacy-size-var-name);
+      @include token-utils.create-token-slot(width, $legacy-size-var-name);
+      @include token-utils.create-token-slot(height, $legacy-size-var-name);
+      @include token-utils.create-token-slot(min-width, $size-var-name);
+      @include token-utils.create-token-slot(min-height, $size-var-name);
+      @include token-utils.create-token-slot(line-height, '#{$prefix}line-height');
       @include token-utils.create-token-slot(padding, '#{$prefix}container-padding');
       @include token-utils.create-token-slot(font-size, '#{$prefix}text-size');
       @include token-utils.create-token-slot(margin, '#{$prefix}container-offset');
diff --git a/src/material/core/tokens/m2/mat/_badge.scss b/src/material/core/tokens/m2/mat/_badge.scss
index 56f7e64c38fb..8e93f5750345 100644
--- a/src/material/core/tokens/m2/mat/_badge.scss
+++ b/src/material/core/tokens/m2/mat/_badge.scss
@@ -6,15 +6,19 @@
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
+$_default-size: 22px;
+$_small-size: $_default-size - 6px;
+$_large-size: $_default-size + 6px;
+
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, badge);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  $default-size: 22px;
-  $small-size: $default-size - 6;
-  $large-size: $default-size + 6;
+  $default-size: $_default-size;
+  $small-size: $_small-size;
+  $large-size: $_large-size;
 
   @return (
     container-shape: 50%,
@@ -77,10 +81,15 @@ $prefix: (mat, badge);
 
   @return (
     text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    line-height: $_default-size,
     text-size: $base-size,
     text-weight: 600,
+
     small-size-text-size: $base-size * 0.75,
+    small-size-line-height: $_small-size,
+
     large-size-text-size: $base-size * 2,
+    large-size-line-height: $_large-size,
   );
 }
 
diff --git a/src/material/core/tokens/m3/mat/_badge.scss b/src/material/core/tokens/m3/mat/_badge.scss
index 9ebf1ec3f8a9..65be1ae562a4 100644
--- a/src/material/core/tokens/m3/mat/_badge.scss
+++ b/src/material/core/tokens/m3/mat/_badge.scss
@@ -25,9 +25,11 @@ $prefix: (mat, badge);
     small-size-text-size: token-definition.hardcode(0, $exclude-hardcoded),
     container-shape: map.get($systems, md-sys-shape, corner-full),
     container-size: token-definition.hardcode(16px, $exclude-hardcoded),
-    legacy-container-size: token-definition.hardcode(16px, $exclude-hardcoded),
-    legacy-small-size-container-size: token-definition.hardcode(16px, $exclude-hardcoded),
+    line-height: token-definition.hardcode(16px, $exclude-hardcoded),
+    legacy-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
+    legacy-small-size-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
     small-size-container-size: token-definition.hardcode(6px, $exclude-hardcoded),
+    small-size-line-height: token-definition.hardcode(6px, $exclude-hardcoded),
     container-padding: token-definition.hardcode(0 4px, $exclude-hardcoded),
     small-size-container-padding: token-definition.hardcode(0, $exclude-hardcoded),
     container-offset: token-definition.hardcode(-12px 0, $exclude-hardcoded),
@@ -37,11 +39,12 @@ $prefix: (mat, badge);
 
     // This size isn't in the M3 spec so we emit the same values as for `medium`.
     large-size-container-size: token-definition.hardcode(16px, $exclude-hardcoded),
+    large-size-line-height: token-definition.hardcode(16px, $exclude-hardcoded),
     large-size-container-offset: token-definition.hardcode(-12px 0, $exclude-hardcoded),
     large-size-container-overlap-offset: token-definition.hardcode(-12px, $exclude-hardcoded),
     large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
     large-size-container-padding: token-definition.hardcode(0 4px, $exclude-hardcoded),
-    legacy-large-size-container-size: token-definition.hardcode(16px, $exclude-hardcoded),
+    legacy-large-size-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
   ), (
     primary: (
       background-color: map.get($systems, md-sys-color, primary),