Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(material-experimental/mdc-core): make mat-option typography easier to override #24247

Merged
merged 1 commit into from
Jan 21, 2022
Merged

fix(material-experimental/mdc-core): make mat-option typography easier to override #24247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/material-experimental/mdc-core/option/_option-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
Expand Down
13 changes: 12 additions & 1 deletion src/material-experimental/mdc-core/option/option.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down