From 3117890b305ffae45251264b30a8d77c32d888be Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Fri, 17 Mar 2023 10:06:59 -0700
Subject: [PATCH] AvatarBase font-size logic  (#18203)

* Updating AvatarBase to use Text component instead of Box and adding font size logic based on avatar size

* Updating snaps
---
 .../__snapshots__/avatar-account.test.js.snap |   2 +-
 .../component-library/avatar-base/README.mdx  |   2 +
 .../__snapshots__/avatar-base.test.js.snap    |   2 +-
 .../avatar-base/avatar-base.js                |  56 +++--
 .../avatar-base/avatar-base.scss              |   5 -
 .../avatar-base/avatar-base.stories.js        |   3 +-
 .../avatar-base/avatar-base.test.js           |  32 +--
 .../__snapshots__/avatar-favicon.test.js.snap |   2 +-
 .../__snapshots__/avatar-icon.test.js.snap    |   2 +-
 .../avatar-icon/avatar-icon.test.js           |   4 +-
 .../avatar-network/README.mdx                 |   4 +
 .../__snapshots__/avatar-network.test.js.snap |   2 +-
 .../avatar-network/avatar-network.stories.js  |  30 ++-
 .../avatar-network/avatar-network.test.js     |   4 +-
 .../component-library/avatar-token/README.mdx |   4 +
 .../__snapshots__/avatar-token.test.js.snap   |   2 +-
 .../avatar-token/avatar-token.stories.js      | 228 +++++++++++++++++-
 .../avatar-token/avatar-token.test.js         |   4 +-
 .../__snapshots__/picker-network.test.js.snap |   2 +-
 .../__snapshots__/tag-url.test.js.snap        |   2 +-
 20 files changed, 326 insertions(+), 66 deletions(-)

diff --git a/ui/components/component-library/avatar-account/__snapshots__/avatar-account.test.js.snap b/ui/components/component-library/avatar-account/__snapshots__/avatar-account.test.js.snap
index 4fb7ecbbe..0dfe9536f 100644
--- a/ui/components/component-library/avatar-account/__snapshots__/avatar-account.test.js.snap
+++ b/ui/components/component-library/avatar-account/__snapshots__/avatar-account.test.js.snap
@@ -3,7 +3,7 @@
 exports[`AvatarAccount should render correctly 1`] = `
 <div>
   <div
-    class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-account box--flex-direction-row box--color-text-default box--background-color-background-alternative box--border-color-border-default box--border-style-solid box--border-width-1"
+    class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
     data-testid="avatar-account"
   >
     <div
diff --git a/ui/components/component-library/avatar-base/README.mdx b/ui/components/component-library/avatar-base/README.mdx
index 77d5055d5..ff0e396f6 100644
--- a/ui/components/component-library/avatar-base/README.mdx
+++ b/ui/components/component-library/avatar-base/README.mdx
@@ -32,6 +32,8 @@ Possible sizes include:
 
 Defaults to `md`
 
+The text styles of the `AvatarBase` is based on the `size` prop. To override this use the `Text` component's `variant` prop. `AvatarBase` also accepts all `Text` component props.
+
 <Canvas>
   <Story id="components-componentlibrary-avatarbase--size" />
 </Canvas>
diff --git a/ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.js.snap b/ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.js.snap
index 004fa7ead..91206391f 100644
--- a/ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.js.snap
+++ b/ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.js.snap
@@ -3,7 +3,7 @@
 exports[`AvatarBase should render correctly 1`] = `
 <div>
   <div
-    class="box mm-avatar-base mm-avatar-base--size-md box--flex-direction-row box--color-text-default box--background-color-background-alternative box--border-color-border-default box--border-style-solid box--border-width-1"
+    class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
     data-testid="avatar-base"
   />
 </div>
diff --git a/ui/components/component-library/avatar-base/avatar-base.js b/ui/components/component-library/avatar-base/avatar-base.js
index 8b6da1f0e..22a1e9553 100644
--- a/ui/components/component-library/avatar-base/avatar-base.js
+++ b/ui/components/component-library/avatar-base/avatar-base.js
@@ -2,12 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import Box from '../../ui/box/box';
 import {
   BackgroundColor,
   BorderColor,
   TextColor,
+  DISPLAY,
+  JustifyContent,
+  AlignItems,
+  BorderRadius,
+  TextVariant,
+  TEXT_TRANSFORM,
 } from '../../../helpers/constants/design-system';
+
+import { Text } from '../text';
+
 import { AVATAR_BASE_SIZES } from './avatar-base.constants';
 
 export const AvatarBase = ({
@@ -18,19 +26,36 @@ export const AvatarBase = ({
   color = TextColor.textDefault,
   className,
   ...props
-}) => (
-  <Box
-    className={classnames(
-      'mm-avatar-base',
-      `mm-avatar-base--size-${size}`,
-      className,
-    )}
-    {...{ backgroundColor, borderColor, color, ...props }}
-  >
-    {children}
-  </Box>
-);
+}) => {
+  let fallbackTextVariant;
 
+  if (size === AVATAR_BASE_SIZES.LG || size === AVATAR_BASE_SIZES.XL) {
+    fallbackTextVariant = TextVariant.bodyLgMedium;
+  } else if (size === AVATAR_BASE_SIZES.SM || size === AVATAR_BASE_SIZES.MD) {
+    fallbackTextVariant = TextVariant.bodySm;
+  } else {
+    fallbackTextVariant = TextVariant.bodyXs;
+  }
+  return (
+    <Text
+      className={classnames(
+        'mm-avatar-base',
+        `mm-avatar-base--size-${size}`,
+        className,
+      )}
+      as="div"
+      display={DISPLAY.FLEX}
+      justifyContent={JustifyContent.center}
+      alignItems={AlignItems.center}
+      borderRadius={BorderRadius.full}
+      variant={fallbackTextVariant}
+      textTransform={TEXT_TRANSFORM.UPPERCASE}
+      {...{ backgroundColor, borderColor, color, ...props }}
+    >
+      {children}
+    </Text>
+  );
+};
 AvatarBase.propTypes = {
   /**
    * The size of the AvatarBase.
@@ -62,8 +87,7 @@ AvatarBase.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * AvatarBase also accepts all Box props including but not limited to
-   * className, as(change root element of HTML element) and margin props
+   * AvatarBase also accepts all Text props including variant and all Box props
    */
-  ...Box.propTypes,
+  ...Text.propTypes,
 };
diff --git a/ui/components/component-library/avatar-base/avatar-base.scss b/ui/components/component-library/avatar-base/avatar-base.scss
index 257a897c7..28a094e01 100644
--- a/ui/components/component-library/avatar-base/avatar-base.scss
+++ b/ui/components/component-library/avatar-base/avatar-base.scss
@@ -25,10 +25,5 @@
   width: var(--avatar-size);
   max-width: var(--avatar-size);
   flex: 0 0 var(--avatar-size);
-  border-radius: 100%;
   overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-transform: uppercase;
 }
diff --git a/ui/components/component-library/avatar-base/avatar-base.stories.js b/ui/components/component-library/avatar-base/avatar-base.stories.js
index a2bfd45ba..9515ca09f 100644
--- a/ui/components/component-library/avatar-base/avatar-base.stories.js
+++ b/ui/components/component-library/avatar-base/avatar-base.stories.js
@@ -89,10 +89,11 @@ export default {
     color: TextColor.textDefault,
     backgroundColor: BackgroundColor.backgroundAlternative,
     borderColor: BorderColor.borderDefault,
+    children: 'B',
   },
 };
 
-export const DefaultStory = (args) => <AvatarBase {...args}>B</AvatarBase>;
+export const DefaultStory = (args) => <AvatarBase {...args} />;
 
 DefaultStory.storyName = 'Default';
 
diff --git a/ui/components/component-library/avatar-base/avatar-base.test.js b/ui/components/component-library/avatar-base/avatar-base.test.js
index 9137f3a75..cf0058dc9 100644
--- a/ui/components/component-library/avatar-base/avatar-base.test.js
+++ b/ui/components/component-library/avatar-base/avatar-base.test.js
@@ -2,7 +2,7 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { Color } from '../../../helpers/constants/design-system';
+import { Color, TextColor } from '../../../helpers/constants/design-system';
 
 import { AvatarBase } from './avatar-base';
 
@@ -25,19 +25,19 @@ describe('AvatarBase', () => {
       </>,
     );
     expect(getByTestId('avatar-base-xs')).toHaveClass(
-      'mm-avatar-base--size-xs',
+      'mm-avatar-base--size-xs mm-text--body-xs',
     );
     expect(getByTestId('avatar-base-sm')).toHaveClass(
-      'mm-avatar-base--size-sm',
+      'mm-avatar-base--size-sm  mm-text--body-sm',
     );
     expect(getByTestId('avatar-base-md')).toHaveClass(
-      'mm-avatar-base--size-md',
+      'mm-avatar-base--size-md  mm-text--body-sm',
     );
     expect(getByTestId('avatar-base-lg')).toHaveClass(
-      'mm-avatar-base--size-lg',
+      'mm-avatar-base--size-lg mm-text--body-lg-medium',
     );
     expect(getByTestId('avatar-base-xl')).toHaveClass(
-      'mm-avatar-base--size-xl',
+      'mm-avatar-base--size-xl mm-text--body-lg-medium',
     );
   });
   // className
@@ -63,20 +63,20 @@ describe('AvatarBase', () => {
     const { getByTestId } = render(
       <>
         <AvatarBase
-          color={Color.successDefault}
-          data-testid={Color.successDefault}
+          color={TextColor.successDefault}
+          data-testid={TextColor.successDefault}
         />
         <AvatarBase
-          color={Color.errorDefault}
-          data-testid={Color.errorDefault}
+          color={TextColor.errorDefault}
+          data-testid={TextColor.errorDefault}
         />
       </>,
     );
-    expect(getByTestId(Color.successDefault)).toHaveClass(
-      `box--color-${Color.successDefault}`,
+    expect(getByTestId(TextColor.successDefault)).toHaveClass(
+      `mm-text--color-${TextColor.successDefault}`,
     );
-    expect(getByTestId(Color.errorDefault)).toHaveClass(
-      `box--color-${Color.errorDefault}`,
+    expect(getByTestId(TextColor.errorDefault)).toHaveClass(
+      `mm-text--color-${TextColor.errorDefault}`,
     );
   });
   // background color
@@ -84,11 +84,11 @@ describe('AvatarBase', () => {
     const { getByTestId } = render(
       <>
         <AvatarBase
-          backgroundColor={Color.successDefault}
+          backgroundColor={TextColor.successDefault}
           data-testid={Color.successDefault}
         />
         <AvatarBase
-          backgroundColor={Color.errorDefault}
+          backgroundColor={TextColor.errorDefault}
           data-testid={Color.errorDefault}
         />
       </>,
diff --git a/ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap b/ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap
index e6f2c07c4..f1c969961 100644
--- a/ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap
+++ b/ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap
@@ -3,7 +3,7 @@
 exports[`AvatarFavicon should render correctly 1`] = `
 <div>
   <div
-    class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon 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--border-color-transparent box--border-style-solid box--border-width-1"
+    class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
     data-testid="avatar-favicon"
   >
     <span
diff --git a/ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap b/ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap
index 22f56354f..a97d4408e 100644
--- a/ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap
+++ b/ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap
@@ -3,7 +3,7 @@
 exports[`AvatarIcon should render correctly 1`] = `
 <div>
   <div
-    class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-icon box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-primary-muted box--border-color-transparent box--border-style-solid box--border-width-1"
+    class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-icon mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-primary-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-primary-muted box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
     data-testid="avatar-icon"
   >
     <span
diff --git a/ui/components/component-library/avatar-icon/avatar-icon.test.js b/ui/components/component-library/avatar-icon/avatar-icon.test.js
index 73d7fbbcc..65f8eee21 100644
--- a/ui/components/component-library/avatar-icon/avatar-icon.test.js
+++ b/ui/components/component-library/avatar-icon/avatar-icon.test.js
@@ -100,7 +100,9 @@ describe('AvatarIcon', () => {
       />,
     );
 
-    expect(getByTestId('success')).toHaveClass('box--color-success-default');
+    expect(getByTestId('success')).toHaveClass(
+      'mm-text--color-success-default',
+    );
     expect(getByTestId('success')).toHaveClass(
       'box--background-color-success-muted',
     );
diff --git a/ui/components/component-library/avatar-network/README.mdx b/ui/components/component-library/avatar-network/README.mdx
index 92ad2e0e9..81a32c49e 100644
--- a/ui/components/component-library/avatar-network/README.mdx
+++ b/ui/components/component-library/avatar-network/README.mdx
@@ -30,6 +30,8 @@ Possible sizes include:
 
 Defaults to `md`
 
+The fallback display of the `AvatarNetwork` is a circle with the initial letter of the network name. The size of the initial letter is calculated based on the size of the `AvatarNetwork` component.
+
 <Canvas>
   <Story id="components-componentlibrary-avatarnetwork--size-story" />
 </Canvas>
@@ -48,6 +50,8 @@ import { AvatarNetwork } from '../../component-library';
 
 Use the `name` prop to set the initial letter of the `AvatarNetwork`. This will be used as the fallback display if no image url is passed to the `src` prop.
 
+Use `Text` component props to change the `variant`, `font-weight`, `font-family`, etc.
+
 <Canvas>
   <Story id="components-componentlibrary-avatarnetwork--name" />
 </Canvas>
diff --git a/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.js.snap b/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.js.snap
index 4ccac5bc5..60137e80c 100644
--- a/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.js.snap
+++ b/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.js.snap
@@ -3,7 +3,7 @@
 exports[`AvatarNetwork should render correctly 1`] = `
 <div>
   <div
-    class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-network 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--border-color-transparent box--border-style-solid box--border-width-1"
+    class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
     data-testid="avatar-network"
   >
     ?
diff --git a/ui/components/component-library/avatar-network/avatar-network.stories.js b/ui/components/component-library/avatar-network/avatar-network.stories.js
index 28ba38c7a..811864f69 100644
--- a/ui/components/component-library/avatar-network/avatar-network.stories.js
+++ b/ui/components/component-library/avatar-network/avatar-network.stories.js
@@ -12,12 +12,12 @@ import {
 import Box from '../../ui/box/box';
 
 import README from './README.mdx';
+
 import { AvatarNetwork } from './avatar-network';
 import { AVATAR_NETWORK_SIZES } from './avatar-network.constants';
 
 export default {
   title: 'Components/ComponentLibrary/AvatarNetwork',
-
   component: AvatarNetwork,
   parameters: {
     docs: {
@@ -67,13 +67,27 @@ export const DefaultStory = Template.bind({});
 DefaultStory.storyName = 'Default';
 
 export const SizeStory = (args) => (
-  <Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
-    <AvatarNetwork {...args} size={Size.XS} />
-    <AvatarNetwork {...args} size={Size.SM} />
-    <AvatarNetwork {...args} size={Size.MD} />
-    <AvatarNetwork {...args} size={Size.LG} />
-    <AvatarNetwork {...args} size={Size.XL} />
-  </Box>
+  <>
+    <Box
+      display={DISPLAY.FLEX}
+      alignItems={AlignItems.flexEnd}
+      gap={1}
+      marginBottom={4}
+    >
+      <AvatarNetwork {...args} size={Size.XS} />
+      <AvatarNetwork {...args} size={Size.SM} />
+      <AvatarNetwork {...args} size={Size.MD} />
+      <AvatarNetwork {...args} size={Size.LG} />
+      <AvatarNetwork {...args} size={Size.XL} />
+    </Box>
+    <Box display={DISPLAY.FLEX} alignItems={AlignItems.flexEnd} gap={1}>
+      <AvatarNetwork {...args} src="" size={Size.XS} />
+      <AvatarNetwork {...args} src="" size={Size.SM} />
+      <AvatarNetwork {...args} src="" size={Size.MD} />
+      <AvatarNetwork {...args} src="" size={Size.LG} />
+      <AvatarNetwork {...args} src="" size={Size.XL} />
+    </Box>
+  </>
 );
 SizeStory.storyName = 'Size';
 
diff --git a/ui/components/component-library/avatar-network/avatar-network.test.js b/ui/components/component-library/avatar-network/avatar-network.test.js
index cded1d76a..6b2ee4f92 100644
--- a/ui/components/component-library/avatar-network/avatar-network.test.js
+++ b/ui/components/component-library/avatar-network/avatar-network.test.js
@@ -75,10 +75,10 @@ describe('AvatarNetwork', () => {
       </>,
     );
     expect(getByTestId(TextColor.successDefault)).toHaveClass(
-      `box--color-${TextColor.successDefault}`,
+      `mm-text--color-${TextColor.successDefault}`,
     );
     expect(getByTestId(TextColor.errorDefault)).toHaveClass(
-      `box--color-${TextColor.errorDefault}`,
+      `mm-text--color-${TextColor.errorDefault}`,
     );
   });
   // background color
diff --git a/ui/components/component-library/avatar-token/README.mdx b/ui/components/component-library/avatar-token/README.mdx
index 63e7e5b14..efe5375e9 100644
--- a/ui/components/component-library/avatar-token/README.mdx
+++ b/ui/components/component-library/avatar-token/README.mdx
@@ -30,6 +30,8 @@ Possible sizes include:
 
 Defaults to `md`
 
+The fallback display of the `AvatarToken` is a circle with the initial letter of the network name. The size of the initial letter is calculated based on the size of the `AvatarToken` component.
+
 <Canvas>
   <Story id="components-componentlibrary-avatartoken--size-story" />
 </Canvas>
@@ -48,6 +50,8 @@ import { AvatarToken } from '../../component-library';
 
 Use the `name` prop to set the initial letter of the `AvatarToken`. This will be used as the fallback display if no image url is passed to the `src` prop.
 
+Use `Text` component props to change the `variant`, `font-weight`, `font-family`, etc.
+
 <Canvas>
   <Story id="components-componentlibrary-avatartoken--name" />
 </Canvas>
diff --git a/ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.js.snap b/ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.js.snap
index 23dd22341..b67f6c466 100644
--- a/ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.js.snap
+++ b/ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.js.snap
@@ -3,7 +3,7 @@
 exports[`AvatarToken should render correctly 1`] = `
 <div>
   <div
-    class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-token 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--border-color-transparent box--border-style-solid box--border-width-1"
+    class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
     data-testid="avatar-token"
   >
     <img
diff --git a/ui/components/component-library/avatar-token/avatar-token.stories.js b/ui/components/component-library/avatar-token/avatar-token.stories.js
index a40013831..e89756fdd 100644
--- a/ui/components/component-library/avatar-token/avatar-token.stories.js
+++ b/ui/components/component-library/avatar-token/avatar-token.stories.js
@@ -10,7 +10,16 @@ import {
 
 import Box from '../../ui/box/box';
 
+import {
+  AvatarNetwork,
+  BUTTON_LINK_SIZES,
+  BadgeWrapper,
+  ButtonLink,
+  Text,
+} from '..';
+
 import README from './README.mdx';
+
 import { AvatarToken } from './avatar-token';
 import { AVATAR_TOKEN_SIZES } from './avatar-token.constants';
 
@@ -66,13 +75,218 @@ export const DefaultStory = Template.bind({});
 DefaultStory.storyName = 'Default';
 
 export const SizeStory = (args) => (
-  <Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
-    <AvatarToken {...args} size={Size.XS} />
-    <AvatarToken {...args} size={Size.SM} />
-    <AvatarToken {...args} size={Size.MD} />
-    <AvatarToken {...args} size={Size.LG} />
-    <AvatarToken {...args} size={Size.XL} />
-  </Box>
+  <>
+    <Box
+      display={DISPLAY.FLEX}
+      alignItems={AlignItems.baseline}
+      gap={2}
+      marginBottom={4}
+    >
+      <AvatarToken {...args} size={Size.XS} />
+      <AvatarToken {...args} size={Size.SM} />
+      <AvatarToken {...args} size={Size.MD} />
+      <AvatarToken {...args} size={Size.LG} />
+      <AvatarToken {...args} size={Size.XL} />
+    </Box>
+    <Box
+      display={DISPLAY.FLEX}
+      alignItems={AlignItems.flexEnd}
+      gap={2}
+      marginBottom={4}
+    >
+      <AvatarToken {...args} src="" size={Size.XS} />
+      <AvatarToken {...args} src="" size={Size.SM} />
+      <AvatarToken {...args} src="" size={Size.MD} />
+      <AvatarToken {...args} src="" size={Size.LG} />
+      <AvatarToken {...args} src="" size={Size.XL} />
+    </Box>
+    <Text marginBottom={4}>
+      Sizes with{' '}
+      <ButtonLink
+        size={BUTTON_LINK_SIZES.INHERIT}
+        href="/docs/components-componentlibrary-buttonlink--default-story"
+      >
+        AvatarNetwork
+      </ButtonLink>{' '}
+      and{' '}
+      <ButtonLink
+        size={BUTTON_LINK_SIZES.INHERIT}
+        href="/docs/components-componentlibrary-badgewrapper--default-story"
+      >
+        BadgeWrapper
+      </ButtonLink>{' '}
+      components
+    </Text>
+    <Box
+      display={DISPLAY.FLEX}
+      alignItems={AlignItems.flexEnd}
+      gap={2}
+      marginBottom={4}
+    >
+      <BadgeWrapper
+        badge={
+          <AvatarNetwork
+            src="./images/eth_logo.svg"
+            name="ETH"
+            size={Size.XS}
+            borderColor={BackgroundColor.backgroundDefault}
+            borderWidth={2}
+          />
+        }
+      >
+        <AvatarToken {...args} name="ETH" size={Size.XS} />
+      </BadgeWrapper>
+      <BadgeWrapper
+        badge={
+          <AvatarNetwork
+            src="./images/eth_logo.svg"
+            name="ETH"
+            size={Size.XS}
+            borderColor={BackgroundColor.backgroundDefault}
+            borderWidth={2}
+          />
+        }
+      >
+        <AvatarToken {...args} name="ETH" size={Size.SM} />
+      </BadgeWrapper>
+      <BadgeWrapper
+        badge={
+          <AvatarNetwork
+            src="./images/eth_logo.svg"
+            name="ETH"
+            size={Size.XS}
+            borderColor={BackgroundColor.backgroundDefault}
+            borderWidth={2}
+          />
+        }
+      >
+        <AvatarToken {...args} name="ETH" size={Size.MD} />
+      </BadgeWrapper>
+      <BadgeWrapper
+        badge={
+          <AvatarNetwork
+            src="./images/eth_logo.svg"
+            name="ETH"
+            size={Size.XS}
+            borderColor={BackgroundColor.backgroundDefault}
+            borderWidth={2}
+          />
+        }
+      >
+        <AvatarToken {...args} name="ETH" size={Size.LG} />
+      </BadgeWrapper>
+      <BadgeWrapper
+        badge={
+          <AvatarNetwork
+            src="./images/eth_logo.svg"
+            name="ETH"
+            size={Size.SM}
+            borderColor={BackgroundColor.backgroundDefault}
+            borderWidth={2}
+          />
+        }
+      >
+        <AvatarToken {...args} name="ETH" size={Size.XL} />
+      </BadgeWrapper>
+    </Box>
+    <Box display={DISPLAY.FLEX} alignItems={AlignItems.flexEnd} gap={2}>
+      <BadgeWrapper
+        badge={
+          <AvatarNetwork
+            name="ETH"
+            size={Size.XS}
+            borderColor={BackgroundColor.backgroundDefault}
+            borderWidth={2}
+          />
+        }
+      >
+        <AvatarToken
+          {...args}
+          src=""
+          name="ETH"
+          size={Size.XS}
+          borderColor={BorderColor.borderDefault}
+          borderSize={2}
+        />
+      </BadgeWrapper>
+      <BadgeWrapper
+        badge={
+          <AvatarNetwork
+            name="ETH"
+            size={Size.XS}
+            borderColor={BackgroundColor.backgroundDefault}
+            borderWidth={2}
+          />
+        }
+      >
+        <AvatarToken
+          {...args}
+          name="ETH"
+          src=""
+          size={Size.SM}
+          borderColor={BorderColor.borderDefault}
+          borderSize={2}
+        />
+      </BadgeWrapper>
+      <BadgeWrapper
+        badge={
+          <AvatarNetwork
+            name="ETH"
+            size={Size.XS}
+            borderColor={BackgroundColor.backgroundDefault}
+            borderWidth={2}
+          />
+        }
+      >
+        <AvatarToken
+          {...args}
+          name="ETH"
+          src=""
+          size={Size.MD}
+          borderColor={BorderColor.borderDefault}
+          borderSize={2}
+        />
+      </BadgeWrapper>
+      <BadgeWrapper
+        badge={
+          <AvatarNetwork
+            name="ETH"
+            size={Size.XS}
+            borderColor={BackgroundColor.backgroundDefault}
+            borderWidth={2}
+          />
+        }
+      >
+        <AvatarToken
+          {...args}
+          name="ETH"
+          src=""
+          size={Size.LG}
+          borderColor={BorderColor.borderDefault}
+          borderSize={2}
+        />
+      </BadgeWrapper>
+      <BadgeWrapper
+        badge={
+          <AvatarNetwork
+            name="ETH"
+            size={Size.SM}
+            borderColor={BackgroundColor.backgroundDefault}
+            borderWidth={2}
+          />
+        }
+      >
+        <AvatarToken
+          {...args}
+          name="ETH"
+          src=""
+          size={Size.XL}
+          borderColor={BorderColor.borderDefault}
+          borderSize={2}
+        />
+      </BadgeWrapper>
+    </Box>
+  </>
 );
 SizeStory.storyName = 'Size';
 
diff --git a/ui/components/component-library/avatar-token/avatar-token.test.js b/ui/components/component-library/avatar-token/avatar-token.test.js
index 3a711782d..53d8e8d87 100644
--- a/ui/components/component-library/avatar-token/avatar-token.test.js
+++ b/ui/components/component-library/avatar-token/avatar-token.test.js
@@ -73,10 +73,10 @@ describe('AvatarToken', () => {
       </>,
     );
     expect(getByTestId(TextColor.successDefault)).toHaveClass(
-      `box--color-${TextColor.successDefault}`,
+      `mm-text--color-${TextColor.successDefault}`,
     );
     expect(getByTestId(TextColor.errorDefault)).toHaveClass(
-      `box--color-${TextColor.errorDefault}`,
+      `mm-text--color-${TextColor.errorDefault}`,
     );
   });
   // background color
diff --git a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
index 25a318cad..bf7783940 100644
--- a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
+++ b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
@@ -7,7 +7,7 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
     data-testid="picker-network"
   >
     <div
-      class="box mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network 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--border-color-transparent box--border-style-solid box--border-width-1"
+      class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
     >
       I
     </div>
diff --git a/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap b/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
index 3eea81879..4169c58f3 100644
--- a/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
+++ b/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
@@ -7,7 +7,7 @@ exports[`TagUrl should render the label inside the TagUrl 1`] = `
     data-testid="tag-url"
   >
     <div
-      class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon 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--border-color-transparent box--border-style-solid box--border-width-1"
+      class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
     >
       <span
         class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-default"