fix(multiple): incosistent item text truncation when used together wi…

…th 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 6e1cede)

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;
+  }
 }

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 {

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;