feat(fuselage): accept objectFit css properties on Avatar

.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

@@ -47,7 +47,25 @@ $sizes: 16, 18, 20, 24, 28, 32, 36, 40, 48, 124, 200, 332;
     }
 
     &--object-fit {
-      object-fit: contain;
+      &--contain {
+        object-fit: contain;
+      }
+
+      &--cover {
+        object-fit: cover;
+      }
+
+      &--fill {
+        object-fit: fill;
+      }
+
+      &--none {
+        object-fit: none;
+      }
+
+      &--scale-down {
+        object-fit: scale-down;
+      }
     }
 
     &--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(' ');