refactor(material/menu): remove MDC classes from markup (#27497)

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.

Author: crisbeto

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()">

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()',

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>

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);
   }