Skip to content

Commit 6a6a953

Browse files
devversionmmalerba
authored andcommitted
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)
1 parent 9416832 commit 6a6a953

File tree

1 file changed

+11
-0
lines changed

1 file changed

+11
-0
lines changed

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,3 +69,14 @@
6969
.mat-mdc-list-item.mdc-list-item--with-trailing-meta > .mdc-list-item__end:empty {
7070
display: none;
7171
}
72+
73+
// Unset MDC's styles for wrapping secondary text in three-line lists. MDC implements three-line
74+
// lists in a way where they assume that the second list line should wrap into the third line.
75+
// This is different to the three-line list variant we want to support. We support a dedicated
76+
// third line that can be controlled by consumers using a third `matLine` span.
77+
// https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/_evolution-mixins.scss#L199.
78+
// TODO: Consider removing once MDC supports the various three-line list variants.
79+
.mat-mdc-list-item.mdc-list-item--with-three-lines .mdc-list-item__secondary-text {
80+
white-space: nowrap;
81+
line-height: normal;
82+
}

0 commit comments

Comments
 (0)