diff --git a/src/material/list/list.scss b/src/material/list/list.scss index 61e246175f42..5ed3dccda38b 100644 --- a/src/material/list/list.scss +++ b/src/material/list/list.scss @@ -162,13 +162,28 @@ a.mdc-list-item--activated { } } -.mat-mdc-list-item.mdc-list-item--with-three-lines { - // List item lines or titles never wrap. MDC always enables wrapping for secondary text - // if the list item has acquired three lines. We unset these styles for line elements. - // https://github.com/material-components/material-components-web/blob/348665978ce73694ad4518626dd70cdf5b984113/packages/mdc-list/_evolution-mixins.scss#L205-L206. - // TODO: Consider removing once MDC supports the explicit tertiary line list variant. +// Increased list item height if it has multiple lines so bottom line doesn't get +// cut off. Also added padding-bottom so there's space btw the text and the divider. +.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines, +.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines, +.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines, +.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-three-lines, +.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-three-lines, +.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-three-lines { + height: auto; + padding-bottom: 8px; +} + +.mat-mdc-list-item.mdc-list-item--with-three-lines, +.mat-mdc-list-item.mdc-list-item--with-two-lines { + height: auto; + padding-bottom: 13px; + // List item lines must wrap according to GAR 1.18(b). Removing the nowrap and + // adjusts .mat-mdc-list-item-title.mdc-list-item__primary-text height + // to accommodate any wrapping text. Fixes: b/247881646. + .mat-mdc-list-item-title.mdc-list-item__primary-text, .mat-mdc-list-item-line.mdc-list-item__secondary-text { - white-space: nowrap; + white-space: normal; line-height: normal; } @@ -218,3 +233,4 @@ mat-action-list button { } } } +