chore: 🐛 adjust avatar component to prevent hydration errors

#TECH-1321
t3n · Jan 30, 2025 · 9012e03 · 9012e03
1 parent e5a2c64
commit 9012e03
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/packages/components/src/Avatar/Avatar.tsx b/packages/components/src/Avatar/Avatar.tsx
@@ -29,7 +29,9 @@ export interface AvatarProps extends Omit<AvatarImageProps, 'className'> {
   textColor?: TextColorProps['color'];
 }
 
-const AvatarPlaceholder = styled((props) => <Placeholder {...props} />)`
+const AvatarPlaceholder = styled((props) => (
+  <Placeholder as="span" {...props} />
+))`
   ${({ theme }) =>
     border({
       theme,
@@ -40,7 +42,7 @@ const AvatarPlaceholder = styled((props) => <Placeholder {...props} />)`
     })};
 `;
 
-const DefaultAvatar = styled((props) => <Box {...props} />)`
+const DefaultAvatar = styled((props) => <Box as="span" {...props} />)`
   ${({ theme }) =>
     border({
       theme,
@@ -128,7 +130,7 @@ const StyledAvatarImage = styled(AvatarImage)<{ src?: string }>`
   box-sizing: border-box;
 `;
 
-const StyledAvatar = styled.div`
+const StyledAvatar = styled.span`
   display: flex;
   align-items: center;
 `;

diff --git a/packages/components/src/Avatar/__snapshots__/Avatar.test.tsx.snap b/packages/components/src/Avatar/__snapshots__/Avatar.test.tsx.snap
@@ -58,10 +58,10 @@ exports[`Avatar matches snapshot and renders label 1`] = `
   padding-left: 8px;
 }
 
-<div
+<span
   class="c0"
 >
-  <div
+  <span
     class="c1 c2"
     display="flex"
     height="40px"
@@ -72,13 +72,13 @@ exports[`Avatar matches snapshot and renders label 1`] = `
     >
       a
     </p>
-  </div>
+  </span>
   <span
     class="c5"
   >
     Some author
   </span>
-</div>
+</span>
 `;
 
 exports[`Avatar renders without label 1`] = `
@@ -135,10 +135,10 @@ exports[`Avatar renders without label 1`] = `
   align-items: center;
 }
 
-<div
+<span
   class="c0"
 >
-  <div
+  <span
     class="c1 c2"
     display="flex"
     height="40px"
@@ -149,6 +149,6 @@ exports[`Avatar renders without label 1`] = `
     >
       a
     </p>
-  </div>
-</div>
+  </span>
+</span>
 `;