From cca8166a0d62932963427d5dbbaa3b8a1ab7b23e Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 9 Jul 2021 07:24:18 +0200 Subject: [PATCH] fix(multiple): incosistent item text truncation when used together with MDC list 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. --- 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 bd66d56e7354..6bbdd19d40d3 100644 --- a/src/material-experimental/mdc-menu/menu.scss +++ b/src/material-experimental/mdc-menu/menu.scss @@ -78,6 +78,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;