Skip to content

Commit 06f8544

Browse files
authored
fix(material/menu): prevent menu styles from leaking to other components (#27378)
The menu theme was including the MDC list styles directly at the root of the theme which caused to leak into other components like `mat-list`. The mixins will be removed in #27377, however currently the screenshot tests of a lot of internal targets assume that the leaky styles will be there which breaks the presubmit of #27377. These changes introduce a *temporary* wrapper class around the mixins so that the incorrect screenshots can be approved before trying to land #27377.
1 parent 7ad7de6 commit 06f8544

File tree

3 files changed

+16
-2
lines changed

3 files changed

+16
-2
lines changed

src/material/menu/_menu-theme.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@
1313
$config: theming.get-color-config($config-or-theme);
1414
@include mdc-helpers.using-mdc-theme($config) {
1515
@include mdc-menu-surface.core-styles(mdc-helpers.$mdc-theme-styles-query);
16-
@include mdc-list.without-ripple(mdc-helpers.$mdc-theme-styles-query);
16+
17+
.mat-mdc-menu-panel-wrapper {
18+
@include mdc-list.without-ripple(mdc-helpers.$mdc-theme-styles-query);
19+
}
1720

1821
// MDC doesn't appear to have disabled styling for menu
1922
// items so we have to grey them out ourselves.

src/material/menu/menu-trigger.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
9696
private _menuCloseSubscription = Subscription.EMPTY;
9797
private _scrollStrategy: () => ScrollStrategy;
9898
private _changeDetectorRef = inject(ChangeDetectorRef);
99+
protected _panelClass: string | null;
99100

100101
/**
101102
* We're specifically looking for a `MatMenu` here since the generic `MatMenuPanel`
@@ -329,6 +330,10 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
329330
this._closingActionsSubscription = this._menuClosingActions().subscribe(() => this.closeMenu());
330331
this._initMenu(menu);
331332

333+
if (this._panelClass) {
334+
overlayRef.overlayElement.classList.add(this._panelClass);
335+
}
336+
332337
if (menu instanceof _MatMenuBase) {
333338
menu._startAnimation();
334339
menu._directDescendantItems.changes.pipe(takeUntil(menu.close)).subscribe(() => {
@@ -686,4 +691,6 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
686691
},
687692
exportAs: 'matMenuTrigger',
688693
})
689-
export class MatMenuTrigger extends _MatMenuTriggerBase {}
694+
export class MatMenuTrigger extends _MatMenuTriggerBase {
695+
protected override _panelClass = 'mat-mdc-menu-panel-wrapper';
696+
}

tools/public_api_guard/material/menu.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -274,6 +274,8 @@ export interface MatMenuPanel<T = any> {
274274

275275
// @public
276276
export class MatMenuTrigger extends _MatMenuTriggerBase {
277+
// (undocumented)
278+
protected _panelClass: string;
277279
// (undocumented)
278280
static ɵdir: i0.ɵɵDirectiveDeclaration<MatMenuTrigger, "[mat-menu-trigger-for], [matMenuTriggerFor]", ["matMenuTrigger"], {}, {}, never, never, false, never>;
279281
// (undocumented)
@@ -313,6 +315,8 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
313315
// (undocumented)
314316
_openedBy: Exclude<FocusOrigin, 'program' | null> | undefined;
315317
openMenu(): void;
318+
// (undocumented)
319+
protected _panelClass: string | null;
316320
restoreFocus: boolean;
317321
toggleMenu(): void;
318322
triggersSubmenu(): boolean;

0 commit comments

Comments
 (0)