avatar base component housekeeping (#16583)

* replace base avatar with avatar base component

* updated tests

* updated description for props

* updated docs and background colors

* updated snapshot

* replaced size with avatar size constant

* added tests and fixed indentation

* fixed indentation in readme

ui/components/component-library/avatar-account/avatar-account.js

@@ -3,14 +3,14 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import Jazzicon from '../../ui/jazzicon/jazzicon.component';
 import BlockieIdenticon from '../../ui/identicon/blockieIdenticon/blockieIdenticon.component';
-import { BaseAvatar } from '../base-avatar';
+import { AvatarBase } from '../avatar-base';
 
 import { SIZES } from '../../../helpers/constants/design-system';
 import { DIAMETERS, TYPES } from './avatar-account.constants';
 
 export const AvatarAccount = ({ size, address, className, type, ...props }) => {
   return (
-    <BaseAvatar
+    <AvatarBase
       size={size}
       className={classnames('avatar-account', className)}
       {...props}
@@ -28,7 +28,7 @@ export const AvatarAccount = ({ size, address, className, type, ...props }) => {
           borderRadius="50%"
         />
       )}
-    </BaseAvatar>
+    </AvatarBase>
   );
 };
 

ui/components/component-library/avatar-base/README.mdx

@@ -0,0 +1,97 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import { AvatarBase } from './avatar-base';
+
+### This is a base component. It should not be used in your feature code directly but as a "base" for other UI components
+
+# AvatarBase
+
+The `AvatarBase` is a wrapper component responsible for enforcing dimensions and border radius for Avatar components
+
+<Canvas>
+  <Story id="ui-components-component-library-avatar-base-avatar-base-stories-js--default-story" />
+</Canvas>
+
+## Props
+
+The `AvatarBase` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props.
+
+<ArgsTable of={AvatarBase} />
+
+### Size
+
+Use the `size` prop to set the size of the `AvatarBase`.
+
+Possible sizes include:
+
+- `xs` 16px
+- `sm` 24px
+- `md` 32px
+- `lg` 40px
+- `xl` 48px
+
+Defaults to `md`
+
+<Canvas>
+  <Story id="ui-components-component-library-avatar-base-avatar-base-stories-js--size" />
+</Canvas>
+
+```jsx
+import { AVATAR_BASE_SIZES } from '../ui/component-library/avatar-base';
+import { AvatarBase } from '../../component-library';
+<AvatarBase size={AVATAR_BASE_SIZES.XS} />
+<AvatarBase size={AVATAR_BASE_SIZES.SM} />
+<AvatarBase size={AVATAR_BASE_SIZES.MD} />
+<AvatarBase size={AVATAR_BASE_SIZES.LG} />
+<AvatarBase size={AVATAR_BASE_SIZES.XL} />
+```
+
+### Children
+
+The `AvatarBase` component can contain images, icons or text
+
+<Canvas>
+  <Story id="ui-components-component-library-avatar-base-avatar-base-stories-js--children" />
+</Canvas>
+
+```jsx
+import { AvatarBase } from '../../component-library';
+<AvatarBase>
+  <img src="./images/eth_logo.svg" />
+</AvatarBase>
+<AvatarBase>
+  <img width="100%" src="./images/arbitrum.svg" />
+</AvatarBase>
+<AvatarBase>
+  <img width="100%" src="./images/avax-token.png" />
+</AvatarBase>
+<AvatarBase>A</AvatarBase>
+```
+
+### Color, Background Color And Border Color
+
+Use the `color`, `backgroundColor` and `borderColor` props to set the text color, background-color and border-color of the `AvatarBase`.
+
+<Canvas>
+  <Story id="ui-components-component-library-avatar-base-avatar-base-stories-js--color-background-color-and-border-color" />
+</Canvas>
+
+```jsx
+import { COLORS } from '../../../helpers/constants/design-system';
+import { AvatarBase } from '../../component-library';
+<AvatarBase>B</AvatarBase>
+<AvatarBase
+  backgroundColor={COLORS.GOERLI}
+  borderColor={COLORS.GOERLI}
+  color={COLORS.PRIMARY_INVERSE}
+  >
+  G
+</AvatarBase>
+<AvatarBase
+  backgroundColor={COLORS.SEPOLIA}
+  borderColor={COLORS.SEPOLIA}
+  color={COLORS.PRIMARY_INVERSE}
+>
+  S
+</AvatarBase>
+```

ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.js.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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"
+    data-testid="avatar-base"
+  />
+</div>
+`;

ui/components/component-library/avatar-base/avatar-base.constants.js

@@ -0,0 +1,9 @@
+import { SIZES } from '../../../helpers/constants/design-system';
+
+export const AVATAR_BASE_SIZES = {
+  XS: SIZES.XS,
+  SM: SIZES.SM,
+  MD: SIZES.MD,
+  LG: SIZES.LG,
+  XL: SIZES.XL,
+};

ui/components/component-library/avatar-base/avatar-base.js

@@ -3,10 +3,11 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 import Box from '../../ui/box/box';
-import { COLORS, SIZES } from '../../../helpers/constants/design-system';
+import { COLORS } from '../../../helpers/constants/design-system';
+import { AVATAR_BASE_SIZES } from './avatar-base.constants';
 
-export const BaseAvatar = ({
+export const AvatarBase = ({
-  size = SIZES.MD,
+  size = AVATAR_BASE_SIZES.MD,
   children,
   backgroundColor = COLORS.BACKGROUND_ALTERNATIVE,
   borderColor = COLORS.BORDER_DEFAULT,
@@ -16,8 +17,8 @@ export const BaseAvatar = ({
 }) => (
   <Box
     className={classnames(
-      'base-avatar',
+      'mm-avatar-base',
-      `base-avatar--size-${size}`,
+      `mm-avatar-base--size-${size}`,
       className,
     )}
     {...{ backgroundColor, borderColor, color, ...props }}
@@ -26,29 +27,29 @@ export const BaseAvatar = ({
   </Box>
 );
 
-BaseAvatar.propTypes = {
+AvatarBase.propTypes = {
   /**
-   * The size of the BaseAvatar.
+   * The size of the AvatarBase.
-   * Possible values could be 'SIZES.XS', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', 'SIZES.XL'
+   * Possible values could be 'AVATAR_BASE_SIZES.XS'(16px), 'AVATAR_BASE_SIZES.SM'(24px), 'AVATAR_BASE_SIZES.MD'(32px), 'AVATAR_BASE_SIZES.LG'(40px), 'AVATAR_BASE_SIZES.XL'(48px)
-   * Defaults to SIZES.MD
+   * Defaults to AVATAR_BASE_SIZES.MD
    */
-  size: PropTypes.oneOf(Object.values(SIZES)),
+  size: PropTypes.oneOf(Object.values(AVATAR_BASE_SIZES)),
   /**
-   * The children to be rendered inside the BaseAvatar
+   * The children to be rendered inside the AvatarBase
    */
   children: PropTypes.node,
   /**
-   * The background color of the BaseAvatar
+   * The background color of the AvatarBase
    * Defaults to COLORS.BACKGROUND_ALTERNATIVE
    */
   backgroundColor: Box.propTypes.backgroundColor,
   /**
-   * The background color of the BaseAvatar
+   * The background color of the AvatarBase
    * Defaults to COLORS.BORDER_DEFAULT
    */
   borderColor: Box.propTypes.borderColor,
   /**
-   * The color of the text inside the BaseAvatar
+   * The color of the text inside the AvatarBase
    * Defaults to COLORS.TEXT_DEFAULT
    */
   color: Box.propTypes.color,
@@ -57,7 +58,7 @@ BaseAvatar.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * BaseAvatar also accepts all Box props including but not limited to
+   * AvatarBase also accepts all Box props including but not limited to
    * className, as(change root element of HTML element) and margin props
    */
   ...Box.propTypes,

ui/components/component-library/avatar-base/avatar-base.scss

@@ -1,4 +1,4 @@
-.base-avatar {
+.mm-avatar-base {
   --avatar-size: var(--size, 16px);
 
   &--size-xs {

ui/components/component-library/avatar-base/avatar-base.stories.js

@@ -3,7 +3,6 @@ import {
   ALIGN_ITEMS,
   COLORS,
   DISPLAY,
-  SIZES,
   TEXT_COLORS,
   BACKGROUND_COLORS,
   BORDER_COLORS,
@@ -12,7 +11,8 @@ import {
 import Box from '../../ui/box/box';
 
 import README from './README.mdx';
-import { BaseAvatar } from './base-avatar';
+import { AvatarBase } from './avatar-base';
+import { AVATAR_BASE_SIZES } from './avatar-base.constants';
 
 const marginSizeKnobOptions = [
   0,
@@ -32,9 +32,9 @@ const marginSizeKnobOptions = [
 ];
 
 export default {
-  title: 'Components/ComponentLibrary/BaseAvatar',
+  title: 'Components/ComponentLibrary/AvatarBase',
   id: __filename,
-  component: BaseAvatar,
+  component: AvatarBase,
   parameters: {
     docs: {
       page: README,
@@ -43,7 +43,7 @@ export default {
   argTypes: {
     size: {
       control: 'select',
-      options: Object.values(SIZES),
+      options: Object.values(AVATAR_BASE_SIZES),
     },
     color: {
       options: Object.values(TEXT_COLORS),
@@ -85,40 +85,40 @@ export default {
     },
   },
   args: {
-    size: SIZES.MD,
+    size: AVATAR_BASE_SIZES.MD,
     color: COLORS.TEXT_DEFAULT,
     backgroundColor: COLORS.BACKGROUND_ALTERNATIVE,
     borderColor: COLORS.BORDER_DEFAULT,
   },
 };
 
-export const DefaultStory = (args) => <BaseAvatar {...args}>B</BaseAvatar>;
+export const DefaultStory = (args) => <AvatarBase {...args}>B</AvatarBase>;
 
 DefaultStory.storyName = 'Default';
 
 export const Size = (args) => (
   <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
-    <BaseAvatar {...args} size={SIZES.XS} />
+    <AvatarBase {...args} size={AVATAR_BASE_SIZES.XS} />
-    <BaseAvatar {...args} size={SIZES.SM} />
+    <AvatarBase {...args} size={AVATAR_BASE_SIZES.SM} />
-    <BaseAvatar {...args} size={SIZES.MD} />
+    <AvatarBase {...args} size={AVATAR_BASE_SIZES.MD} />
-    <BaseAvatar {...args} size={SIZES.LG} />
+    <AvatarBase {...args} size={AVATAR_BASE_SIZES.LG} />
-    <BaseAvatar {...args} size={SIZES.XL} />
+    <AvatarBase {...args} size={AVATAR_BASE_SIZES.XL} />
   </Box>
 );
 
 export const Children = (args) => (
   <Box display={DISPLAY.FLEX} gap={1}>
-    <BaseAvatar {...args}>
+    <AvatarBase {...args}>
       <img src="./images/eth_logo.svg" />
-    </BaseAvatar>
+    </AvatarBase>
-    <BaseAvatar {...args}>
+    <AvatarBase {...args}>
       <img width="100%" src="./images/arbitrum.svg" />
-    </BaseAvatar>
+    </AvatarBase>
-    <BaseAvatar {...args}>
+    <AvatarBase {...args}>
       <img width="100%" src="./images/avax-token.png" />
-    </BaseAvatar>
+    </AvatarBase>
-    <BaseAvatar {...args}>A</BaseAvatar>
+    <AvatarBase {...args}>A</AvatarBase>
-    <BaseAvatar
+    <AvatarBase
       {...args}
       backgroundColor={COLORS.INFO_MUTED}
       borderColor={COLORS.INFO_MUTED}
@@ -127,28 +127,28 @@ export const Children = (args) => (
         className="fa fa-user"
         style={{ color: 'var(--color-info-default)' }}
       />
-    </BaseAvatar>
+    </AvatarBase>
   </Box>
 );
 
 export const ColorBackgroundColorAndBorderColor = (args) => (
   <Box display={DISPLAY.FLEX} gap={1}>
-    <BaseAvatar {...args}>B</BaseAvatar>
+    <AvatarBase {...args}>B</AvatarBase>
-    <BaseAvatar
+    <AvatarBase
       {...args}
       backgroundColor={COLORS.GOERLI}
       borderColor={COLORS.GOERLI}
-      color={COLORS.PRIMARY_INVERSE} // TO DO: Update once test network colors have been added to design tokens
+      color={COLORS.PRIMARY_INVERSE}
     >
       G
-    </BaseAvatar>
+    </AvatarBase>
-    <BaseAvatar
+    <AvatarBase
       {...args}
       backgroundColor={COLORS.SEPOLIA}
       borderColor={COLORS.SEPOLIA}
-      color={COLORS.PRIMARY_INVERSE} // TO DO: Update once test network colors have been added to design tokens
+      color={COLORS.PRIMARY_INVERSE}
     >
       S
-    </BaseAvatar>
+    </AvatarBase>
   </Box>
 );

ui/components/component-library/avatar-base/avatar-base.test.js

@@ -0,0 +1,124 @@
+/* eslint-disable jest/require-top-level-describe */
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { COLORS } from '../../../helpers/constants/design-system';
+
+import { AvatarBase } from './avatar-base';
+
+describe('AvatarBase', () => {
+  it('should render correctly', () => {
+    const { getByTestId, container } = render(
+      <AvatarBase data-testid="avatar-base" />,
+    );
+    expect(getByTestId('avatar-base')).toBeDefined();
+    expect(container).toMatchSnapshot();
+  });
+  it('should render with different size classes', () => {
+    const { getByTestId } = render(
+      <>
+        <AvatarBase size="xs" data-testid="avatar-base-xs" />
+        <AvatarBase size="sm" data-testid="avatar-base-sm" />
+        <AvatarBase size="md" data-testid="avatar-base-md" />
+        <AvatarBase size="lg" data-testid="avatar-base-lg" />
+        <AvatarBase size="xl" data-testid="avatar-base-xl" />
+      </>,
+    );
+    expect(getByTestId('avatar-base-xs')).toHaveClass(
+      'mm-avatar-base--size-xs',
+    );
+    expect(getByTestId('avatar-base-sm')).toHaveClass(
+      'mm-avatar-base--size-sm',
+    );
+    expect(getByTestId('avatar-base-md')).toHaveClass(
+      'mm-avatar-base--size-md',
+    );
+    expect(getByTestId('avatar-base-lg')).toHaveClass(
+      'mm-avatar-base--size-lg',
+    );
+    expect(getByTestId('avatar-base-xl')).toHaveClass(
+      'mm-avatar-base--size-xl',
+    );
+  });
+  // className
+  it('should render with custom className', () => {
+    const { getByTestId } = render(
+      <AvatarBase data-testid="avatar-base" className="test-class" />,
+    );
+    expect(getByTestId('avatar-base')).toHaveClass('test-class');
+  });
+  // children
+  it('should render children', () => {
+    render(
+      <AvatarBase data-testid="avatar-base">
+        <img width="100%" src="./images/arbitrum.svg" />
+      </AvatarBase>,
+    );
+    const image = screen.getByRole('img');
+    expect(image).toBeDefined();
+    expect(image).toHaveAttribute('src', './images/arbitrum.svg');
+  });
+  // color
+  it('should render with different colors', () => {
+    const { getByTestId } = render(
+      <>
+        <AvatarBase
+          color={COLORS.SUCCESS_DEFAULT}
+          data-testid={COLORS.SUCCESS_DEFAULT}
+        />
+        <AvatarBase
+          color={COLORS.ERROR_DEFAULT}
+          data-testid={COLORS.ERROR_DEFAULT}
+        />
+      </>,
+    );
+    expect(getByTestId(COLORS.SUCCESS_DEFAULT)).toHaveClass(
+      `box--color-${COLORS.SUCCESS_DEFAULT}`,
+    );
+    expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass(
+      `box--color-${COLORS.ERROR_DEFAULT}`,
+    );
+  });
+  // background color
+  it('should render with different background colors', () => {
+    const { getByTestId } = render(
+      <>
+        <AvatarBase
+          backgroundColor={COLORS.SUCCESS_DEFAULT}
+          data-testid={COLORS.SUCCESS_DEFAULT}
+        />
+        <AvatarBase
+          backgroundColor={COLORS.ERROR_DEFAULT}
+          data-testid={COLORS.ERROR_DEFAULT}
+        />
+      </>,
+    );
+    expect(getByTestId(COLORS.SUCCESS_DEFAULT)).toHaveClass(
+      `box--background-color-${COLORS.SUCCESS_DEFAULT}`,
+    );
+    expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass(
+      `box--background-color-${COLORS.ERROR_DEFAULT}`,
+    );
+  });
+  // border color
+  it('should render with different border colors', () => {
+    const { getByTestId } = render(
+      <>
+        <AvatarBase
+          borderColor={COLORS.SUCCESS_DEFAULT}
+          data-testid={COLORS.SUCCESS_DEFAULT}
+        />
+        <AvatarBase
+          borderColor={COLORS.ERROR_DEFAULT}
+          data-testid={COLORS.ERROR_DEFAULT}
+        />
+      </>,
+    );
+    expect(getByTestId(COLORS.SUCCESS_DEFAULT)).toHaveClass(
+      `box--border-color-${COLORS.SUCCESS_DEFAULT}`,
+    );
+    expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass(
+      `box--border-color-${COLORS.ERROR_DEFAULT}`,
+    );
+  });
+});

ui/components/component-library/avatar-base/index.js

@@ -0,0 +1,2 @@
+export { AvatarBase } from './avatar-base';
+export { AVATAR_BASE_SIZES } from './avatar-base.constants';

ui/components/component-library/avatar-favicon/avatar-favicon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { BaseAvatar } from '../base-avatar';
+import { AvatarBase } from '../avatar-base';
 import Box from '../../ui/box/box';
 import { ICON_NAMES, Icon } from '../icon';
 import {
@@ -23,7 +23,7 @@ export const AvatarFavicon = ({
   ...props
 }) => {
   return (
-    <BaseAvatar
+    <AvatarBase
       size={size}
       display={DISPLAY.FLEX}
       alignItems={ALIGN_ITEMS.CENTER}
@@ -42,7 +42,7 @@ export const AvatarFavicon = ({
           {...fallbackIconProps}
         />
       )}
-    </BaseAvatar>
+    </AvatarBase>
   );
 };
 

ui/components/component-library/avatar-network/avatar-network.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { BaseAvatar } from '../base-avatar';
+import { AvatarBase } from '../avatar-base';
 import Box from '../../ui/box/box';
 
 import {
@@ -36,7 +36,7 @@ export const AvatarNetwork = ({
   };
 
   return (
-    <BaseAvatar
+    <AvatarBase
       size={size}
       display={DISPLAY.FLEX}
       alignItems={ALIGN_ITEMS.CENTER}
@@ -73,7 +73,7 @@ export const AvatarNetwork = ({
           />
         </>
       )}
-    </BaseAvatar>
+    </AvatarBase>
   );
 };
 

ui/components/component-library/avatar-network/avatar-network.stories.js

@@ -94,14 +94,14 @@ export const ColorBackgroundColorAndBorderColor = (args) => (
       backgroundColor={COLORS.GOERLI}
       borderColor={COLORS.GOERLI}
       networkName="G"
-      color={COLORS.PRIMARY_INVERSE} // This will have to be added to the BaseAvatar component as a prop so we can change the color of the text and to the base avatar
+      color={COLORS.PRIMARY_INVERSE} // This will have to be added to the AvatarBase component as a prop so we can change the color of the text and to the base avatar
     />
     <AvatarNetwork
       {...args}
       backgroundColor={COLORS.SEPOLIA}
       borderColor={COLORS.SEPOLIA}
       networkName="G"
-      color={COLORS.PRIMARY_INVERSE} // This will have to be added to the BaseAvatar component as a prop so we can change the color of the text and to the base avatar
+      color={COLORS.PRIMARY_INVERSE} // This will have to be added to the AvatarBase component as a prop so we can change the color of the text and to the base avatar
     />
   </Box>
 );

ui/components/component-library/avatar-token/avatar-token.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import Box from '../../ui/box/box';
-import { BaseAvatar } from '../base-avatar';
+import { AvatarBase } from '../avatar-base';
 
 import {
   COLORS,
@@ -36,7 +36,7 @@ export const AvatarToken = ({
   const fallbackString = tokenName && tokenName[0] ? tokenName[0] : '?';
 
   return (
-    <BaseAvatar
+    <AvatarBase
       size={size}
       display={DISPLAY.FLEX}
       alignItems={ALIGN_ITEMS.CENTER}
@@ -71,7 +71,7 @@ export const AvatarToken = ({
           />
         </>
       )}
-    </BaseAvatar>
+    </AvatarBase>
   );
 };
 

ui/components/component-library/avatar-token/avatar-token.stories.js

@@ -94,14 +94,14 @@ export const ColorBackgroundColorAndBorderColor = (args) => (
       backgroundColor={COLORS.GOERLI}
       borderColor={COLORS.GOERLI}
       tokenName="G"
-      color={COLORS.PRIMARY_INVERSE} // TODO: This will have to be added to the BaseAvatar component as a prop so we can change the color of the text and to the base avatar
+      color={COLORS.PRIMARY_INVERSE} // TODO: This will have to be added to the AvatarBase component as a prop so we can change the color of the text and to the base avatar
     />
     <AvatarToken
       {...args}
       backgroundColor={COLORS.SEPOLIA}
       borderColor={COLORS.SEPOLIA}
       tokenName="G"
-      color={COLORS.PRIMARY_INVERSE} // TODO: This will have to be added to the BaseAvatar component as a prop so we can change the color of the text and to the base avatar
+      color={COLORS.PRIMARY_INVERSE} // TODO: This will have to be added to the AvatarBase component as a prop so we can change the color of the text and to the base avatar
     />
   </Box>
 );

ui/components/component-library/base-avatar/README.mdx

@@ -1,53 +0,0 @@
-import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-
-import { BaseAvatar } from './base-avatar';
-
-### This is a base component. It should not be used in your feature code directly but as a "base" for other UI components
-
-# BaseAvatar
-
-The `BaseAvatar` is a wrapper component responsible for enforcing dimensions and border radius for Avatar components
-
-<Canvas>
-  <Story id="ui-components-component-library-base-avatar-base-avatar-stories-js--default-story" />
-</Canvas>
-
-## Props
-
-The `BaseAvatar` accepts all props below as well as all [Box](/ui-components-ui-box-box-stories-js--default-story) component props.
-
-<ArgsTable of={BaseAvatar} />
-
-### Size
-
-Use the `size` prop to set the size of the `BaseAvatar`.
-
-Possible sizes include:
-
-- `xs` 16px
-- `sm` 24px
-- `md` 32px
-- `lg` 40px
-- `xl` 48px
-
-Defaults to `md`
-
-<Canvas>
-  <Story id="ui-components-component-library-base-avatar-base-avatar-stories-js--size" />
-</Canvas>
-
-### Children
-
-The `BaseAvatar` component can contain images, icons or text
-
-<Canvas>
-  <Story id="ui-components-component-library-base-avatar-base-avatar-stories-js--children" />
-</Canvas>
-
-### Color, Background Color And Border Color
-
-Use the `color`, `backgroundColor` and `borderColor` props to set the text color, background-color and border-color of the s of the `BaseAvatar`.
-
-<Canvas>
-  <Story id="ui-components-component-library-base-avatar-base-avatar-stories-js--color-background-color-and-border-color" />
-</Canvas>

ui/components/component-library/base-avatar/base-avatar.test.js

@@ -1,28 +0,0 @@
-/* eslint-disable jest/require-top-level-describe */
-import { render } from '@testing-library/react';
-import React from 'react';
-
-import { BaseAvatar } from './base-avatar';
-
-describe('BaseAvatar', () => {
-  it('should render correctly', () => {
-    const { getByTestId } = render(<BaseAvatar data-testid="base-avatar" />);
-    expect(getByTestId('base-avatar')).toBeDefined();
-  });
-  it('should render with different size classes', () => {
-    const { getByTestId } = render(
-      <>
-        <BaseAvatar size="xs" data-testid="base-avatar-xs" />
-        <BaseAvatar size="sm" data-testid="base-avatar-sm" />
-        <BaseAvatar size="md" data-testid="base-avatar-md" />
-        <BaseAvatar size="lg" data-testid="base-avatar-lg" />
-        <BaseAvatar size="xl" data-testid="base-avatar-xl" />
-      </>,
-    );
-    expect(getByTestId('base-avatar-xs')).toHaveClass('base-avatar--size-xs');
-    expect(getByTestId('base-avatar-sm')).toHaveClass('base-avatar--size-sm');
-    expect(getByTestId('base-avatar-md')).toHaveClass('base-avatar--size-md');
-    expect(getByTestId('base-avatar-lg')).toHaveClass('base-avatar--size-lg');
-    expect(getByTestId('base-avatar-xl')).toHaveClass('base-avatar--size-xl');
-  });
-});

ui/components/component-library/base-avatar/index.js

@@ -1 +0,0 @@
-export { BaseAvatar } from './base-avatar';

ui/components/component-library/component-library-components.scss

@@ -9,7 +9,7 @@
 @import 'icon/icon';
 @import 'label/label';
 @import 'tag/tag';
-@import 'base-avatar/base-avatar';
+@import 'avatar-base/avatar-base';
 @import 'avatar-account/avatar-account';
 @import 'avatar-favicon/avatar-favicon';
 @import 'avatar-network/avatar-network';

ui/components/component-library/index.js

@@ -3,7 +3,7 @@ export { AvatarFavicon } from './avatar-favicon';
 export { AvatarNetwork } from './avatar-network';
 export { AvatarToken } from './avatar-token';
 export { AvatarWithBadge } from './avatar-with-badge';
-export { BaseAvatar } from './base-avatar';
+export { AvatarBase } from './avatar-base';
 export { Button } from './button';
 export { ButtonBase } from './button-base';
 export { ButtonIcon } from './button-icon';

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 base-avatar base-avatar--size-xs 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-avatar-base mm-avatar-base--size-xs 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"
     >
       I
     </div>

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 base-avatar base-avatar--size-md 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-avatar-base mm-avatar-base--size-md 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"
     >
       <div
         aria-label="avatar-favicon"