Moving fallback logic to AvatarBase

MetaMask · Mar 16, 2023 · c2d0934 · c2d0934
1 parent d45c4ed
commit c2d0934
Show file tree

Hide file tree

Showing 8 changed files with 299 additions and 37 deletions.
diff --git 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 font-size of the `AvatarBase` is based on the size prop to override the font-size use the `variant` prop.
+
 <Canvas>
   <Story id="components-componentlibrary-avatarbase--size" />
 </Canvas>

diff --git a/ui/components/component-library/avatar-base/avatar-base.js b/ui/components/component-library/avatar-base/avatar-base.js
@@ -2,12 +2,19 @@ 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,
 } from '../../../helpers/constants/design-system';
+
+import { Text } from '../text';
+
 import { AVATAR_BASE_SIZES } from './avatar-base.constants';
 
 export const AvatarBase = ({
@@ -18,19 +25,35 @@ 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}
+      {...{ backgroundColor, borderColor, color, ...props }}
+    >
+      {children}
+    </Text>
+  );
+};
 AvatarBase.propTypes = {
   /**
    * The size of the AvatarBase.
@@ -62,8 +85,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
@@ -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
@@ -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-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 the `fallbackTextProps` to access the `Text` component props of the fallback text.
+
 <Canvas>
   <Story id="components-componentlibrary-avatarnetwork--name" />
 </Canvas>

diff --git 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: {
@@ -50,6 +50,9 @@ export default {
     showHalo: {
       control: 'boolean',
     },
+    fallbackTextProps: {
+      control: 'object',
+    },
   },
   args: {
     name: 'Arbitrum One',
@@ -67,13 +70,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-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 the `fallbackTextProps` to access the `Text` component props of the fallback text.
+
 <Canvas>
   <Story id="components-componentlibrary-avatartoken--name" />
 </Canvas>