Updating BadgeWrapper to use TS Box (#19769)

ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap

@@ -50,7 +50,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
           data-testid="nft-item"
         >
           <div
-            class="box mm-badge-wrapper nft-item__badge-wrapper box--flex-direction-row"
+            class="mm-box mm-badge-wrapper nft-item__badge-wrapper"
           >
             <img
               alt="MUNK #1 1"
@@ -59,7 +59,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
               src="https://bafybeiclzx7zfjvuiuwobn5ip3ogc236bjqfjzoblumf4pau4ep6dqramu.ipfs.dweb.link"
             />
             <div
-              class="box mm-badge-wrapper__badge-container box--flex-direction-row"
+              class="mm-box mm-badge-wrapper__badge-container"
               style="top: -4px; right: -4px;"
             >
               <div

ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap

@@ -12,7 +12,7 @@ exports[`Token Cell should match snapshot 1`] = `
       href="#"
     >
       <div
-        class="box mm-badge-wrapper box--margin-right-3 box--display-inline-block box--flex-direction-row"
+        class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
       >
         <div
           class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
@@ -20,7 +20,7 @@ exports[`Token Cell should match snapshot 1`] = `
           T
         </div>
         <div
-          class="box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right box--flex-direction-row"
+          class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
         >
           <div
             class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-muted box--border-style-solid box--border-width-1"

ui/components/component-library/badge-wrapper/__snapshots__/badge-wrapper.test.tsx.snap

@@ -3,11 +3,11 @@
 exports[`BadgeWrapper should render correctly 1`] = `
 <div>
   <div
-    class="box mm-badge-wrapper box--display-inline-block box--flex-direction-row"
+    class="mm-box mm-badge-wrapper mm-box--display-inline-block"
   >
     content
     <div
-      class="box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right box--flex-direction-row"
+      class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
     >
       <div
         data-testid="badge"

ui/components/component-library/badge-wrapper/badge-wrapper.test.tsx

@@ -95,9 +95,9 @@ describe('BadgeWrapper', () => {
       <BadgeWrapper
         badge={<div>badge</div>}
         badgeContainerProps={{ 'data-testid': 'badge-custom' }}
-        position={{
+        positionObj={{
-          top: -10,
+          top: '-10px',
-          right: -10,
+          right: '-10px',
         }}
       >
         content custom
@@ -108,8 +108,8 @@ describe('BadgeWrapper', () => {
       'mm-badge-wrapper__badge-container--circular-top-right',
     );
     expect(getByTestId('badge-custom')).toHaveStyle({
-      top: -10,
+      top: '-10px',
-      right: -10,
+      right: '-10px',
     });
   });
 

ui/components/component-library/badge-wrapper/badge-wrapper.tsx

@@ -1,44 +1,50 @@
 import React from 'react';
 import classnames from 'classnames';
 
-import { DISPLAY } from '../../../helpers/constants/design-system';
+import { Display } from '../../../helpers/constants/design-system';
-
+import { Box } from '..';
-import Box from '../../ui/box';
+import type { PolymorphicRef } from '../box';
 
 import {
   BadgeWrapperPosition,
   BadgeWrapperAnchorElementShape,
   BadgeWrapperProps,
+  BadgeWrapperComponent,
 } from './badge-wrapper.types';
 
-export const BadgeWrapper = ({
+export const BadgeWrapper: BadgeWrapperComponent = React.forwardRef(
-  children,
+  <C extends React.ElementType = 'div'>(
-  badge,
+    {
-  badgeContainerProps,
+      children,
-  position = BadgeWrapperPosition.topRight,
+      badge,
-  positionObj,
+      badgeContainerProps,
-  anchorElementShape = BadgeWrapperAnchorElementShape.circular,
+      position = BadgeWrapperPosition.topRight,
-  className = '',
+      positionObj,
-  color,
+      anchorElementShape = BadgeWrapperAnchorElementShape.circular,
-  ...props
+      className = '',
-}: BadgeWrapperProps) => (
+      ...props
-  <Box
+    }: BadgeWrapperProps<C>,
-    className={classnames('mm-badge-wrapper', className)}
+    ref?: PolymorphicRef<C>,
-    display={DISPLAY.INLINE_BLOCK}
+  ) => (
-    {...props}
-  >
-    {/* Generally the AvatarAccount or AvatarToken */}
-    {children}
     <Box
-      className={classnames('mm-badge-wrapper__badge-container', {
+      className={classnames('mm-badge-wrapper', className)}
-        [`mm-badge-wrapper__badge-container--${anchorElementShape}-${position}`]:
+      ref={ref}
-          !positionObj,
+      display={Display.InlineBlock}
-      })}
+      {...props} // TODO: There is a typing issue with spreading props to the Box component. It still works but TypeScript complains.
-      style={{ ...positionObj }}
-      {...badgeContainerProps}
     >
-      {/* Generally the AvatarNetwork at SIZES.XS */}
+      {/* Generally the AvatarAccount or AvatarToken */}
-      {badge}
+      {children}
+      <Box
+        className={classnames('mm-badge-wrapper__badge-container', {
+          [`mm-badge-wrapper__badge-container--${anchorElementShape}-${position}`]:
+            !positionObj,
+        })}
+        style={{ ...positionObj }}
+        {...badgeContainerProps}
+      >
+        {/* Generally the AvatarNetwork at SIZES.XS */}
+        {badge}
+      </Box>
     </Box>
-  </Box>
+  ),
 );

ui/components/component-library/badge-wrapper/badge-wrapper.types.ts

@@ -1,4 +1,9 @@
-import type { BoxProps } from '../../ui/box/box.d';
+import React from 'react';
+
+import type {
+  StyleUtilityProps,
+  PolymorphicComponentPropWithRef,
+} from '../box';
 
 export enum BadgeWrapperPosition {
   topRight = 'top-right',
@@ -12,7 +17,7 @@ export enum BadgeWrapperAnchorElementShape {
   circular = 'circular',
 }
 
-export interface BadgeWrapperProps extends BoxProps {
+export interface BadgeWrapperStyleUtilityProps extends StyleUtilityProps {
   /**
    * The element to be wrapped by the BadgeWrapper and for the badge to be positioned on top of
    */
@@ -24,7 +29,7 @@ export interface BadgeWrapperProps extends BoxProps {
   /**
    * The BadgeWrapper props of the component. All Box props can be used
    */
-  badgeContainerProps?: BoxProps;
+  badgeContainerProps?: any; // TODO: Replace with Box types when the syntax and typing is properly figured out. Needs to accept everything Box accepts
   /**
    * The position of the Badge. Possible values could be 'BadgeWrapperPosition.topRight', 'BadgeWrapperPosition.bottomRight','BadgeWrapperPosition.topLeft', 'BadgeWrapperPosition.bottomLeft'
    * Defaults to 'BadgeWrapperPosition.topRight'
@@ -34,10 +39,10 @@ export interface BadgeWrapperProps extends BoxProps {
    * The positionObj can be used to override the default positioning of the badge it accepts an object with the following keys { top, right, bottom, left }
    */
   positionObj?: {
-    top?: number;
+    top?: number | string;
-    right?: number;
+    right?: number | string;
-    bottom?: number;
+    bottom?: number | string;
-    left?: number;
+    left?: number | string;
   };
   /**
    * The shape of the anchor element. Possible values could be 'BadgeWrapperAnchorElementShape.circular', 'BadgeWrapperAnchorElementShape.square'
@@ -49,3 +54,10 @@ export interface BadgeWrapperProps extends BoxProps {
    */
   className?: string;
 }
+
+export type BadgeWrapperProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, BadgeWrapperStyleUtilityProps>;
+
+export type BadgeWrapperComponent = <C extends React.ElementType = 'div'>(
+  props: BadgeWrapperProps<C>,
+) => React.ReactElement | null;

ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap

@@ -16,14 +16,14 @@ exports[`Connected Site Menu should render the site menu in connected state 1`]
         tabindex="0"
       >
         <div
-          class="box mm-badge-wrapper box--display-inline-block box--flex-direction-row"
+          class="mm-box mm-badge-wrapper mm-box--display-inline-block"
         >
           <span
             class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
             style="mask-image: url('./images/icons/global.svg');"
           />
           <div
-            class="box mm-badge-wrapper__badge-container box--flex-direction-row"
+            class="mm-box mm-badge-wrapper__badge-container"
             style="bottom: 2px; right: -4px; z-index: 1;"
           >
             <div
@@ -53,14 +53,14 @@ exports[`Connected Site Menu should render the site menu in not connected state
         tabindex="0"
       >
         <div
-          class="box mm-badge-wrapper box--display-inline-block box--flex-direction-row"
+          class="mm-box mm-badge-wrapper mm-box--display-inline-block"
         >
           <span
             class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
             style="mask-image: url('./images/icons/global.svg');"
           />
           <div
-            class="box mm-badge-wrapper__badge-container box--flex-direction-row"
+            class="mm-box mm-badge-wrapper__badge-container"
             style="bottom: 2px; right: -4px; z-index: 1;"
           >
             <div
@@ -90,14 +90,14 @@ exports[`Connected Site Menu should render the site menu in not connected to cur
         tabindex="0"
       >
         <div
-          class="box mm-badge-wrapper box--display-inline-block box--flex-direction-row"
+          class="mm-box mm-badge-wrapper mm-box--display-inline-block"
         >
           <span
             class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
             style="mask-image: url('./images/icons/global.svg');"
           />
           <div
-            class="box mm-badge-wrapper__badge-container box--flex-direction-row"
+            class="mm-box mm-badge-wrapper__badge-container"
             style="bottom: 4px; right: -1px; z-index: 1;"
           >
             <div

ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap

@@ -12,7 +12,7 @@ exports[`TokenListItem should render correctly 1`] = `
       href="#"
     >
       <div
-        class="box mm-badge-wrapper box--margin-right-3 box--display-inline-block box--flex-direction-row"
+        class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
       >
         <div
           class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
@@ -20,7 +20,7 @@ exports[`TokenListItem should render correctly 1`] = `
           ?
         </div>
         <div
-          class="box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right box--flex-direction-row"
+          class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
         >
           <div
             class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-muted box--border-style-solid box--border-width-1"