refactor(multiple): switch to non-deprecated MDC list styles

src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss

@@ -1,5 +1,5 @@
 @use '@material/menu-surface/mixins' as mdc-menu-surface;
-@use '@material/list/mixins' as mdc-list;
+@use '@material/list/evolution-mixins' as mdc-list;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/typography/typography';
 @use '../../material/core/theming/theming';
@@ -8,7 +8,7 @@
   $config: theming.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
     @include mdc-menu-surface.core-styles(mdc-helpers.$mat-theme-styles-query);
-    @include mdc-list.deprecated-without-ripple(mdc-helpers.$mat-theme-styles-query);
+    @include mdc-list.without-ripple(mdc-helpers.$mat-theme-styles-query);
   }
 }
 
@@ -21,7 +21,7 @@
     .mat-mdc-autocomplete-panel {
       // Note that we include this private mixin, because the public one adds
       // a bunch of styles that we aren't using for the autocomplete panel.
-      @include mdc-list.deprecated-base_(mdc-helpers.$mat-typography-styles-query);
+      @include mdc-list.list-base(mdc-helpers.$mat-typography-styles-query);
     }
   }
 }

src/material-experimental/mdc-autocomplete/autocomplete.scss

@@ -1,5 +1,5 @@
 @use '@material/menu-surface/mixins' as mdc-menu-surface;
-@use '@material/list/mixins' as mdc-list;
+@use '@material/list/evolution-mixins' as mdc-list;
 @use '../../cdk/a11y';
 
 @include mdc-menu-surface.core-styles($query: structure);
@@ -15,9 +15,7 @@
   // below the input. We use our own positioning logic, so we need to set this ourselves.
   transform-origin: center top;
 
-  // Note that we include this private mixin, because the public
-  // one adds a bunch of styles that we aren't using for the menu.
-  @include mdc-list.deprecated-base_($query: structure);
+  @include mdc-list.list-base($query: structure);
   @include a11y.high-contrast(active, off) {
     outline: solid 1px;
   }

src/material-experimental/mdc-autocomplete/autocomplete.spec.ts

@@ -1126,12 +1126,13 @@ describe('MDC-based MatAutocomplete', () => {
     it('should scroll to active options on UP arrow', () => {
       const scrollContainer =
           document.querySelector('.cdk-overlay-pane .mat-mdc-autocomplete-panel')!;
+      const initialScrollTop = scrollContainer.scrollTop;
 
       fixture.componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
       fixture.detectChanges();
 
-      // Expect option bottom minus the panel height plus padding (528 - 256 + 8 = 272)
-      expect(scrollContainer.scrollTop).toEqual(280, `Expected panel to reveal last option.`);
+      expect(scrollContainer.scrollTop)
+          .toBeGreaterThan(initialScrollTop, `Expected panel to reveal last option.`);
     });
 
     it('should not scroll to active options that are fully in the panel', () => {

src/material-experimental/mdc-core/option/_optgroup-theme.scss

@@ -1,4 +1,3 @@
-@use '@material/list' as mdc-list;
 @use '@material/theme/theme' as mdc-theme;
 @use '../../mdc-helpers/mdc-helpers';
 @use '../../../material/core/theming/theming';
@@ -12,8 +11,6 @@
       // Since this will usually be rendered in an overlay,
       // we have to explicitly set the default color.
       @include mdc-theme.prop(color, text-primary-on-background);
-      @include mdc-list.deprecated-item-disabled-text-color(
-        mdc-list.$deprecated-text-disabled-color, $query: mdc-helpers.$mat-theme-styles-query);
     }
   }
 }

src/material-experimental/mdc-core/option/_option-theme.scss

@@ -1,8 +1,6 @@
-// stylelint-disable max-line-length
-
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/theme' as mdc-theme;
-@use '@material/list' as mdc-list;
+@use '@material/list/evolution-mixins' as mdc-list-mixins;
 @use '@material/typography' as mdc-typography;
 @use '@material/ripple' as mdc-ripple;
 @use '../../mdc-helpers/mdc-helpers';
@@ -17,38 +15,36 @@
       // Since this will usually be rendered in an overlay,
       // we have explicitly set the default color.
       @include mdc-theme.prop(color, text-primary-on-background);
-      @include mdc-list.deprecated-item-disabled-text-color(
-        mdc-list.$deprecated-text-disabled-color, $query: mdc-helpers.$mat-theme-styles-query);
 
-      &:hover:not(.mdc-deprecated-list-item--disabled),
-      &:focus:not(.mdc-deprecated-list-item--disabled),
+      &:hover:not(.mdc-list-item--disabled),
+      &:focus:not(.mdc-list-item--disabled),
       &.mat-mdc-option-active,
 
       // In multiple mode there is a checkbox to show that the option is selected.
-      &.mdc-deprecated-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-deprecated-list-item--disabled) {
+      &.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
         $color: mdc-theme-color.$on-surface;
         background: rgba($color, mdc-ripple.states-opacity($color, hover));
       }
     }
 
     .mat-primary {
-      .mat-mdc-option.mdc-deprecated-list-item--selected:not(.mdc-deprecated-list-item--disabled) {
-        @include mdc-list.deprecated-item-primary-text-ink-color(
-                primary, $query: mdc-helpers.$mat-theme-styles-query);
+      .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
+        @include mdc-list-mixins.list-primary-text-ink-color(primary,
+          $query: mdc-helpers.$mat-theme-styles-query);
       }
     }
 
     .mat-accent {
-      .mat-mdc-option.mdc-deprecated-list-item--selected:not(.mdc-deprecated-list-item--disabled) {
-        @include mdc-list.deprecated-item-primary-text-ink-color(
-                secondary, $query: mdc-helpers.$mat-theme-styles-query);
+      .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
+        @include mdc-list-mixins.list-primary-text-ink-color(secondary,
+          $query: mdc-helpers.$mat-theme-styles-query);
       }
     }
 
     .mat-warn {
-      .mat-mdc-option.mdc-deprecated-list-item--selected:not(.mdc-deprecated-list-item--disabled) {
-        @include mdc-list.deprecated-item-primary-text-ink-color(
-                error, $query: mdc-helpers.$mat-theme-styles-query);
+      .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
+        @include mdc-list-mixins.list-primary-text-ink-color(error,
+          $query: mdc-helpers.$mat-theme-styles-query);
       }
     }
   }
@@ -61,7 +57,7 @@
   @include mdc-helpers.mat-using-mdc-typography($config) {
     // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
     // level. Class is repeated for increased specificity.
-    .mat-mdc-option {
+    .mat-mdc-option .mdc-list-item__primary-text {
       @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
     }
   }

src/material-experimental/mdc-core/option/optgroup.html

@@ -1,9 +1,9 @@
 <span
   class="mat-mdc-optgroup-label"
   aria-hidden="true"
-  [class.mdc-deprecated-list-item--disabled]="disabled"
+  [class.mdc-list-item--disabled]="disabled"
   [id]="_labelId">
-  <span class="mdc-deprecated-list-item__text">{{ label }} <ng-content></ng-content></span>
+  <span class="mdc-list-item__primary-text">{{ label }} <ng-content></ng-content></span>
 </span>
 
 <ng-content select="mat-option, ng-container"></ng-content>

src/material-experimental/mdc-core/option/optgroup.scss

@@ -1,12 +1,22 @@
-@use '@material/list' as mdc-list;
+@use 'sass:map';
+@use '@material/list/evolution-mixins' as mdc-list-mixins;
+@use '@material/list/evolution-variables' as mdc-list-variables;
 @use '../../mdc-helpers/mdc-helpers';
 
 .mat-mdc-optgroup-label {
-  @include mdc-list.deprecated-item-base_;
-  @include mdc-list.deprecated-list-item-padding-variant(
-    mdc-list.$deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query);
-  @include mdc-list.deprecated-list-item-height-variant(
-    mdc-list.$deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query);
-  @include mdc-list.deprecated-item-disabled-text-opacity(
-    mdc-list.$deprecated-text-disabled-opacity, $query: mdc-helpers.$mat-base-styles-query);
+  @include mdc-list-mixins.item-base;
+  @include mdc-list-mixins.item-spacing(
+    mdc-list-variables.$side-padding, $query: mdc-helpers.$mat-base-styles-query);
+
+  // Set the `min-height` here ourselves, instead of going through
+  // the `mdc-list-one-line-item-density` mixin, because it sets a `height`
+  // which doesn't work well with multi-line options.
+  $height-config: map.get(mdc-list-variables.$one-line-item-density-config, height);
+  min-height: map.get($height-config, default);
+
+  &.mdc-list-item--disabled {
+    // This is the same as `mdc-list-mixins.list-disabled-opacity` which
+    // we can't use directly, because it comes with some selectors.
+    opacity: mdc-list-variables.$content-disabled-opacity;
+  }
 }

src/material-experimental/mdc-core/option/option.html

@@ -1,7 +1,7 @@
 <mat-pseudo-checkbox *ngIf="multiple" class="mat-mdc-option-pseudo-checkbox"
     [state]="selected ? 'checked' : 'unchecked'" [disabled]="disabled"></mat-pseudo-checkbox>
 
-<span class="mdc-deprecated-list-item__text"><ng-content></ng-content></span>
+<span class="mdc-list-item__primary-text"><ng-content></ng-content></span>
 
 <!-- See a11y notes inside optgroup.ts for context behind this element. -->
 <span class="cdk-visually-hidden" *ngIf="group && group._inert">({{ group.label }})</span>

src/material-experimental/mdc-core/option/option.scss

@@ -1,24 +1,23 @@
-@use '@material/list' as mdc-list;
+@use '@material/list/evolution-mixins' as mdc-list-mixins;
+@use '@material/list/evolution-variables' as mdc-list-variables;
 @use 'sass:map';
 @use '../../mdc-helpers/mdc-helpers';
 @use '../../../material/core/style/vendor-prefixes';
 @use '../../../cdk/a11y';
 @use '../../../material/core/style/layout-common';
 
 .mat-mdc-option {
-  // Note that we include this private mixin, because the public
-  // one adds a bunch of styles that we aren't using for the menu.
-  @include mdc-list.deprecated-item-base_;
-  @include mdc-list.deprecated-list-item-padding-variant(
-    mdc-list.$deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query);
-  @include mdc-list.deprecated-item-disabled-text-opacity(
-    mdc-list.$deprecated-text-disabled-opacity, $query: mdc-helpers.$mat-base-styles-query);
+  @include mdc-list-mixins.item-base;
+  @include mdc-list-mixins.item-spacing(
+    mdc-list-variables.$side-padding, $query: mdc-helpers.$mat-base-styles-query);
   @include vendor-prefixes.user-select(none);
+  cursor: pointer;
 
   // Set the `min-height` here ourselves, instead of going through
-  // the `mdc-list-list-item-height-variant` mixin, because it sets a `height`
+  // the `mdc-list-one-line-item-density` mixin, because it sets a `height`
   // which doesn't work well with multi-line options.
-  min-height: map.get(mdc-list.$deprecated-textual-variant-config, single-line-height);
+  $height-config: map.get(mdc-list-variables.$one-line-item-density-config, height);
+  min-height: map.get($height-config, default);
 
   // Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
   // element that will stretch the option to the correct height. See:
@@ -29,27 +28,30 @@
     content: '';
   }
 
-  &:not(.mdc-deprecated-list-item--disabled) {
-    cursor: pointer;
+  &.mdc-list-item--disabled {
+    // This is the same as `mdc-list-mixins.list-disabled-opacity` which
+    // we can't use directly, because it comes with some selectors.
+    opacity: mdc-list-variables.$content-disabled-opacity;
+    cursor: default;
   }
 
   // Note that we bump the padding here, rather than padding inside the
   // group so that ripples still reach to the edges of the panel.
   .mat-mdc-optgroup &:not(.mat-mdc-option-multiple) {
-    padding-left: mdc-list.$deprecated-side-padding * 2;
+    padding-left: mdc-list-variables.$side-padding * 2;
 
     [dir='rtl'] & {
-      padding-left: mdc-list.$deprecated-side-padding;
-      padding-right: mdc-list.$deprecated-side-padding * 2;
+      padding-left: mdc-list-variables.$side-padding;
+      padding-right: mdc-list-variables.$side-padding * 2;
     }
   }
 
   .mat-pseudo-checkbox {
-    margin-right: mdc-list.$deprecated-side-padding;
+    margin-right: mdc-list-variables.$side-padding;
 
     [dir='rtl'] & {
       margin-right: 0;
-      margin-left: mdc-list.$deprecated-side-padding;
+      margin-left: mdc-list-variables.$side-padding;
     }
   }
 

src/material-experimental/mdc-core/option/option.ts

@@ -32,10 +32,10 @@ import {MatOptgroup} from './optgroup';
   host: {
     'role': 'option',
     '[attr.tabindex]': '_getTabIndex()',
-    '[class.mdc-deprecated-list-item--selected]': 'selected',
+    '[class.mdc-list-item--selected]': 'selected',
     '[class.mat-mdc-option-multiple]': 'multiple',
     '[class.mat-mdc-option-active]': 'active',
-    '[class.mdc-deprecated-list-item--disabled]': 'disabled',
+    '[class.mdc-list-item--disabled]': 'disabled',
     '[id]': 'id',
     '[attr.aria-selected]': '_getAriaSelected()',
     '[attr.aria-disabled]': 'disabled.toString()',

src/material-experimental/mdc-core/testing/option-harness.ts

@@ -15,7 +15,7 @@ export class MatOptionHarness extends ComponentHarness {
   static hostSelector = '.mat-mdc-option';
 
   /** Element containing the option's text. */
-  private _text = this.locatorFor('.mdc-deprecated-list-item__text');
+  private _text = this.locatorFor('.mdc-list-item__primary-text');
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a `MatOptionsHarness` that meets
@@ -45,12 +45,12 @@ export class MatOptionHarness extends ComponentHarness {
 
   /** Gets whether the option is disabled. */
   async isDisabled(): Promise<boolean> {
-    return (await this.host()).hasClass('mdc-deprecated-list-item--disabled');
+    return (await this.host()).hasClass('mdc-list-item--disabled');
   }
 
   /** Gets whether the option is selected. */
   async isSelected(): Promise<boolean> {
-    return (await this.host()).hasClass('mdc-deprecated-list-item--selected');
+    return (await this.host()).hasClass('mdc-list-item--selected');
   }
 
   /** Gets whether the option is active. */

src/material-experimental/mdc-menu/_menu-theme.scss

@@ -1,7 +1,7 @@
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/menu-surface' as mdc-menu-surface;
-@use '@material/list' as mdc-list;
+@use '@material/list/evolution-mixins' as mdc-list;
 @use '@material/typography' as mdc-typography;
 @use '@material/ripple' as mdc-ripple;
 @use '../mdc-helpers/mdc-helpers';
@@ -12,7 +12,7 @@
   $config: theming.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
     @include mdc-menu-surface.core-styles(mdc-helpers.$mat-theme-styles-query);
-    @include mdc-list.deprecated-without-ripple(mdc-helpers.$mat-theme-styles-query);
+    @include mdc-list.without-ripple(mdc-helpers.$mat-theme-styles-query);
 
     // MDC doesn't appear to have disabled styling for menu
     // items so we have to grey them out ourselves.
@@ -53,11 +53,11 @@
     .mat-mdc-menu-content {
       // Note that we include this private mixin, because the public
       // one adds a bunch of styles that we aren't using for the menu.
-      @include mdc-list.deprecated-base_(mdc-helpers.$mat-typography-styles-query);
+      @include mdc-list.list-base(mdc-helpers.$mat-typography-styles-query);
 
       // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
       // level.
-      .mat-mdc-menu-item {
+      .mat-mdc-menu-item .mdc-list-item__primary-text {
         @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
       }
     }

src/material-experimental/mdc-menu/menu-item.html

@@ -1,4 +1,5 @@
-<ng-content></ng-content>
+<ng-content select="mat-icon"></ng-content>
+<span class="mdc-list-item__primary-text"><ng-content></ng-content></span>
 <div class="mat-mdc-menu-ripple" matRipple
      [matRippleDisabled]="disableRipple || disabled"
      [matRippleTrigger]="_getHostElement()">

src/material-experimental/mdc-menu/menu.html

@@ -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-deprecated-list">
+    <div class="mat-mdc-menu-content mdc-list">
       <ng-content></ng-content>
     </div>
   </div>