fix(material-experimental/mdc-list): rename mdc-list-* classes (#22157)

Co-authored-by: Angular Material Team <[email protected]>
Co-authored-by: Miles Malerba <[email protected]>

Author: 3 people

package.json

@@ -63,7 +63,7 @@
     "@types/youtube": "^0.0.40",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js-bundle": "^3.8.2",
-    "material-components-web": "11.0.0-canary.3201cae47.0",
+    "material-components-web": "11.0.0-canary.73a227194.0",
     "rxjs": "^6.5.3",
     "rxjs-tslint-rules": "^4.33.1",
     "systemjs": "0.19.43",

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

@@ -17,30 +17,38 @@
       @include mdc-list.deprecated-item-disabled-text-color(
         mdc-list.$deprecated-text-disabled-color, $query: mdc-helpers.$mat-theme-styles-query);
 
-      &:hover:not(.mdc-list-item--disabled),
-      &:focus:not(.mdc-list-item--disabled),
+      &:hover:not(.mdc-deprecated-list-item--disabled),
+      &:focus:not(.mdc-deprecated-list-item--disabled),
       &.mat-mdc-option-active,
 
       // In multiple mode there is a checkbox to show that the option is selected.
-      &.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));
+      &.mdc-deprecated-list-item--selected {
+        &:not(.mat-mdc-option-multiple):not(.mdc-deprecated-list-item--disabled) {
+          $color: mdc-theme-color.$on-surface;
+          background: rgba($color, mdc-ripple.states-opacity($color, hover));
+        }
       }
     }
 
-    .mat-primary .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-      @include mdc-list.deprecated-item-primary-text-ink-color(
-        primary, $query: mdc-helpers.$mat-theme-styles-query);
+    .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-accent .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-      @include mdc-list.deprecated-item-primary-text-ink-color(
-        secondary, $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-warn .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-      @include mdc-list.deprecated-item-primary-text-ink-color(
-        error, $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);
+      }
     }
   }
 }

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

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

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-list-item__text"><ng-content></ng-content></span>
+<span class="mdc-deprecated-list-item__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

@@ -29,7 +29,7 @@
     content: '';
   }
 
-  &:not(.mdc-list-item--disabled) {
+  &:not(.mdc-deprecated-list-item--disabled) {
     cursor: pointer;
   }
 

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

@@ -32,10 +32,10 @@ import {MatOptgroup} from './optgroup';
   host: {
     'role': 'option',
     '[attr.tabindex]': '_getTabIndex()',
-    '[class.mdc-list-item--selected]': 'selected',
+    '[class.mdc-deprecated-list-item--selected]': 'selected',
     '[class.mat-mdc-option-multiple]': 'multiple',
     '[class.mat-mdc-option-active]': 'active',
-    '[class.mdc-list-item--disabled]': 'disabled',
+    '[class.mdc-deprecated-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-list-item__text');
+  private _text = this.locatorFor('.mdc-deprecated-list-item__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-list-item--disabled');
+    return (await this.host()).hasClass('mdc-deprecated-list-item--disabled');
   }
 
   /** Gets whether the option is selected. */
   async isSelected(): Promise<boolean> {
-    return (await this.host()).hasClass('mdc-list-item--selected');
+    return (await this.host()).hasClass('mdc-deprecated-list-item--selected');
   }
 
   /** Gets whether the option is active. */

src/material-experimental/mdc-list/_interactive-list-theme.scss

@@ -15,7 +15,7 @@
       background: if($is-dark-theme, white, black);
     }
 
-    &.mdc-list-item--selected::before {
+    &.mdc-deprecated-list-item--selected::before {
       background: theming.color(map.get($config, primary));
       opacity: map.get($state-opacities, selected);
     }
@@ -27,7 +27,7 @@
 
   // MDC still shows focus/selected state if the option is disabled. Just the hover
   // styles should not show up.
-  .mat-mdc-list-item-interactive:not(.mdc-list-item--disabled) {
+  .mat-mdc-list-item-interactive:not(.mdc-deprecated-list-item--disabled) {
     &:hover::before {
       opacity: map.get($state-opacities, hover);
     }

src/material-experimental/mdc-list/_list-option-theme.scss

@@ -9,11 +9,11 @@
 // default, the MDC list uses the `primary` color for list items. The MDC checkbox
 // inside list options by default uses the `primary` color too.
 @mixin private-list-option-color-override($color) {
-  & .mdc-list-item__meta, & .mdc-list-item__graphic {
+  & .mdc-deprecated-list-item__meta, & .mdc-deprecated-list-item__graphic {
     @include checkbox-theme.private-checkbox-styles-with-color($color);
   }
 
-  &.mdc-list-item--selected {
+  &.mdc-deprecated-list-item--selected {
     @include mdc-list.deprecated-item-primary-text-ink-color($color);
     @include mdc-list.deprecated-item-graphic-ink-color($color);
 
@@ -25,7 +25,7 @@
 
 @mixin private-list-option-density-styles($density-scale) {
   .mat-mdc-list-option {
-    .mdc-list-item__meta, .mdc-list-item__graphic {
+    .mdc-deprecated-list-item__meta, .mdc-deprecated-list-item__graphic {
       .mdc-checkbox {
         @include mdc-checkbox.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
       }
@@ -35,7 +35,7 @@
 
 @mixin private-list-option-typography-styles() {
   .mat-mdc-list-option {
-    .mdc-list-item__meta, .mdc-list-item__graphic {
+    .mdc-deprecated-list-item__meta, .mdc-deprecated-list-item__graphic {
       @include mdc-checkbox.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
     }
   }

src/material-experimental/mdc-list/_list-theme.scss

@@ -40,9 +40,10 @@
   );
 
   // MDC list provides a mixin called `mdc-list-single-line-density`, but we cannot use
-  // that mixin, as the generated generated density styles are scoped to `.mdc-list-item`, while
-  // the styles should actually only affect single-line list items. This has been reported as
-  // a bug in the MDC repository: https://github.com/material-components/material-components-web/issues/5737.
+  // that mixin, as the generated generated density styles are scoped to
+  // `.mdc-deprecated-list-item`, while the styles should actually only affect single-line list
+  // items. This has been reported as a bug in the MDC repository:
+  // https://github.com/material-components/material-components-web/issues/5737.
   .mat-mdc-list-item-single-line {
     @include mdc-list.deprecated-single-line-height($height);
   }