Adding deprecation tags to popover and old modals (#19556)

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

ui/components/app/modal/modal.component.js

@@ -3,6 +3,14 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Button from '../../ui/button';
 
+/**
+ * @deprecated The `<Modal />` component has been deprecated in favor of the new `<Modal>` component from the component-library.
+ * Please update your code to use the new `<Modal>` component instead, which can be found at ui/components/component-library/modal/modal.tsx.
+ * You can find documentation for the new Modal component in the MetaMask Storybook:
+ * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-modal--docs}
+ * If you would like to help with the replacement of the old Modal component, please submit a pull request
+ */
+
 export default class Modal extends PureComponent {
   static propTypes = {
     children: PropTypes.node,

ui/components/app/modals/modal.js

@@ -444,6 +444,13 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
+/**
+ * @deprecated The `<Modal />` and the dispatch method of displaying modals has been deprecated in favor of local state and the `<Modal>` component from the component-library.
+ * Please update your code to use the new `<Modal>` component instead, which can be found at ui/components/component-library/modal/modal.tsx.
+ * You can find documentation for the new Modal component in the MetaMask Storybook:
+ * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-modal--docs}
+ * If you would like to help with the replacement of the old Modal component, please submit a pull request
+ */
 class Modal extends Component {
   static propTypes = {
     active: PropTypes.bool.isRequired,

ui/components/ui/popover/popover.component.js

@@ -49,6 +49,15 @@ const defaultFooterProps = {
   padding: [4, 6, 6],
 };
 
+/**
+ * @deprecated The `<Popover>` component has been deprecated in favor of the new `<Modal>` component from the component-library.
+ * Please update your code to use the new `<Modal>` component instead, which can be found at ui/components/component-library/modal/modal.tsx.
+ * You can find documentation for the new Modal component in the MetaMask Storybook:
+ * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-modal--docs}
+ * If you would like to help with the replacement of the old Modal component, please submit a pull request against this GitHub issue:
+ * {@link https://github.com/MetaMask/metamask-extension/issues/19555}
+ */
+
 const Popover = ({
   title,
   subtitle = '',
@@ -252,6 +261,14 @@ Popover.propTypes = {
   footerProps: PropTypes.shape({ ...Box.propTypes }),
 };
 
+/**
+ * @deprecated The `<Popover>` component has been deprecated in favor of the new `<Modal>` component from the component-library.
+ * Please update your code to use the new `<Modal>` component instead, which can be found at ui/components/component-library/modal/modal.tsx.
+ * You can find documentation for the new Modal component in the MetaMask Storybook:
+ * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-modal--docs}
+ * If you would like to help with the replacement of the old Modal component, please submit a pull request against this GitHub issue:
+ * {@link https://github.com/MetaMask/metamask-extension/issues/19555}
+ */
 export default class PopoverPortal extends PureComponent {
   static propTypes = Popover.propTypes;
 

ui/components/ui/popover/popover.stories.js

@@ -5,7 +5,6 @@ import Popover from './popover.component';
 
 export default {
   title: 'Components/UI/Popover',
-
   component: Popover,
   argTypes: {
     title: { control: 'text' },