From 1d49065b7f954899a34f1864613e6b5ba9d8db80 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 21 Jan 2022 17:44:36 +0100 Subject: [PATCH] fix(material-experimental/mdc-core): make mat-option typography easier to override (#24247) Related to internal b/215585751. Currently the typography styles for an option are set on `.mdc-list-item__primary-text` which is going to break existing overrides and may violate some linter checks. These changes restore the old behavior. (cherry picked from commit 09013d5a0838fc1be393ebe2ee6ab92e4e754f4a) --- .../mdc-core/option/_option-theme.scss | 6 +++--- .../mdc-core/option/option.scss | 13 ++++++++++++- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/material-experimental/mdc-core/option/_option-theme.scss b/src/material-experimental/mdc-core/option/_option-theme.scss index 93ca9f354e73..a178ba4e16cd 100644 --- a/src/material-experimental/mdc-core/option/_option-theme.scss +++ b/src/material-experimental/mdc-core/option/_option-theme.scss @@ -55,9 +55,9 @@ theming.get-typography-config($config-or-theme)); @include mdc-helpers.mat-using-mdc-typography($config) { - // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct - // level. Class is repeated for increased specificity. - .mat-mdc-option .mdc-list-item__primary-text { + // MDC uses the `subtitle1` level for list items, but + // the spec shows `body1` as the correct level. + .mat-mdc-option { @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query); } } diff --git a/src/material-experimental/mdc-core/option/option.scss b/src/material-experimental/mdc-core/option/option.scss index cedca159fef5..3c7fe08a9478 100644 --- a/src/material-experimental/mdc-core/option/option.scss +++ b/src/material-experimental/mdc-core/option/option.scss @@ -66,10 +66,21 @@ pointer-events: none; } - // Needs to be overwritten explicitly, because the style can + // 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; + + // MDC assigns the typography to this element, rather than the option itself, which will break + // existing overrides. Set all of the typography-related properties to `inherit` so that any + // styles set on the host can propagate down. + font-size: inherit; + font-weight: inherit; + letter-spacing: inherit; + line-height: inherit; + font-family: inherit; + text-decoration: inherit; + text-transform: inherit; } }