Deprecate JS version of Box in favor of TS version (#19530)

* Initail deprecation messages and updates

* Updating spelling of favour to US spelling favor

docs/confirmation-refactoring/confirmation-backend-architecture/README.md

@@ -18,7 +18,7 @@ Current confirmation implementation in the background consists of following piec
 ## Areas of Code Cleanup:
 
 1. Migrating to `@metamask/transaction-controller`. `TransactionController` in extension repo should eventually get replaced by core repo [TransactionController](https://github.com/MetaMask/core/tree/main/packages/transaction-controller). This controller is maintained by core team and also used in Metamask Mobile App.
-2. Migrating to `@metamask/message-manager`. Message Managers in extension repo should be deprecated in favour of core repo [MessageManagers](https://github.com/MetaMask/core/tree/main/packages/message-manager).
+2. Migrating to `@metamask/message-manager`. Message Managers in extension repo should be deprecated in favor of core repo [MessageManagers](https://github.com/MetaMask/core/tree/main/packages/message-manager).
 3. Cleanup Code in `MetamaskController`. [Metamaskcontroller](https://github.com/MetaMask/metamask-extension/blob/develop/app/scripts/metamask-controller.js) is where `TransactionController` and different `MessageManagers` are initialized. It is responsible for injecting required dependencies. Also, it is responsible for handling incoming DAPP requests and invoking appropriate methods in these background classes. Over the period of time lot of code that should have been part of `TransactionController` and `MessageManagers` has ended up in `MetamaskController`. We need to cleanup this code and move to the appropriate classes.
    - Code [here](https://github.com/MetaMask/metamask-extension/blob/bc19856d5d9ad1831e1722c84fe6161bed7a0a5a/app/scripts/metamask-controller.js#L3097) to check if `eth_sign` is enabled in preferences and perform other validation on the incoming request should be part of [MessageManager](https://github.com/MetaMask/metamask-extension/blob/develop/app/scripts/lib/message-manager.js)
    - Method to sign messages [signMessage](https://github.com/MetaMask/metamask-extension/blob/bc19856d5d9ad1831e1722c84fe6161bed7a0a5a/app/scripts/metamask-controller.js#L3158), [signPersonalMessage](https://github.com/MetaMask/metamask-extension/blob/bc19856d5d9ad1831e1722c84fe6161bed7a0a5a/app/scripts/metamask-controller.js#L3217), [signTypedMessage](https://github.com/MetaMask/metamask-extension/blob/bc19856d5d9ad1831e1722c84fe6161bed7a0a5a/app/scripts/metamask-controller.js#L3470) can be simplified by injecting `KeyringController` into `MessageManagers`.

ui/components/component-library/text/text.types.ts

@@ -24,7 +24,7 @@ export enum TextDirection {
 export const InvisibleCharacter = '\u200B';
 
 /**
- * @deprecated ValidTag enum is deprecated in favour of a union of strings.
+ * @deprecated ValidTag enum is deprecated in favor of a union of strings.
  * To change the root html element tag of the Text component, use the `as` prop and string value.
  * e.g. `<Text as="h1">Hello World</Text>`
  *

ui/components/ui/actionable-message/actionable-message.js

@@ -17,29 +17,15 @@ export const typeHash = {
 };
 
 /**
- * @deprecated `<ActionableMessage />` has been deprecated in favour of the `<BannerAlert />`
+ * @deprecated `<ActionableMessage />` has been deprecated in favor of the `<BannerAlert />`
  * component in ./ui/components/component-library/banner-alert/banner-alert.js.
- * See storybook documentation for Text here:
+ * See storybook documentation for BannerAlert here:
  * {@see {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-banneralert--default-story#banneralert}}
  *
- * Help to replace `ActionableMessage` with `BannerAlert` by submitting a PR
- * @param options
- * @param options.message
- * @param options.primaryAction
- * @param options.primaryActionV2
- * @param options.secondaryAction
- * @param options.className
- * @param options.infoTooltipText
- * @param options.withRightButton
- * @param options.type
- * @param options.useIcon
- * @param options.icon
- * @param options.iconFillColor
- * @param options.roundedButtons
- * @param options.dataTestId
- * @param options.autoHideTime
- * @param options.onAutoHide
+ * Help to replace `ActionableMessage` with `BannerAlert` by submitting a PR against
+ * {@link https://github.com/MetaMask/metamask-extension/issues/19528}
  */
+
 export default function ActionableMessage({
   message = '',
   primaryAction = null,

ui/components/ui/box/README.mdx

@@ -1,15 +1,30 @@
 import { Story, Canvas } from '@storybook/addon-docs';
 
-import ActionableMessage from '../actionable-message';
+import { Severity } from '../../../helpers/constants/design-system';
+
+import { BannerAlert } from '../../component-library/banner-alert';
+
+<BannerAlert
+  severity={Severity.Warning}
+  title="Deprecated"
+  description="The JS version of <Box/> has been deprecated in favor of the TS version from component-library"
+  actionButtonLabel="See details"
+  actionButtonProps={{
+    href: 'https://github.com/MetaMask/metamask-extension/issues/19526',
+  }}
+  marginBottom={4}
+/>
+
+<br />
 
 import Box from '.';
 
-# Box
+# Box (deprecated)
 
 Box is a utility component that can be used for layout or as a base for other UI components.
 
 <Canvas>
-  <Story id="components-ui-box--default-story" />
+  <Story id="components-ui-box-deprecated--default-story" />
 </Canvas>
 
 ## Props
@@ -62,7 +77,7 @@ The margin props `margin`, `marginTop`, `marginRight`, `marginBottom`, `marginLe
 Accepted props are: `0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto` or array of these values
 
 <Canvas>
-  <Story id="components-ui-box--margin" />
+  <Story id="components-ui-box-deprecated--margin" />
 </Canvas>
 
 ```jsx
@@ -93,7 +108,7 @@ The padding props work very similarly to margin. The padding props `padding`, `p
 Accepted props are: `0, 1, 2, 4, 6, 8, 9, 10, 12` or array of these values
 
 <Canvas>
-  <Story id="components-ui-box--padding" />
+  <Story id="components-ui-box-deprecated--padding" />
 </Canvas>
 
 ```jsx
@@ -147,7 +162,7 @@ import Box from '../ui/box';
 The `color` prop can be used to set the color of the content in Box component. The `color` prop accepts [responsive props](#responsive-props) in the form of array props. Defaults to `Color.textDefault`.
 
 <Canvas>
-  <Story id="components-ui-box--color-story" />
+  <Story id="components-ui-box-deprecated--color-story" />
 </Canvas>
 
 Example of importing `TextColor` object with `Box` component
@@ -164,7 +179,7 @@ import Box from '../ui/box';
 Use the `backgroundColor` prop along with the `Color` or `BackgroundColor` object from `ui/helpers/constants/design-system.js` to change background color. The `backgroundColor` prop accepts [responsive props](#responsive-props) in the form of array props.
 
 <Canvas>
-  <Story id="components-ui-box--background-color-story" />
+  <Story id="components-ui-box-deprecated--background-color-story" />
 </Canvas>
 
 Example of importing `BackgroundColor` object with `Box` component
@@ -188,7 +203,7 @@ import Box from '../ui/box';
 Use the `borderColor` prop along with the `Color` or `BorderColor` object from `ui/helpers/constants/design-system.js` to change border color. The `borderColor` prop accepts [responsive props](#responsive-props) in the form of array props.
 
 <Canvas>
-  <Story id="components-ui-box--border-color-story" />
+  <Story id="components-ui-box-deprecated--border-color-story" />
 </Canvas>
 
 Example of importing `BorderColor` object with `Box` component
@@ -216,7 +231,7 @@ import Box from '../ui/box';
 Use the `borderRadius` prop along with the `BorderRadius` object from `ui/helpers/constants/design-system.js` to change border radius. The `borderRadius` prop accepts [responsive props](#responsive-props) in the form of array props.
 
 <Canvas>
-  <Story id="components-ui-box--border-radius-story" />
+  <Story id="components-ui-box-deprecated--border-radius-story" />
 </Canvas>
 
 Example of importing `BorderRadius` object with `Box` component
@@ -257,7 +272,7 @@ The box component provides a responsive props api in the form of array props. Ar
 ```
 
 <Canvas>
-  <Story id="components-ui-box--responsive-props" />
+  <Story id="components-ui-box-deprecated--responsive-props" />
 </Canvas>
 
 ```jsx
@@ -303,7 +318,7 @@ import Box from '../ui/box';
 The polymorphic `as` prop allows you to change the root HTML element of the Box component. Defaults to `'div'`
 
 <Canvas>
-  <Story id="components-ui-box--as" />
+  <Story id="components-ui-box-deprecated--as" />
 </Canvas>
 
 ```jsx
@@ -330,7 +345,7 @@ Example: [BlockSize.Half, BlockSize.ThreeFourths, BlockSize.OneFifth, BlockSize.
 - BlockSize.ThreeSixths is the width for `large screen size (1280px)` and up
 
 <Canvas>
-  <Story id="components-ui-box--width" />
+  <Story id="components-ui-box-deprecated--width" />
 </Canvas>
 
 ```jsx

ui/components/ui/box/box.d.ts

@@ -179,6 +179,13 @@ export type BackgroundColorArray = [
   BackgroundColor?,
 ];
 
+/**
+ * @deprecated BoxProps have been deprecated in favor of the component-library Box types.
+ * This component should be migrated to use the component-library Box.
+ * import { Box } from '../../component-library';
+ *
+ * Help to migrate this component by submitting a PR
+ */
 export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * The content of the Box component.
@@ -391,6 +398,13 @@ export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
    */
   ref?: React.Ref<HTMLElement>;
 }
-
+/**
+ * @deprecated The JS version of `<Box />` has been deprecated in favor of the TS version in `ui/components/component-library/`.
+ * The component API should be the same, just update the import statement to:
+ * import { Box } from '../../component-library';
+ *
+ * Help to replace the JS `Box` with the TS `Box` by submitting a PR against
+ * {@link https://github.com/MetaMask/metamask-extension/issues/19526}
+ */
 declare const Box: React.FC<BoxProps>;
 export default Box;

ui/components/ui/box/box.js

@@ -187,6 +187,15 @@ const generateClassNames = memoize(
   (type, value) => [type, value],
 );
 
+/**
+ * @deprecated The JS version of the <Box /> component has been deprecated in favor of the new TS version from the component-library.
+ * Please update your code to use the new <Box> component instead
+ * import { Box } from '../../component-library';
+ * The component API is the same so you should only have to update the import statement but you can find documentation for the new Box component in the MetaMask Storybook:
+ * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-box--docs}
+ * If you would like to help with the replacement of the old Button component, please submit a pull request against this GitHub issue:
+ * {@link https://github.com/MetaMask/metamask-extension/issues/19526}
+ */
 const Box = React.forwardRef(function Box(
   {
     padding,

ui/components/ui/box/box.stories.tsx

@@ -41,7 +41,7 @@ const sizeControlOptions = [
 const marginSizeControlOptions = [...sizeControlOptions, 'auto'];
 
 export default {
-  title: 'Components/UI/Box',
+  title: 'Components/UI/Box (deprecated)',
   component: Box,
   parameters: {
     docs: {

ui/components/ui/icon-border/icon-border.stories.js

@@ -30,7 +30,7 @@ export const DefaultStory = (args) => (
     <BannerAlert
       severity={Severity.Warning}
       title="Deprecated"
-      description="<IconBorder/> has been deprecated in favour of the <AvatarBase /> component"
+      description="<IconBorder/> has been deprecated in favor of the <AvatarBase /> component"
       marginBottom={4}
     />
     <IconBorder {...args} />

ui/components/ui/icon/approve-icon.component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 

ui/components/ui/icon/icon-eye-slash.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 

ui/components/ui/icon/icon-eye.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 

ui/components/ui/icon/icon-token-search.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 

ui/components/ui/icon/info-icon-inverted.component.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { SEVERITIES } from '../../../helpers/constants/design-system';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 

ui/components/ui/icon/info-icon.component.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { SEVERITIES } from '../../../helpers/constants/design-system';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 

ui/components/ui/icon/interaction-icon.component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 

ui/components/ui/icon/overview-buy-icon.component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 

ui/components/ui/icon/receive-icon.component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 

ui/components/ui/icon/search-icon.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 

ui/components/ui/icon/send-icon.component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 

ui/components/ui/icon/sign-icon.component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 

ui/components/ui/icon/sun-check-icon.component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 

ui/components/ui/icon/swap-icon-for-list.component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * @deprecated This has been deprecated in favor of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
  * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
  */
 

ui/components/ui/typography/README.mdx

@@ -8,7 +8,7 @@ import { BannerAlert } from '../../component-library/banner-alert';
 <BannerAlert
   severity={SEVERITIES.WARNING}
   title="Deprecated"
-  description="<Typography/> has been deprecated in favour of the <Text /> component"
+  description="<Typography/> has been deprecated in favor of the <Text /> component"
   actionButtonLabel="See details"
   actionButtonProps={{
     href: 'https://github.com/MetaMask/metamask-extension/issues/17670',

ui/components/ui/typography/typography.js

@@ -57,7 +57,7 @@ export const ValidTags = [
 ];
 
 /**
- * @deprecated `<Typography />` has been deprecated in favour of the `<Text />` component in ./ui/components/component-library/text/text.js
+ * @deprecated `<Typography />` has been deprecated in favor of the `<Text />` component in ./ui/components/component-library/text/text.js
  *
  * See storybook documentation for Text here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--default-story#text
  *

ui/components/ui/typography/typography.scss

@@ -1,5 +1,5 @@
 /**
- * @deprecated `<Typography />` has been deprecated in favour of the `<Text />` component in ./ui/components/component-library/text/text.js
+ * @deprecated `<Typography />` has been deprecated in favor of the `<Text />` component in ./ui/components/component-library/text/text.js
  *
  * See storybook documentation for Text here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--default-story#text
  *