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

Co-authored-by: Angular Material Team <material@angular.io> Co-authored-by: Miles Malerba <mmalerba@google.com>
angular · Mar 12, 2021 · 5524942 · 5524942
1 parent 4381b8e
commit 5524942
Show file tree

Hide file tree

Showing 27 changed files with 823 additions and 172 deletions.
diff --git a/package.json b/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",

diff --git a/src/material-experimental/mdc-core/option/_option-theme.scss b/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);
+      }
     }
   }
 }

diff --git a/src/material-experimental/mdc-core/option/optgroup.html b/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>
diff --git a/src/material-experimental/mdc-core/option/option.html b/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>

diff --git a/src/material-experimental/mdc-core/option/option.scss b/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;
   }
 

diff --git a/src/material-experimental/mdc-core/option/option.ts b/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()',

diff --git a/src/material-experimental/mdc-core/testing/option-harness.ts b/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. */

diff --git a/src/material-experimental/mdc-list/_interactive-list-theme.scss b/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);
     }

diff --git a/src/material-experimental/mdc-list/_list-option-theme.scss b/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);
     }
   }

diff --git a/src/material-experimental/mdc-list/_list-theme.scss b/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);
   }

diff --git a/src/material-experimental/mdc-list/action-list.ts b/src/material-experimental/mdc-list/action-list.ts
@@ -14,7 +14,7 @@ import {MatListBase} from './list-base';
   exportAs: 'matActionList',
   template: '<ng-content></ng-content>',
   host: {
-    'class': 'mat-mdc-action-list mat-mdc-list-base mdc-list',
+    'class': 'mat-mdc-action-list mat-mdc-list-base mdc-deprecated-list',
   },
   styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None,

diff --git a/src/material-experimental/mdc-list/list-base.ts b/src/material-experimental/mdc-list/list-base.ts
@@ -64,6 +64,7 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
   private _disableRipple: boolean = false;
 
   /** Whether the list-item is disabled. */
+  @HostBinding('class.mdc-deprecated-list-item--disabled')
   @HostBinding('class.mdc-list-item--disabled')
   @HostBinding('attr.aria-disabled')
   @Input()
@@ -145,8 +146,9 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
             toggleClass(this._hostElement, 'mat-mdc-list-item-single-line', lines.length <= 1);
             lines.forEach((line: ElementRef<Element>, index: number) => {
               toggleClass(line.nativeElement,
-                  'mdc-list-item__primary-text', index === 0 && lines.length > 1);
-              toggleClass(line.nativeElement, 'mdc-list-item__secondary-text', index !== 0);
+                  'mdc-deprecated-list-item__primary-text', index === 0 && lines.length > 1);
+              toggleClass(
+                  line.nativeElement, 'mdc-deprecated-list-item__secondary-text', index !== 0);
             });
             setLines(lines, this._elementRef, 'mat-mdc');
           }));

diff --git a/src/material-experimental/mdc-list/list-item.html b/src/material-experimental/mdc-list/list-item.html
@@ -2,15 +2,15 @@
 
 <!-- If lines were explicitly given, use those as the text. -->
 <ng-container *ngIf="lines.length">
-  <span class="mdc-list-item__text"><ng-content select="[mat-line],[matLine]"></ng-content></span>
+  <span class="mdc-deprecated-list-item__text"><ng-content select="[mat-line],[matLine]"></ng-content></span>
 </ng-container>
 
 <!--
   If lines were not explicitly given, assume the remaining content is the text, otherwise assume it
   is an action that belongs in the "meta" section.
 -->
-<span [class.mdc-list-item__text]="!lines.length"
-      [class.mdc-list-item__meta]="lines.length" #text>
+<span [class.mdc-deprecated-list-item__text]="!lines.length"
+      [class.mdc-deprecated-list-item__meta]="lines.length" #text>
   <ng-content></ng-content>
 </span>
 

diff --git a/src/material-experimental/mdc-list/list-option.html b/src/material-experimental/mdc-list/list-option.html
@@ -25,7 +25,7 @@
 </ng-template>
 
 <!-- Container for the checkbox at start. -->
-<span class="mdc-list-item__graphic mat-mdc-list-option-checkbox-before"
+<span class="mdc-deprecated-list-item__graphic mat-mdc-list-option-checkbox-before"
       *ngIf="_shouldShowCheckboxAt('before')">
   <ng-template [ngTemplateOutlet]="checkbox"></ng-template>
 </span>
@@ -35,12 +35,12 @@
 </ng-template>
 
 <!-- Text -->
-<span class="mdc-list-item__text" #text>
+<span class="mdc-deprecated-list-item__text" #text>
   <ng-content></ng-content>
 </span>
 
 <!-- Container for the checkbox at the end. -->
-<span class="mdc-list-item__meta" *ngIf="_shouldShowCheckboxAt('after')">
+<span class="mdc-deprecated-list-item__meta" *ngIf="_shouldShowCheckboxAt('after')">
   <ng-template [ngTemplateOutlet]="checkbox"></ng-template>
 </span>
 <!-- Conditionally renders icons/avatars after the list item text. -->

diff --git a/src/material-experimental/mdc-list/list-option.ts b/src/material-experimental/mdc-list/list-option.ts
@@ -62,11 +62,11 @@ export interface SelectionList extends MatListBase {
   exportAs: 'matListOption',
   styleUrls: ['list-option.css'],
   host: {
-    'class': 'mat-mdc-list-item mat-mdc-list-option mdc-list-item',
+    'class': 'mat-mdc-list-item mat-mdc-list-option mdc-deprecated-list-item',
     'role': 'option',
     // As per MDC, only list items in single selection mode should receive the `--selected`
     // class. For multi selection, the checkbox is used as indicator.
-    '[class.mdc-list-item--selected]': 'selected && !_selectionList.multiple',
+    '[class.mdc-deprecated-list-item--selected]': 'selected && !_selectionList.multiple',
     '[class.mat-mdc-list-item-with-avatar]': '_hasIconOrAvatar()',
     '[class.mat-accent]': 'color !== "primary" && color !== "warn"',
     '[class.mat-warn]': 'color === "warn"',

diff --git a/src/material-experimental/mdc-list/list-styling.ts b/src/material-experimental/mdc-list/list-styling.ts
@@ -10,17 +10,17 @@ import {Directive, Inject, Optional} from '@angular/core';
 import {LIST_OPTION, ListOption} from './list-option-types';
 
 /**
- * MDC uses the very intuitively named classes `.mdc-list-item__graphic` and `.mat-list-item__meta`
- * to position content such as icons or checkboxes that comes either before or after the text
- * content respectively. This directive detects the placement of the checkbox and applies the
- * correct MDC class to position the icon/avatar on the opposite side.
+ * MDC uses the very intuitively named classes `.mdc-deprecated-list-item__graphic` and
+ * `.mat-list-item__meta` to position content such as icons or checkboxes that comes either before
+ * or after the text content respectively. This directive detects the placement of the checkbox and
+ * applies the correct MDC class to position the icon/avatar on the opposite side.
  * @docs-private
  */
 @Directive({
   selector: '[mat-list-avatar], [matListAvatar], [mat-list-icon], [matListIcon]',
   host: {
-    '[class.mdc-list-item__graphic]': '_isAlignedAtStart()',
-    '[class.mdc-list-item__meta]': '!_isAlignedAtStart()',
+    '[class.mdc-deprecated-list-item__graphic]': '_isAlignedAtStart()',
+    '[class.mdc-deprecated-list-item__meta]': '!_isAlignedAtStart()',
   }
 })
 export class MatListGraphicAlignmentStyler {
@@ -62,6 +62,6 @@ export class MatListIconCssMatStyler {}
   selector: '[mat-subheader], [matSubheader]',
   // TODO(mmalerba): MDC's subheader font looks identical to the list item font, figure out why and
   //  make a change in one of the repos to visually distinguish.
-  host: {'class': 'mat-mdc-subheader mdc-list-group__subheader'}
+  host: {'class': 'mat-mdc-subheader mdc-deprecated-list-group__subheader'}
 })
 export class MatListSubheaderCssMatStyler {}
diff --git a/src/material-experimental/mdc-list/list.scss b/src/material-experimental/mdc-list/list.scss
@@ -10,14 +10,14 @@
   display: block;
 }
 
-// .mdc-list-item__primary-text adds its own margin settings, so only reset if it doesn't have that
-// class
-.mat-mdc-list-base .mdc-list-item__text > :not(.mdc-list-item__primary-text),
-.mat-mdc-list-base .mdc-list-item__text > :not(.mdc-list-item__primary-text) {
+// .mdc-deprecated-list-item__primary-text adds its own margin settings, so only reset if it doesn't
+// have that class
+.mat-mdc-list-base .mdc-deprecated-list-item__text > :not(.mdc-deprecated-list-item__primary-text),
+.mat-mdc-list-base .mdc-deprecated-list-item__text > :not(.mdc-deprecated-list-item__primary-text) {
   margin: 0;
 
   // Fixes the gap between the 2nd & 3rd lines.
-  &.mdc-list-item__secondary-text {
+  &.mdc-deprecated-list-item__secondary-text {
     margin-top: -3px;
   }
 }
@@ -28,7 +28,7 @@
 .mat-mdc-2-line {
   height: 72px;
 
-  .mdc-list-item__text {
+  .mdc-deprecated-list-item__text {
     align-self: flex-start;
   }
 }
@@ -37,7 +37,7 @@
 .mat-mdc-3-line {
   height: 88px;
 
-  .mdc-list-item__text {
+  .mdc-deprecated-list-item__text {
     align-self: flex-start;
   }
 }
@@ -54,11 +54,11 @@
   height: $size;
   border-radius: 50%;
 
-  // Avatars that come before the text have the .mdc-list-item__graphic class.
-  // MDC's .mdc-list--avatar-list class would normally apply overrides to set the appropriate
-  // margins for avatar images, but since ours is a per-list-item setting we need to add similar
-  // styles ourselves.
-  &.mdc-list-item__graphic {
+  // Avatars that come before the text have the .mdc-deprecated-list-item__graphic class.
+  // MDC's .mdc-deprecated-list--avatar-list class would normally apply overrides to set the
+  // appropriate margins for avatar images, but since ours is a per-list-item setting we need to add
+  // similar styles ourselves.
+  &.mdc-deprecated-list-item__graphic {
     margin-left: 0;
     margin-right: $margin-value;
 
@@ -113,7 +113,7 @@
 
 // MDC always sets the cursor to `pointer`. We do not want to show this for non-interactive
 // lists. See: https://github.com/material-components/material-components-web/issues/6443
-.mat-mdc-list-non-interactive .mdc-list-item {
+.mat-mdc-list-non-interactive .mdc-deprecated-list-item {
   cursor: default;
 }