From 877e184b293686fb50f64693ac60633388fe0ef6 Mon Sep 17 00:00:00 2001
From: Subhajit Ghosh <99127578+subhajit20@users.noreply.github.com>
Date: Tue, 29 Aug 2023 08:01:19 +0530
Subject: [PATCH] Added deprecatation comment to menu.js file and Add
 deprecation notice to storybook (#20622)

---
 ui/components/ui/menu/menu.js         |  9 ++++++
 ui/components/ui/menu/menu.stories.js | 44 +++++++++++++++++++--------
 2 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/ui/components/ui/menu/menu.js b/ui/components/ui/menu/menu.js
index 029c713c8..148239eb7 100644
--- a/ui/components/ui/menu/menu.js
+++ b/ui/components/ui/menu/menu.js
@@ -4,6 +4,15 @@ import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 import classnames from 'classnames';
 
+/**
+ * @deprecated The `<Menu />` component has been deprecated in favor of the new `<Popover>` component from the component-library.
+ * Please update your code to use the new `<Popover>` component instead, which can be found at ui/components/component-library/popover/popover.tsx.
+ * You can find documentation for the new `Popover` component in the MetaMask Storybook:
+ * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-popover--docs}
+ * If you would like to help with the replacement of the old `Menu` component, please submit a pull request against this GitHub issue:
+ * {@link https://github.com/MetaMask/metamask-extension/issues/20498}
+ */
+
 const Menu = ({
   anchorElement,
   children,
diff --git a/ui/components/ui/menu/menu.stories.js b/ui/components/ui/menu/menu.stories.js
index 7842da277..8065c6626 100644
--- a/ui/components/ui/menu/menu.stories.js
+++ b/ui/components/ui/menu/menu.stories.js
@@ -1,23 +1,43 @@
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { IconName } from '../../component-library';
+import PropTypes from 'prop-types';
+import { IconName, BannerAlert } from '../../component-library';
+import { Severity } from '../../../helpers/constants/design-system';
 import { Menu, MenuItem } from '.';
 
 export default {
   title: 'Components/UI/Menu',
 };
 
+const Deprecated = ({ children }) => (
+  <>
+    <BannerAlert
+      severity={Severity.Warning}
+      title="Deprecated"
+      description="<Menu/> has been deprecated in favor of <Popover/>"
+      marginBottom={4}
+    />
+    {children}
+  </>
+);
+
+Deprecated.propTypes = {
+  children: PropTypes.node,
+};
+
 export const DefaultStory = () => {
   return (
-    <Menu onHide={action('Hide')}>
-      <MenuItem iconName={IconName.Eye} onClick={action('Menu Item 1')}>
-        Menu Item 1
-      </MenuItem>
-      <MenuItem onClick={action('Menu Item 2')}>Menu Item 2</MenuItem>
-      <MenuItem iconName={IconName.EyeSlash} onClick={action('Menu Item 3')}>
-        Menu Item 3
-      </MenuItem>
-    </Menu>
+    <Deprecated>
+      <Menu onHide={action('Hide')}>
+        <MenuItem iconName={IconName.Eye} onClick={action('Menu Item 1')}>
+          Menu Item 1
+        </MenuItem>
+        <MenuItem onClick={action('Menu Item 2')}>Menu Item 2</MenuItem>
+        <MenuItem iconName={IconName.EyeSlash} onClick={action('Menu Item 3')}>
+          Menu Item 3
+        </MenuItem>
+      </Menu>
+    </Deprecated>
   );
 };
 
@@ -26,7 +46,7 @@ DefaultStory.storyName = 'Default';
 export const Anchored = () => {
   const [anchorElement, setAnchorElement] = useState(null);
   return (
-    <>
+    <Deprecated>
       <button ref={setAnchorElement}>Menu</button>
       <Menu anchorElement={anchorElement} onHide={action('Hide')}>
         <MenuItem iconName={IconName.Export} onClick={action('Menu Item 1')}>
@@ -43,6 +63,6 @@ export const Anchored = () => {
           Disabled Item
         </MenuItem>
       </Menu>
-    </>
+    </Deprecated>
   );
 };