From a71fffabf5f485eaa09292fc91a4bb8a9fd86644 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Thu, 29 Jun 2023 07:13:30 +0200
Subject: [PATCH] fix(material/menu): prevent menu styles from leaking to other
 components

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.
---
 src/material/menu/_menu-theme.scss      | 5 ++++-
 src/material/menu/menu-trigger.ts       | 9 ++++++++-
 tools/public_api_guard/material/menu.md | 4 ++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/material/menu/_menu-theme.scss b/src/material/menu/_menu-theme.scss
index 0ee4331e0e1a..3b993b2c7d4c 100644
--- a/src/material/menu/_menu-theme.scss
+++ b/src/material/menu/_menu-theme.scss
@@ -13,7 +13,10 @@
   $config: theming.get-color-config($config-or-theme);
   @include mdc-helpers.using-mdc-theme($config) {
     @include mdc-menu-surface.core-styles(mdc-helpers.$mdc-theme-styles-query);
-    @include mdc-list.without-ripple(mdc-helpers.$mdc-theme-styles-query);
+
+    .mat-mdc-menu-panel-wrapper {
+      @include mdc-list.without-ripple(mdc-helpers.$mdc-theme-styles-query);
+    }
 
     // MDC doesn't appear to have disabled styling for menu
     // items so we have to grey them out ourselves.
diff --git a/src/material/menu/menu-trigger.ts b/src/material/menu/menu-trigger.ts
index 3eb78521c49b..52b5693610ca 100644
--- a/src/material/menu/menu-trigger.ts
+++ b/src/material/menu/menu-trigger.ts
@@ -96,6 +96,7 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
   private _menuCloseSubscription = Subscription.EMPTY;
   private _scrollStrategy: () => ScrollStrategy;
   private _changeDetectorRef = inject(ChangeDetectorRef);
+  protected _panelClass: string | null;
 
   /**
    * We're specifically looking for a `MatMenu` here since the generic `MatMenuPanel`
@@ -329,6 +330,10 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
     this._closingActionsSubscription = this._menuClosingActions().subscribe(() => this.closeMenu());
     this._initMenu(menu);
 
+    if (this._panelClass) {
+      overlayRef.overlayElement.classList.add(this._panelClass);
+    }
+
     if (menu instanceof _MatMenuBase) {
       menu._startAnimation();
       menu._directDescendantItems.changes.pipe(takeUntil(menu.close)).subscribe(() => {
@@ -686,4 +691,6 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
   },
   exportAs: 'matMenuTrigger',
 })
-export class MatMenuTrigger extends _MatMenuTriggerBase {}
+export class MatMenuTrigger extends _MatMenuTriggerBase {
+  protected override _panelClass = 'mat-mdc-menu-panel-wrapper';
+}
diff --git a/tools/public_api_guard/material/menu.md b/tools/public_api_guard/material/menu.md
index 9c0b5bdbf9b3..b065ef284cd1 100644
--- a/tools/public_api_guard/material/menu.md
+++ b/tools/public_api_guard/material/menu.md
@@ -274,6 +274,8 @@ export interface MatMenuPanel<T = any> {
 
 // @public
 export class MatMenuTrigger extends _MatMenuTriggerBase {
+    // (undocumented)
+    protected _panelClass: string;
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatMenuTrigger, "[mat-menu-trigger-for], [matMenuTriggerFor]", ["matMenuTrigger"], {}, {}, never, never, false, never>;
     // (undocumented)
@@ -313,6 +315,8 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
     // (undocumented)
     _openedBy: Exclude<FocusOrigin, 'program' | null> | undefined;
     openMenu(): void;
+    // (undocumented)
+    protected _panelClass: string | null;
     restoreFocus: boolean;
     toggleMenu(): void;
     triggersSubmenu(): boolean;