From dc6069a3abec6378bf882ffe1c991c6733989fec Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Fri, 18 Aug 2023 13:27:10 -0700
Subject: [PATCH] Deprecating ErrorMessage in favor of BannerAlert (#20461)

---
 ui/components/ui/error-message/README.mdx         | 15 ---------------
 .../ui/error-message/error-message.component.js   | 13 +++++++------
 .../ui/error-message/error-message.stories.js     |  9 +--------
 3 files changed, 8 insertions(+), 29 deletions(-)
 delete mode 100644 ui/components/ui/error-message/README.mdx

diff --git a/ui/components/ui/error-message/README.mdx b/ui/components/ui/error-message/README.mdx
deleted file mode 100644
index 777ee8927..000000000
--- a/ui/components/ui/error-message/README.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-
-import ErrorMessage from '.';
-
-# Error Message
-
-This component highlights error messages
-
-<Canvas>
-  <Story id="components-ui-errormessage--default-story" />
-</Canvas>
-
-## Props
-
-<ArgsTable of={ErrorMessage} />
diff --git a/ui/components/ui/error-message/error-message.component.js b/ui/components/ui/error-message/error-message.component.js
index 53f50f90f..64ff8fc80 100644
--- a/ui/components/ui/error-message/error-message.component.js
+++ b/ui/components/ui/error-message/error-message.component.js
@@ -4,13 +4,14 @@ import { Icon, IconName, IconSize } from '../../component-library';
 import { IconColor } from '../../../helpers/constants/design-system';
 
 /**
- * @deprecated - Please use ActionableMessage type danger
- * @see ActionableMessage
- * @param {object} props
- * @param {string} props.errorMessage
- * @param {string} props.errorKey
- * @param {object} context
+ * @deprecated The `<ErrorMessage />` 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 ErrorMessage component, please submit a pull request against this GitHub issue:
+ * {@link https://github.com/MetaMask/metamask-extension/issues/20394}
  */
+
 const ErrorMessage = (props, context) => {
   const { errorMessage, errorKey } = props;
   const error = errorKey ? context.t(errorKey) : errorMessage;
diff --git a/ui/components/ui/error-message/error-message.stories.js b/ui/components/ui/error-message/error-message.stories.js
index e800104ad..6f9add283 100644
--- a/ui/components/ui/error-message/error-message.stories.js
+++ b/ui/components/ui/error-message/error-message.stories.js
@@ -1,16 +1,9 @@
 import React from 'react';
-import README from './README.mdx';
 import ErrorMessage from '.';
 
 export default {
-  title: 'Components/UI/ErrorMessage',
-
+  title: 'Components/UI/ErrorMessage(deprecated)',
   component: ErrorMessage,
-  parameters: {
-    docs: {
-      page: README,
-    },
-  },
   argTypes: {
     errorMessage: { control: 'text' },
     errorKey: { control: 'text' },