fix(material-experimental/mdc-list): don't override focus styles with hover (#23840)

crisbeto · web-flow · commit edc2aa353fab · 2021-11-15T11:28:53.000-08:00
Fixes that the `:hover` styles were overriding the `:focus` and selected effects of the MDC-based `mat-list-option`.
diff --git a/src/material-experimental/mdc-list/_interactive-list-theme.scss b/src/material-experimental/mdc-list/_interactive-list-theme.scss
@@ -26,8 +26,8 @@
 
   // MDC still shows focus/selected state if the item is disabled.
   // Just hover styles should not show up for disabled items.
-  .mat-mdc-list-item-interactive:not(.mdc-list-item--disabled) {
-    &:hover::before {
+  .mat-mdc-list-item-interactive:not(.mdc-list-item--disabled):not(.mdc-list-item--selected) {
+    &:not(:focus):hover::before {
       opacity: mdc-ripple.states-opacity($active-base-color, hover);
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -26,8 +26,8 @@`
`26`	`26`
`27`	`27`	`// MDC still shows focus/selected state if the item is disabled.`
`28`	`28`	`// Just hover styles should not show up for disabled items.`
`29`		`- .mat-mdc-list-item-interactive:not(.mdc-list-item--disabled) {`
`30`		`- &:hover::before {`
	`29`	`+ .mat-mdc-list-item-interactive:not(.mdc-list-item--disabled):not(.mdc-list-item--selected) {`
	`30`	`+ &:not(:focus):hover::before {`
`31`	`31`	`opacity: mdc-ripple.states-opacity($active-base-color, hover);`
`32`	`32`	`}`
`33`	`33`	`}`