From 1b96d4882be74441086ff15b59e58cfd9ee0e0b6 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Sat, 22 Jul 2023 10:42:40 +0300
Subject: [PATCH] refactor(material/menu): remove MDC classes from markup

After #27377 and #27378 we no longer use MDC classes directly in the markup. Instead we either use our own styles or we target our selectors with MDC mixins. However, the MDC classes were left in to reduce the amount of internal breakages. These leftover styles can still cause styles to bleed in from the MDC list so this change removes any remaining references.
---
 src/material/menu/menu-item.html |  2 +-
 src/material/menu/menu-item.ts   |  2 +-
 src/material/menu/menu.html      |  4 ++--
 src/material/menu/menu.scss      | 35 ++++++--------------------------
 4 files changed, 10 insertions(+), 33 deletions(-)

diff --git a/src/material/menu/menu-item.html b/src/material/menu/menu-item.html
index 286f9ac116c8..0fa5933c47c4 100644
--- a/src/material/menu/menu-item.html
+++ b/src/material/menu/menu-item.html
@@ -1,5 +1,5 @@
 <ng-content select="mat-icon, [matMenuItemIcon]"></ng-content>
-<span class="mdc-list-item__primary-text"><ng-content></ng-content></span>
+<span class="mat-mdc-menu-item-text"><ng-content></ng-content></span>
 <div class="mat-mdc-menu-ripple" matRipple
      [matRippleDisabled]="disableRipple || disabled"
      [matRippleTrigger]="_getHostElement()">
diff --git a/src/material/menu/menu-item.ts b/src/material/menu/menu-item.ts
index 4a4841a29f1a..29a622045cc1 100644
--- a/src/material/menu/menu-item.ts
+++ b/src/material/menu/menu-item.ts
@@ -42,7 +42,7 @@ const _MatMenuItemBase = mixinDisableRipple(mixinDisabled(class {}));
   inputs: ['disabled', 'disableRipple'],
   host: {
     '[attr.role]': 'role',
-    'class': 'mat-mdc-menu-item mat-mdc-focus-indicator mdc-list-item',
+    'class': 'mat-mdc-menu-item mat-mdc-focus-indicator',
     '[class.mat-mdc-menu-item-highlighted]': '_highlighted',
     '[class.mat-mdc-menu-item-submenu-trigger]': '_triggersSubmenu',
     '[attr.tabindex]': '_getTabIndex()',
diff --git a/src/material/menu/menu.html b/src/material/menu/menu.html
index d6efbda57cf8..7f234a34de7e 100644
--- a/src/material/menu/menu.html
+++ b/src/material/menu/menu.html
@@ -1,6 +1,6 @@
 <ng-template>
   <div
-    class="mat-mdc-menu-panel mdc-menu-surface mdc-menu-surface--open mat-mdc-elevation-specific"
+    class="mat-mdc-menu-panel mat-mdc-elevation-specific"
     [id]="panelId"
     [ngClass]="_classList"
     (keydown)="_handleKeydown($event)"
@@ -13,7 +13,7 @@
     [attr.aria-label]="ariaLabel || null"
     [attr.aria-labelledby]="ariaLabelledby || null"
     [attr.aria-describedby]="ariaDescribedby || null">
-    <div class="mat-mdc-menu-content mdc-list">
+    <div class="mat-mdc-menu-content">
       <ng-content></ng-content>
     </div>
   </div>
diff --git a/src/material/menu/menu.scss b/src/material/menu/menu.scss
index 124fa61ba9ab..5a6e2da18395 100644
--- a/src/material/menu/menu.scss
+++ b/src/material/menu/menu.scss
@@ -18,8 +18,10 @@ mat-menu {
   @include mdc-list-mixins.list-base($query: structure);
 
   &,
-  .mat-mdc-menu-item .mdc-list-item__primary-text {
+  .mat-mdc-menu-item .mat-mdc-menu-item-text {
     @include mdc-typography.smooth-font();
+    white-space: normal;
+
     @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) {
       @include token-utils.create-token-slot(font-family, item-label-text-font);
       @include token-utils.create-token-slot(line-height, item-label-text-line-height);
@@ -32,7 +34,8 @@ mat-menu {
 
 .mat-mdc-menu-panel {
   @include token-utils.create-token-values(tokens-mat-menu.$prefix,
-      tokens-mat-menu.get-unthemable-tokens());
+    tokens-mat-menu.get-unthemable-tokens());
+  @include menu-common.base;
   box-sizing: border-box;
   outline: 0;
 
@@ -63,20 +66,6 @@ mat-menu {
   }
 }
 
-// We need to increase the specificity for these styles to ensure we are not overridden by MDC's
-// .mdc-menu-surface styles. This can happen if the MDC styles are loaded in after our styles.
-.mat-mdc-menu-panel.mat-mdc-menu-panel {
-  // Include Material's base menu panel styling which contain the `min-width`, `max-width` and some
-  // styling to make scrolling smoother. MDC doesn't include the `min-width` and `max-width`, even
-  // though they're explicitly defined in spec.
-  @include menu-common.base;
-
-  // The CDK positioning uses flexbox to anchor the element, whereas MDC uses `position: absolute`.
-  // Furthermore, the relative position ensures that the `offsetParent` is the menu, rather than
-  // the overlay. This comes into play when we measure the `offsetTop` of a menu item.
-  position: relative;
-}
-
 .mat-mdc-menu-item {
   @include mdc-helpers.disable-mdc-fallback-declarations {
     @include mdc-list-mixins.item-base;
@@ -96,6 +85,7 @@ mat-menu {
   background: none;
   text-decoration: none;
   margin: 0; // Resolves an issue where buttons have an extra 2px margin on Safari.
+  align-items: center;
 
   // Set the `min-height` here ourselves, instead of going through
   // the `mdc-list-one-line-item-density` mixin, because it sets a `height`
@@ -117,13 +107,6 @@ mat-menu {
     }
   }
 
-  // If the MDC list is loaded after the menu, this gets overwritten which breaks the text
-  // alignment. Ideally we'd wrap all the MDC mixins above with this selector, but the increased
-  // specificity breaks some internal overrides.
-  &.mdc-list-item {
-    align-items: center;
-  }
-
   &[disabled] {
     cursor: default;
 
@@ -159,12 +142,6 @@ mat-menu {
     }
   }
 
-  // Needs to be overwritten explicitly, because the style can
-  // leak in from the list and cause the text to truncate.
-  .mdc-list-item__primary-text {
-    white-space: normal;
-  }
-
   &.mat-mdc-menu-item-submenu-trigger {
     @include menu-common.item-submenu-trigger(mdc-list-variables.$side-padding);
   }