From 1760a85ccfef44b631ca16a382da02635efb3e02 Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Wed, 9 Aug 2023 07:11:20 +0100
Subject: [PATCH] Allow all span props onto the avatar component

---
 src/components/Avatar/Avatar.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index 7e706582..e8646d7a 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -21,17 +21,16 @@ import { SuspenseImg } from "../../utils/SuspenseImg";
 import styles from "./Avatar.module.css";
 import { useIdColorHash } from "./useIdColorHash";
 
-type AvatarProps = {
+type AvatarProps = JSX.IntrinsicElements["span"] & {
   src?: string;
   id: string;
   name: string;
   type?: "square" | "round";
-  className?: string;
   size?: CSSStyleDeclaration["height"];
 };
 
 export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(
-  { src, id, name = "", type = "round", className = "", size },
+  { src, id, name = "", type = "round", className = "", size, ...props },
   ref,
 ) {
   const hash = useIdColorHash(id);
@@ -44,12 +43,13 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(
     <span
       ref={ref}
       role="img"
+      title={id}
+      {...props}
       aria-label=""
       data-type={type}
       data-color={hash}
       className={classnames(styles.avatar, className)}
       style={style}
-      title={id}
     >
       {!src ? (
         fallbackInitial