From 6fd50349cd9d060976868b5790b50f79068e27bb Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Wed, 2 Sep 2020 15:01:49 +0200
Subject: [PATCH] refactor(material/list): fix action list CSS styles conflict
 with MDC-based list

The Angular Material action list has been styled using an element selector,
instead of using the corresponding CSS class. This meant that the MDC-based
list seemed to have a working action list, but in reality it was just working due
to the leaked styles from the non-MDC list.

This fixes the selector in the Angular Material list, and adds the necessary styles
for the action list to the MDC list styles.
---
 src/material-experimental/mdc-list/list.scss | 22 ++++++++++++++++++++
 src/material/list/list.scss                  |  4 +++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/material-experimental/mdc-list/list.scss b/src/material-experimental/mdc-list/list.scss
index e51c7f214739..d8e1b8c977de 100644
--- a/src/material-experimental/mdc-list/list.scss
+++ b/src/material-experimental/mdc-list/list.scss
@@ -10,6 +10,28 @@
   display: block;
 }
 
+// Remove the browser button appearance for action list button items. These
+// buttons should appear as if they were standard Material Design list items.
+.mat-mdc-action-list button.mdc-list-item {
+  background: none;
+  color: inherit;
+  border: none;
+  font: inherit;
+  outline: inherit;
+  -webkit-tap-highlight-color: transparent;
+  // Set the text alignment to "start" as buttons align their content
+  // centered by default. List content is aligned on the start.
+  text-align: left;
+
+  [dir='rtl'] & {
+    text-align: right;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+}
+
 // MDC expects that the list items are always `<li>`, since we actually use `<button>` in some
 // cases, we need to make sure it expands to fill the available width.
 .mat-mdc-list-item,
diff --git a/src/material/list/list.scss b/src/material/list/list.scss
index 05a5e83733f8..036983910040 100644
--- a/src/material/list/list.scss
+++ b/src/material/list/list.scss
@@ -268,7 +268,7 @@ $item-inset-divider-offset: 72px;
   }
 }
 
-mat-action-list {
+.mat-action-list {
   // Remove the native button look and make it look like a list item
   button {
     background: none;
@@ -277,6 +277,8 @@ mat-action-list {
     font: inherit;
     outline: inherit;
     -webkit-tap-highlight-color: transparent;
+    // Set the text alignment to "start" as buttons align their content
+    // centered by default. List content is aligned on the start.
     text-align: left;
 
     [dir='rtl'] & {