From 78a66d2a48efd99f96cf9583849529bd539bd297 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Fri, 10 May 2024 23:38:02 +0000 Subject: [PATCH 1/7] fix(material/list): list item truncates on narrow screen widths Fixes issue with Angular Components List component where the list item truncates on narrow screen widths (ie. mobile screens). Removes white-space wrap style and adds some height to primary lines for readability. Fixes b/291296866 --- src/material/list/list.scss | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/material/list/list.scss b/src/material/list/list.scss index 61e246175f42..9d9f59fbac9e 100644 --- a/src/material/list/list.scss +++ b/src/material/list/list.scss @@ -162,15 +162,24 @@ 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. +.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines +.mdc-list-item__primary-text::before { + height: 25px; +} + +.mat-mdc-list-item.mdc-list-item--with-three-lines, +.mat-mdc-list-item.mdc-list-item--with-two-lines { + // 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; } + .mat-mdc-list-item-title.mdc-list-item__primary-text { + height: 45px; + } // Unscoped content can wrap if the list item has acquired three lines. MDC implements // this functionality for secondary text but there is no proper text ellipsis when @@ -218,3 +227,4 @@ mat-action-list button { } } } + From 2bbf92b855547717df0a91e310711ad1a2fd8cec Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Tue, 14 May 2024 21:27:32 +0000 Subject: [PATCH 2/7] fix(material/list): list item truncates on narrow screenwidths Updates Angular Components List item component height if the list item has 3 lines. With the previous list item height of 88px the bottom lines letters like 'g' get cut off and less readable. Fixes b/247881646 --- src/material/list/list.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/material/list/list.scss b/src/material/list/list.scss index 9d9f59fbac9e..444f3baee3be 100644 --- a/src/material/list/list.scss +++ b/src/material/list/list.scss @@ -167,6 +167,12 @@ a.mdc-list-item--activated { height: 25px; } +// Increased list item height if it has multiple lines so bottom line doesn't get +// cut off. +.mat-mdc-list-item.mdc-list-item--with-three-lines { + min-height: 90px; +} + .mat-mdc-list-item.mdc-list-item--with-three-lines, .mat-mdc-list-item.mdc-list-item--with-two-lines { // List item lines must wrap according to GAR 1.18(b). Removing the nowrap and @@ -177,9 +183,6 @@ a.mdc-list-item--activated { white-space: normal; line-height: normal; } - .mat-mdc-list-item-title.mdc-list-item__primary-text { - height: 45px; - } // Unscoped content can wrap if the list item has acquired three lines. MDC implements // this functionality for secondary text but there is no proper text ellipsis when From 2580d7c43a69f3a3a7f8ec628569bf84edcbc7f7 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Wed, 15 May 2024 21:51:45 +0000 Subject: [PATCH 3/7] fix(material/list): list truncates on narrow width screens Fixes Angular Components List item component with and without a leading avatar if it is has multiple lines for the height to auto adjust based on the content. Added padding-bottom for list items with a leading icon/avatar/checkbox to improve readability. Fixes b/291296866 --- src/material/list/list.scss | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/material/list/list.scss b/src/material/list/list.scss index 444f3baee3be..e518e5e898ab 100644 --- a/src/material/list/list.scss +++ b/src/material/list/list.scss @@ -168,13 +168,20 @@ a.mdc-list-item--activated { } // Increased list item height if it has multiple lines so bottom line doesn't get -// cut off. -.mat-mdc-list-item.mdc-list-item--with-three-lines { - min-height: 90px; +// 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; // 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. From 489edaee2bc75f53cd6cfcf7885dc95882c37111 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Thu, 16 May 2024 17:20:31 +0000 Subject: [PATCH 4/7] fix(material/list): list truncates on narrow width screens Fixes bottom padding beneath Antular Components List item with leading avatar to provide a similar space as exists above the list item. Fixes b/291296866 --- src/material/list/list.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/material/list/list.scss b/src/material/list/list.scss index e518e5e898ab..5ee5b59e8886 100644 --- a/src/material/list/list.scss +++ b/src/material/list/list.scss @@ -176,7 +176,7 @@ a.mdc-list-item--activated { .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; + padding-bottom: 12px; } .mat-mdc-list-item.mdc-list-item--with-three-lines, From 9d336a84963772b356b7f6f476c9e09b46f2c262 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Fri, 7 Jun 2024 18:30:18 +0000 Subject: [PATCH 5/7] fix(material/list): list item truncates on narrow screen widths Updates fix for Angular Components List component where the list item truncates on narrow screen widths (ie. mobile screens). Updates the padding to be more cohesive with previous styling. Fixes b/291296866 --- src/material/list/list.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/material/list/list.scss b/src/material/list/list.scss index 5ee5b59e8886..cf12baf2e88e 100644 --- a/src/material/list/list.scss +++ b/src/material/list/list.scss @@ -162,11 +162,6 @@ a.mdc-list-item--activated { } } -.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines -.mdc-list-item__primary-text::before { - height: 25px; -} - // 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, @@ -176,12 +171,13 @@ a.mdc-list-item--activated { .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: 12px; + padding-bottom: 16px; } .mat-mdc-list-item.mdc-list-item--with-three-lines, .mat-mdc-list-item.mdc-list-item--with-two-lines { height: auto; + padding: 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. From 22d566d1abb710730b8b1c3fca91488473037eba Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Fri, 7 Jun 2024 19:06:50 +0000 Subject: [PATCH 6/7] refactor(material/list): list item truncates on narrow screen widths Updates the padding for the previous fix to Angular Components List component for the list item truncating on narrow screen widths. Fixes b/291296866 --- src/material/list/list.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/material/list/list.scss b/src/material/list/list.scss index cf12baf2e88e..8cfa914a52a9 100644 --- a/src/material/list/list.scss +++ b/src/material/list/list.scss @@ -177,7 +177,7 @@ a.mdc-list-item--activated { .mat-mdc-list-item.mdc-list-item--with-three-lines, .mat-mdc-list-item.mdc-list-item--with-two-lines { height: auto; - padding: 13px; + 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. From 369bb8c84a9d3df265a07b3b60c5448a706811e8 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Fri, 7 Jun 2024 19:18:18 +0000 Subject: [PATCH 7/7] refactor(material/list): list item truncates on narrow screen widths Updates the previous Angular Components List component fix to more closely align with previous screenshots and avoid additional screenshot test failures. Fixes b/291296866 --- src/material/list/list.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/material/list/list.scss b/src/material/list/list.scss index 8cfa914a52a9..5ed3dccda38b 100644 --- a/src/material/list/list.scss +++ b/src/material/list/list.scss @@ -171,7 +171,7 @@ a.mdc-list-item--activated { .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: 16px; + padding-bottom: 8px; } .mat-mdc-list-item.mdc-list-item--with-three-lines,