feat: Remove Box from Avatar component (#326)

Co-authored-by: Guilherme Gazzo <guilherme@gazzo.xyz>

Author: tiagoevanp

packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Avatar_Default.png

@@ -1,60 +1,60 @@
 import PropTypes from 'prop-types';
-import React, { useContext, createContext } from 'react';
+import React from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
 
-import { createPropType } from '../../helpers/createPropType';
-import { size } from '../../styleTokens';
-import { Box } from '../Box';
-
-const AvatarContext = createContext({
-  baseUrl: '',
-});
+import { prependClassName } from '../../helpers/prependClassName';
 
 export function Avatar({
   title,
+  size = 'x36',
   rounded = false,
   url,
-  size = 'x36',
   ...props
 }) {
-  const { baseUrl } = useContext(AvatarContext);
+  props.className = prependClassName(
+    props.className,
+    ['rcx-box rcx-box--full rcx-avatar', size && `rcx-avatar--${size}`]
+      .filter(Boolean)
+      .join(' ')
+  );
+  const innerClass = [
+    'rcx-avatar__element',
+    rounded && 'rcx-avatar__element--rounded',
+    size && `rcx-avatar--${size}`,
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   return (
-    <Box
-      is='figure'
-      rcx-avatar
-      aria-label={title}
-      {...props}
-      width={size}
-      height={size}
-      verticalAlign='middle'
-    >
-      <Box
-        is='img'
-        {...props}
-        rcx-avatar__element
-        rcx-avatar__element--rounded={rounded}
-        src={`${baseUrl}${url}`}
-        width={size}
-        height={size}
-      />
-    </Box>
+    <figure aria-label={title} {...props}>
+      <img src={`${url}`} className={`${innerClass}`} />
+    </figure>
   );
 }
 
-Avatar.Context = AvatarContext;
-
 Avatar.propTypes = {
   rounded: PropTypes.bool,
-  size: createPropType(size),
+  size: PropTypes.oneOf([
+    'x16',
+    'x18',
+    'x20',
+    'x24',
+    'x28',
+    'x32',
+    'x36',
+    'x48',
+    'x124',
+    'x200',
+    'x332',
+  ]),
   title: PropTypes.string,
   url: PropTypes.string.isRequired,
 };
 
-const AvatarStack = ({ children, ...props }) => (
-  <Box rcx-avatar-stack {...props}>
+const AvatarStack = ({ children, className, ...props }) => (
+  <div className={prependClassName('rcx-avatar-stack', className)} {...props}>
     {flattenChildren(children).reverse()}
-  </Box>
+  </div>
 );
 
 Avatar.Stack = AvatarStack;

packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Avatar_Rounded.png

@@ -1,11 +1,16 @@
 @use '../../styles/colors.scss';
 @use '../../styles/lengths.scss';
+@use '../../styles/functions.scss';
 
 $avatar-stack-background-color: theme('avatar-background-color', colors.surface());
 
+$sizes: 16, 18, 20, 24, 28, 32, 36, 48, 124, 200, 332;
+
 .rcx-avatar {
   display: inline-flex;
 
+  vertical-align: middle;
+
   &__element {
     position: relative;
 
@@ -33,4 +38,10 @@ $avatar-stack-background-color: theme('avatar-background-color', colors.surface(
       }
     }
   }
+
+  @each $size in $sizes {
+    &--x#{$size} {
+      @include square(functions.to-rem($size));
+    }
+  }
 }

packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Avatar_Stack.png

@@ -1,13 +1,17 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import { Avatar, Box } from '..';
 import { prependClassName } from '../../helpers/prependClassName';
-import { Avatar } from '../Avatar';
 import { withBoxStyling } from '../Box/withBoxStyling';
 import { Icon } from '../Icon';
 import Margins from '../Margins';
 
-const defaultRenderThumb = ({ url }) => <Avatar size='x20' url={url} />;
+const defaultRenderThumb = ({ url }) => (
+  <Box rcx-avatar>
+    <Avatar size='x20' url={url} />
+  </Box>
+);
 const defaultRenderDismissSymbol = () => <Icon name='cross' size='x16' />;
 
 const Chip = ({

packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Avatar_Stack_Rounded.png

@@ -47,7 +47,11 @@ export const ModalHeader = ({ children, ...props }) => (
   </Margins>
 );
 
-export const ModalThumb = (props) => <Avatar size='x32' {...props} />;
+export const ModalThumb = (props) => (
+  <Box>
+    <Avatar size='x32' {...props} />
+  </Box>
+);
 
 export const ModalTitle = ({ children, ...props }) => (
   <Flex.Item grow={1} shrink={1}>