From c54212916b204d2566583aaf4d73cb18da06bec7 Mon Sep 17 00:00:00 2001
From: Jase Balderrama <4392888+jase-b@users.noreply.github.com>
Date: Mon, 28 Aug 2023 12:12:28 -0700
Subject: [PATCH] 20488: Declare <Chip/> as deprecated (#20579)

* Add @deprecated JSDoc to <Chip/>

* Add deprecated banner to <Chip/> stories

* Fix linting error

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Import 'Severity' via existing import statement

* Add propTypes for <Deprecated/> wrapper

---------

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
---
 ui/components/ui/chip/chip.js         |  9 +++
 ui/components/ui/chip/chip.stories.js | 96 ++++++++++++++++++---------
 2 files changed, 73 insertions(+), 32 deletions(-)

diff --git a/ui/components/ui/chip/chip.js b/ui/components/ui/chip/chip.js
index 3fbfaf5dd..cdd961dbb 100644
--- a/ui/components/ui/chip/chip.js
+++ b/ui/components/ui/chip/chip.js
@@ -11,6 +11,15 @@ import {
   TypographyVariant,
 } from '../../../helpers/constants/design-system';
 
+/**
+ * @deprecated The `<Chip />` component has been deprecated in favor of the new `<Tag>` component from the component-library.
+ * Please update your code to use the new `<Tag>` component instead, which can be found at ui/components/component-library/tag/tag.tsx.
+ * You can find documentation for the new `Tag` component in the MetaMask Storybook:
+ * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-tag--docs}
+ * If you would like to help with the replacement of the old `Chip` component, please submit a pull request against this GitHub issue:
+ * {@link https://github.com/MetaMask/metamask-extension/issues/20487}
+ */
+
 export default function Chip({
   dataTestId,
   className,
diff --git a/ui/components/ui/chip/chip.stories.js b/ui/components/ui/chip/chip.stories.js
index 29d1d6b9d..e77b34e1a 100644
--- a/ui/components/ui/chip/chip.stories.js
+++ b/ui/components/ui/chip/chip.stories.js
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 
 import {
   TypographyVariant,
@@ -7,8 +8,10 @@ import {
   BorderColor,
   BackgroundColor,
   TextColor,
+  Severity,
 } from '../../../helpers/constants/design-system';
 
+import { BannerAlert } from '../../component-library';
 import ApproveIcon from '../icon/approve-icon.component';
 import InfoIcon from '../icon/info-icon.component';
 import Identicon from '../identicon/identicon.component';
@@ -90,7 +93,27 @@ export default {
   },
 };
 
-export const DefaultStory = (args) => <Chip {...args} />;
+const Deprecated = ({ children }) => (
+  <>
+    <BannerAlert
+      severity={Severity.Warning}
+      title="Deprecated"
+      description="<Chip/> has been deprecated in favor of <Tag/>"
+      marginBottom={4}
+    />
+    {children}
+  </>
+);
+
+Deprecated.propTypes = {
+  children: PropTypes.node,
+};
+
+export const DefaultStory = (args) => (
+  <Deprecated>
+    <Chip {...args} />
+  </Deprecated>
+);
 
 DefaultStory.storyName = 'Default';
 
@@ -105,47 +128,56 @@ DefaultStory.args = {
 };
 
 export const WithLeftIcon = () => (
-  <Chip
-    label="Done!"
-    borderColor={BorderColor.successDefault}
-    leftIcon={<ApproveIcon size={24} color="var(--color-success-default)" />}
-  />
+  <Deprecated>
+    <Chip
+      label="Done!"
+      borderColor={BorderColor.successDefault}
+      leftIcon={<ApproveIcon size={24} color="var(--color-success-default)" />}
+    />
+  </Deprecated>
 );
 
 export const WithRightIcon = () => (
-  <Chip
-    label="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
-    borderColor={BorderColor.borderDefault}
-    rightIcon={
-      <Identicon
-        address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
-        diameter={25}
-      />
-    }
-  />
+  <Deprecated>
+    <Chip
+      label="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
+      borderColor={BorderColor.borderDefault}
+      rightIcon={
+        <Identicon
+          address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
+          diameter={25}
+        />
+      }
+    />
+  </Deprecated>
 );
 
 export const WithBothIcons = () => (
-  <Chip
-    label="Account 1"
-    borderColor={BorderColor.borderDefault}
-    rightIcon={<InfoIcon size={24} severity={SEVERITIES.INFO} />}
-    leftIcon={
-      <Identicon
-        address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
-        diameter={25}
-      />
-    }
-  />
+  <Deprecated>
+    <Chip
+      label="Account 1"
+      borderColor={BorderColor.borderDefault}
+      rightIcon={<InfoIcon size={24} severity={SEVERITIES.INFO} />}
+      leftIcon={
+        <Identicon
+          address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
+          diameter={25}
+        />
+      }
+    />
+  </Deprecated>
 );
+
 export const WithInput = (args) => {
   const [inputValue, setInputValue] = useState('Chip with input');
   return (
-    <ChipWithInput
-      {...args}
-      inputValue={inputValue}
-      setInputValue={setInputValue}
-    />
+    <Deprecated>
+      <ChipWithInput
+        {...args}
+        inputValue={inputValue}
+        setInputValue={setInputValue}
+      />
+    </Deprecated>
   );
 };