From 7e1ed4bb0be568d89ff655621ce7e5355d42fc21 Mon Sep 17 00:00:00 2001
From: Dhruv <79097544+dhruvv173@users.noreply.github.com>
Date: Tue, 29 Aug 2023 04:33:41 +0530
Subject: [PATCH] deprecating Dialog in favour of BannerAlert (#20623)

---
 ui/components/ui/dialog/dialog.stories.js | 21 ++++++++++++++++++---
 ui/components/ui/dialog/index.js          |  9 +++++++++
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/ui/components/ui/dialog/dialog.stories.js b/ui/components/ui/dialog/dialog.stories.js
index 731cac2cc..7f070994a 100644
--- a/ui/components/ui/dialog/dialog.stories.js
+++ b/ui/components/ui/dialog/dialog.stories.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import { BannerAlert } from '../../component-library';
+import { Severity } from '../../../helpers/constants/design-system';
 import README from './README.mdx';
 import Dialog from '.';
 
@@ -19,9 +21,22 @@ export default {
   },
 };
 
-export const DefaultDialog = (args) => {
-  return <Dialog {...args} />;
-};
+export const DefaultDialog = (args) => (
+  <>
+    <BannerAlert
+      severity={Severity.Warning}
+      title="Deprecated"
+      description="The <Dialog> component has been deprecated in favor of the new <BannerAlert> component from the component-library.
+      If you would like to help with the replacement of the old Dialog component, please submit a pull request to metamask-extension"
+      actionButtonLabel="See details"
+      actionButtonProps={{
+        href: 'https://github.com/MetaMask/metamask-extension/issues/20463',
+      }}
+      marginBottom={4}
+    />
+    <Dialog {...args} />
+  </>
+);
 
 DefaultDialog.storyName = 'Default';
 DefaultDialog.args = {
diff --git a/ui/components/ui/dialog/index.js b/ui/components/ui/dialog/index.js
index e9f10dc24..580c1ba55 100644
--- a/ui/components/ui/dialog/index.js
+++ b/ui/components/ui/dialog/index.js
@@ -2,6 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
+/**
+ * @deprecated The `<Dialog />` component has been deprecated in favor of the new `<BannerAlert>` component from the component-library.
+ * Please update your code to use the new `<BannerAlert>` component instead, which can be found at ui/components/component-library/banner-alert/banner-alert.js.
+ * You can find documentation for the new `BannerAlert` component in the MetaMask Storybook:
+ * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-banneralert--docs}
+ * If you would like to help with the replacement of the old `Dialog` component, please submit a pull request against this GitHub issue:
+ * {@link https://github.com/MetaMask/metamask-extension/issues/20463}
+ */
+
 export default function Dialog(props) {
   const { children, type, className, onClick } = props;
   return (