Skip to content

fix(material-experimental/mdc-menu): increase specificity of menu pan… #23178

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

Merged
merged 1 commit into from
Jul 20, 2021
Merged

fix(material-experimental/mdc-menu): increase specificity of menu pan… #23178

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
12 changes: 8 additions & 4 deletions src/material-experimental/mdc-menu/menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,21 @@ mat-menu {
}

.mat-mdc-menu-panel {
@include a11y.high-contrast(active, off) {
outline: solid 1px;
}
}

// We need to increase the specificity for these styles to ensure we are not overriden by MDC's
// .mdc-menu-surface styles. This can happen if the MDC styles are loaded in after our styles.
.mat-mdc-menu-panel.mat-mdc-menu-panel {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In what case would MDC's menu styles come in after ours? We should have control over the load order in this case.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have already run into a case internally where this happens, but I'm not sure how they managed to cause it

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it conflicting with our styles or MDC's? It might be the same issue I was trying to solve with #22562. I think this is fine for now, but we should just understand why it's happening.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not certain, but if that were the case I should be able to reproduce the issue on our devapp, but I cannot

For context, the app which was able to hit this edge case had a lot of duplicate css (I counted 12 <styles> divs with MDC's menu styles and 6 with our styles). I assumed it was something with the way they were importing styles

// Include Material's base menu panel styling which contain the `min-width`, `max-width` and some
// styling to make scrolling smoother. MDC doesn't include the `min-width` and `max-width`, even
// though they're explicitly defined in spec.
@include menu-common.base;

// The CDK positioning uses flexbox to anchor the element, whereas MDC uses `position: absolute`.
position: static;

@include a11y.high-contrast(active, off) {
outline: solid 1px;
}
}

.mat-mdc-menu-item {
Expand Down