From ddbfe11e9698f5b252f6eb9d9997a1f88505faa2 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Sun, 25 Apr 2021 15:15:02 +0200
Subject: [PATCH] fix(material-experimental/mdc-list): avoid style conflicts
 with other list-based components

Currently the styles for the MDC-based list are included globally which causes conflicts with other list-based components like `mat-select` and `mat-autocomplete`. This can be seen by going to the MDC list demo and then the MDC select demo, and observing that the option text is now truncated.

These changes resolve the issue by nesting the styles under the `mat-mdc-list-base` class.
---
 .../mdc-list/_list-theme.scss                 |  8 +--
 .../mdc-list/action-list.ts                   |  4 +-
 src/material-experimental/mdc-list/list.scss  | 52 ++++++++++---------
 src/material-experimental/mdc-list/list.ts    |  4 +-
 .../mdc-list/nav-list.ts                      |  4 +-
 .../mdc-list/selection-list.ts                |  4 +-
 6 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/src/material-experimental/mdc-list/_list-theme.scss b/src/material-experimental/mdc-list/_list-theme.scss
index bb5e33b9fb8b..8c18cfae1e86 100644
--- a/src/material-experimental/mdc-list/_list-theme.scss
+++ b/src/material-experimental/mdc-list/_list-theme.scss
@@ -13,9 +13,11 @@
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
 
-  // MDC's state styles are tied in with their ripple. Since we don't use the MDC
-  // ripple, we need to add the hover, focus and selected states manually.
-  @include interactive-list-theme.private-interactive-list-item-state-colors($config);
+  .mat-mdc-list-base {
+    // MDC's state styles are tied in with their ripple. Since we don't use the MDC
+    // ripple, we need to add the hover, focus and selected states manually.
+    @include interactive-list-theme.private-interactive-list-item-state-colors($config);
+  }
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     @include mdc-list.deprecated-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
diff --git a/src/material-experimental/mdc-list/action-list.ts b/src/material-experimental/mdc-list/action-list.ts
index ed7f2df7d925..89c99420fdf5 100644
--- a/src/material-experimental/mdc-list/action-list.ts
+++ b/src/material-experimental/mdc-list/action-list.ts
@@ -12,9 +12,9 @@ import {MatListBase} from './list-base';
 @Component({
   selector: 'mat-action-list',
   exportAs: 'matActionList',
-  template: '<ng-content></ng-content>',
+  template: '<div class="mdc-deprecated-list"><ng-content></ng-content></div>',
   host: {
-    'class': 'mat-mdc-action-list mat-mdc-list-base mdc-deprecated-list',
+    'class': 'mat-mdc-action-list mat-mdc-list-base',
   },
   styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None,
diff --git a/src/material-experimental/mdc-list/list.scss b/src/material-experimental/mdc-list/list.scss
index 116807d9a15c..9f144d0ad643 100644
--- a/src/material-experimental/mdc-list/list.scss
+++ b/src/material-experimental/mdc-list/list.scss
@@ -3,12 +3,32 @@
 @use '../../material/core/style/layout-common';
 @use '../../cdk/a11y';
 
-@include mdc-list.deprecated-without-ripple($query: mdc-helpers.$mat-base-styles-query);
-
 // MDC expects the list element to be a `<ul>`, since we use `<mat-list>` instead we need to
 // explicitly set `display: block`
 .mat-mdc-list-base {
+  // This mixin needs to be nested so that styles don't leak into other
+  // components based on the MDC list (e.g. select, autocomplete).
+  @include mdc-list.deprecated-without-ripple($query: mdc-helpers.$mat-base-styles-query);
   display: block;
+
+  // MDC does have 2-line support, but it's a per-list setting, whereas ours applies to individual
+  // items. Therefore, we need to add our own styles.
+  .mat-mdc-2-line {
+    height: 72px;
+
+    .mdc-deprecated-list-item__text {
+      align-self: flex-start;
+    }
+  }
+
+  // MDC does not support more than 2 lines, so we need to add our own styles.
+  .mat-mdc-3-line {
+    height: 88px;
+
+    .mdc-deprecated-list-item__text {
+      align-self: flex-start;
+    }
+  }
 }
 
 // .mdc-deprecated-list-item__primary-text adds its own margin settings, so only reset if it doesn't
@@ -24,25 +44,6 @@
 }
 
 
-// MDC does have 2-line support, but it's a per-list setting, whereas ours applies to individual
-// items. Therefore, we need to add our own styles.
-.mat-mdc-2-line {
-  height: 72px;
-
-  .mdc-deprecated-list-item__text {
-    align-self: flex-start;
-  }
-}
-
-// MDC does not support more than 2 lines, so we need to add our own styles.
-.mat-mdc-3-line {
-  height: 88px;
-
-  .mdc-deprecated-list-item__text {
-    align-self: flex-start;
-  }
-}
-
 // MDC supports avatars, but it's a per-list setting, whereas ours applies to individual
 // items. Therefore, we need to add our own styles.
 .mat-mdc-list-avatar {
@@ -51,9 +52,12 @@
   $size: 40px;
   $margin-value: 72px - mdc-list.$deprecated-side-padding - $size;
 
-  width: $size;
-  height: $size;
-  border-radius: 50%;
+  // These styles need the extra specificity in order to override the ones from MDC.
+  .mat-mdc-list-base & {
+    width: $size;
+    height: $size;
+    border-radius: 50%;
+  }
 
   // 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
diff --git a/src/material-experimental/mdc-list/list.ts b/src/material-experimental/mdc-list/list.ts
index 1b4900b4c96e..cd6e8e387138 100644
--- a/src/material-experimental/mdc-list/list.ts
+++ b/src/material-experimental/mdc-list/list.ts
@@ -29,9 +29,9 @@ import {MatListBase, MatListItemBase} from './list-base';
 @Component({
   selector: 'mat-list',
   exportAs: 'matList',
-  template: '<ng-content></ng-content>',
+  template: '<div class="mdc-deprecated-list"><ng-content></ng-content></div>',
   host: {
-    'class': 'mat-mdc-list mat-mdc-list-base mdc-deprecated-list',
+    'class': 'mat-mdc-list mat-mdc-list-base',
   },
   styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None,
diff --git a/src/material-experimental/mdc-list/nav-list.ts b/src/material-experimental/mdc-list/nav-list.ts
index dd19533322a9..b990aa8c9114 100644
--- a/src/material-experimental/mdc-list/nav-list.ts
+++ b/src/material-experimental/mdc-list/nav-list.ts
@@ -12,9 +12,9 @@ import {MatListBase} from './list-base';
 @Component({
   selector: 'mat-nav-list',
   exportAs: 'matNavList',
-  template: '<ng-content></ng-content>',
+  template: '<div class="mdc-deprecated-list"><ng-content></ng-content></div>',
   host: {
-    'class': 'mat-mdc-nav-list mat-mdc-list-base mdc-deprecated-list',
+    'class': 'mat-mdc-nav-list mat-mdc-list-base',
   },
   styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None,
diff --git a/src/material-experimental/mdc-list/selection-list.ts b/src/material-experimental/mdc-list/selection-list.ts
index bd2e55d32fba..4f9c07a85253 100644
--- a/src/material-experimental/mdc-list/selection-list.ts
+++ b/src/material-experimental/mdc-list/selection-list.ts
@@ -60,11 +60,11 @@ export class MatSelectionListChange {
   selector: 'mat-selection-list',
   exportAs: 'matSelectionList',
   host: {
-    'class': 'mat-mdc-selection-list mat-mdc-list-base mdc-deprecated-list',
+    'class': 'mat-mdc-selection-list mat-mdc-list-base',
     'role': 'listbox',
     '[attr.aria-multiselectable]': 'multiple',
   },
-  template: '<ng-content></ng-content>',
+  template: '<div class="mdc-deprecated-list"><ng-content></ng-content></div>',
   styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None,
   providers: [