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

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