feat(fuselage): accept objectFit css properties on Avatar (#1943)

Author: juliajforesti

.changeset/cruel-owls-arrive.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/fuselage': minor
+---
+
+feat(fuselage): accept all `objectFit` css properties on `Avatar` component

packages/fuselage/src/components/Avatar/Avatar.styles.scss

@@ -8,6 +8,7 @@ $avatar-stack-background-color: theme(
 );
 
 $sizes: 16, 18, 20, 24, 28, 32, 36, 40, 48, 124, 200, 332;
+$object-fit-values: contain, cover, fill, none, scale-down;
 
 .rcx-avatar {
   display: inline-flex;
@@ -47,7 +48,11 @@ $sizes: 16, 18, 20, 24, 28, 32, 36, 40, 48, 124, 200, 332;
     }
 
     &--object-fit {
-      object-fit: contain;
+      @each $value in $object-fit-values {
+        &-#{$value} {
+          object-fit: $value;
+        }
+      }
     }
 
     &--rounded {

packages/fuselage/src/components/Avatar/Avatar.tsx

@@ -1,27 +1,27 @@
-import type { AllHTMLAttributes } from 'react';
+import type { AllHTMLAttributes, CSSProperties } from 'react';
 
 import AvatarContainer, { type AvatarContainerProps } from './AvatarContainer';
 
 export type AvatarProps = AvatarContainerProps & {
   rounded?: boolean;
-  objectFit?: boolean;
+  objectFit?: CSSProperties['objectFit'];
   url: string;
 } & Omit<AllHTMLAttributes<HTMLImageElement>, 'size'>;
 
 const Avatar = ({
   size = 'x36',
   rounded = false,
-  objectFit = false,
+  objectFit,
   url,
   className,
   alt,
   ...props
 }: AvatarProps) => {
   const innerClass = [
     'rcx-avatar__element',
-    objectFit && 'rcx-avatar__element--object-fit',
     size && `rcx-avatar__element--${size}`,
     rounded && 'rcx-avatar__element--rounded',
+    objectFit && `rcx-avatar__element--object-fit-${objectFit}`,
   ]
     .filter(Boolean)
     .join(' ');