From 48739eb0962188a1adbb3ac9bef6b00d44f6c2a8 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 16 Jul 2021 21:19:49 +0200 Subject: [PATCH] fix(multiple): incosistent item text truncation when used together with MDC list (#23138) The MDC option, option group and menu share some styles with the MDC list, but deliberately exclude others in order to allow the text to wrap. The problem is that if an MDC list is seen first on the page, its styles will conflict with the others. These changes add an explicit override to avoid the conflict. (cherry picked from commit 6e1cede6d76ff7e54668d0647b875453fe6c3ded) --- src/material-experimental/mdc-core/option/optgroup.scss | 6 ++++++ src/material-experimental/mdc-core/option/option.scss | 6 ++++++ src/material-experimental/mdc-menu/menu.scss | 6 ++++++ 3 files changed, 18 insertions(+) diff --git a/src/material-experimental/mdc-core/option/optgroup.scss b/src/material-experimental/mdc-core/option/optgroup.scss index 07f06d5d1437..6cbaf4319499 100644 --- a/src/material-experimental/mdc-core/option/optgroup.scss +++ b/src/material-experimental/mdc-core/option/optgroup.scss @@ -19,4 +19,10 @@ // we can't use directly, because it comes with some selectors. opacity: mdc-list-variables.$content-disabled-opacity; } + + // Needs to be overwritten explicitly, because the style can + // leak in from the list and cause the text to truncate. + .mdc-list-item__primary-text { + white-space: normal; + } } diff --git a/src/material-experimental/mdc-core/option/option.scss b/src/material-experimental/mdc-core/option/option.scss index 1bc60642aa46..cedca159fef5 100644 --- a/src/material-experimental/mdc-core/option/option.scss +++ b/src/material-experimental/mdc-core/option/option.scss @@ -65,6 +65,12 @@ // Pointer events can be safely disabled because the ripple trigger element is the host element. pointer-events: none; } + + // Needs to be overwritten explicitly, because the style can + // leak in from the list and cause the text to truncate. + .mdc-list-item__primary-text { + white-space: normal; + } } .mat-mdc-option-active { diff --git a/src/material-experimental/mdc-menu/menu.scss b/src/material-experimental/mdc-menu/menu.scss index be96a23e512b..a38c7822ed74 100644 --- a/src/material-experimental/mdc-menu/menu.scss +++ b/src/material-experimental/mdc-menu/menu.scss @@ -82,6 +82,12 @@ mat-menu { } } + // Needs to be overwritten explicitly, because the style can + // leak in from the list and cause the text to truncate. + .mdc-list-item__primary-text { + white-space: normal; + } + @include a11y.high-contrast(active, off) { $outline-width: 1px;