fix(material-experimental/mdc-list): fix secondary line accidentally …

…wrapping text (#23236)

MDC currently supports three-line list items in a way where
they assume that the second list line should wrap into
a third line. This is not suitable for our MDC-based list
because it would result in an incompatibility with the non-MDC
list and as per Material Design spec it is a supported case
to have a third list line that is decoupled from the second line.

The spec describes multiple variants for a three-line list, and
MDC is not off the spec here, but just doesn't support our
three-line list variant yet. It is planned to continue discussion
with the MDC team to push forward on the other three-line variants.

(cherry picked from commit 74d08cf)

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

@@ -69,3 +69,14 @@
 .mat-mdc-list-item.mdc-list-item--with-trailing-meta > .mdc-list-item__end:empty {
   display: none;
 }
+
+// Unset MDC's styles for wrapping secondary text in three-line lists. MDC implements three-line
+// lists in a way where they assume that the second list line should wrap into the third line.
+// This is different to the three-line list variant we want to support. We support a dedicated
+// third line that can be controlled by consumers using a third `matLine` span.
+// https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/_evolution-mixins.scss#L199.
+// TODO: Consider removing once MDC supports the various three-line list variants.
+.mat-mdc-list-item.mdc-list-item--with-three-lines .mdc-list-item__secondary-text {
+  white-space: nowrap;
+  line-height: normal;
+}