fix(Avatar): add missing ref on default avatar (#2516)

* fix(Avatar): add missing ref on default avatar * Create nasty-frogs-end.md
razorpay · Jan 31, 2025 · 8b5602b · 8b5602b
1 parent 0ca28d0
commit 8b5602b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/.changeset/nasty-frogs-end.md b/.changeset/nasty-frogs-end.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(Avatar): misaligned menu on Avatar with icon
diff --git a/packages/blade/src/components/Avatar/Avatar.web.tsx b/packages/blade/src/components/Avatar/Avatar.web.tsx
@@ -127,7 +127,7 @@ const _Avatar: React.ForwardRefRenderFunction<BladeElementRef, AvatarProps> = (
       );
     }
 
-    return <AvatarButton {...commonButtonProps} icon={icon ?? UserIcon} />;
+    return <AvatarButton ref={ref as never} {...commonButtonProps} icon={icon ?? UserIcon} />;
   };
 
   const isSquare = variant === 'square';

diff --git a/packages/blade/src/components/Menu/docs/Menu.stories.tsx b/packages/blade/src/components/Menu/docs/Menu.stories.tsx
@@ -323,6 +323,11 @@ Default.args = {
   trigger: <Avatar name="Saurabh Daware" size="large" color="primary" />,
 };
 
+export const WithAvatarIcon = MenuTemplate.bind({});
+WithAvatarIcon.args = {
+  trigger: <Avatar size="large" color="primary" />,
+};
+
 export const CustomItems = CustomOverlayMenuTemplate.bind({});
 CustomItems.args = {
   openInteraction: 'hover',
-Original file line number
+Diff line change
@@ Expand Up @@
           );
         }
-        return <AvatarButton {...commonButtonProps} icon={icon ?? UserIcon} />;
+        return <AvatarButton ref={ref as never} {...commonButtonProps} icon={icon ?? UserIcon} />;
       };
       const isSquare = variant === 'square';
@@ Expand Down @@