Fix: Avatar overflow style mismatch (#368)

* fix: overflow avatar not matching design

* chore: add example

* refactor: move util function to utils

* tests: add utils tests

* chore: update comment

* chore: import

* refactor: props from element

Author: paanSinghCoder

apps/www/src/app/examples/page.tsx

@@ -976,6 +976,36 @@ const Page = () => {
             </Flex>
           </Flex>
 
+          <Text
+            size="large"
+            weight="medium"
+            style={{ marginTop: "32px", marginBottom: "16px" }}>
+            Avatar Examples
+          </Text>
+
+          <Flex direction="column" gap={6}>
+            <Flex direction="column" gap={3}>
+                <AvatarGroup max={4}>
+                    <Tooltip message="JD">
+                      <Avatar radius="small" size={7} fallback="JD" color="indigo" />
+                    </Tooltip>
+                    <Tooltip message="AS">
+                      <Avatar radius="small" size={7} fallback="AS" color="mint" />
+                    </Tooltip>
+                    <Tooltip message="RK">
+                      <Avatar radius="small" size={7} fallback="RK" color="sky" />
+                    </Tooltip>
+                    <Tooltip message="PL">
+                      <Avatar radius="small" size={7} fallback="PL" color="purple" />
+                    </Tooltip>
+                    <Tooltip message="MN">
+                      <Avatar radius="small" size={7} fallback="MN" color="pink" />
+                    </Tooltip>
+                </AvatarGroup>
+              </Flex>
+            </Flex>
+
+
           <Flex justify="center" style={{ marginTop: 40 }}>
             <Button type="submit">Submit button</Button>
           </Flex>

packages/raystack/v1/components/avatar/avatar.tsx

@@ -1,16 +1,16 @@
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { cva, VariantProps } from "class-variance-authority";
-import { clsx } from 'clsx';
 import {
   ComponentPropsWithoutRef,
   ElementRef,
   forwardRef,
-  ReactNode,
+  ReactNode
 } from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cva, VariantProps } from "class-variance-authority";
+import { clsx } from 'clsx';
 
+import {AVATAR_COLORS, getAvatarProps} from './utils'
 import { Box } from "../box";
 import styles from "./avatar.module.css";
-import {AVATAR_COLORS} from './utils'
 
 const avatar = cva(styles.avatar, {
   variants: {
@@ -147,6 +147,9 @@ export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
     const avatars = max ? children.slice(0, max) : children;
     const count = max && children.length > max ? children.length - max : 0;
 
+    // Overflow avatar matches the first avatar styling
+    const firstAvatarProps = getAvatarProps(avatars[0]);
+
     return (
       <div
         ref={ref}
@@ -161,11 +164,11 @@ export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
         {count > 0 && (
           <div className={styles.avatarWrapper}>
             <Avatar
-              size={avatars[0].props.size}
-              radius={avatars[0].props.radius}
-              variant={avatars[0].props.variant}
+              size={firstAvatarProps.size}
+              radius={firstAvatarProps.radius}
+              variant={firstAvatarProps.variant}
               color='neutral'
-              fallback={<span>+{count}</span>}
+              fallback={`+${count}`}
             />
           </div>
         )}

packages/raystack/v1/components/avatar/utils.test.ts

@@ -1,4 +1,7 @@
-import { getAvatarColor } from "./utils";
+import { getAvatarColor, getAvatarProps } from "./utils";
+import { Avatar } from "./avatar";
+import React from "react";
+
 describe("getAvatarColor", () => {
   it("should return same color for the same name", () => {
     const color = getAvatarColor("John Doe");
@@ -23,3 +26,47 @@ describe("getAvatarColor", () => {
     expect(color).toBe("grass");
   });
 });
+
+describe("getAvatarProps", () => {
+  it("should return props directly from Avatar component", () => {
+    const props = {
+      size: 5 as const,
+      color: "indigo" as const,
+      fallback: "GS",
+    };
+    const element = React.createElement(Avatar, props);
+    const result = getAvatarProps(element);
+    expect(result).toEqual(props);
+  });
+
+  it("should return props from Avatar wrapped in another component", () => {
+    const avatarProps = {
+      size: 5 as const,
+      color: "mint" as const,
+      fallback: "GS",
+    };
+    const avatar = React.createElement(Avatar, avatarProps);
+    const wrapper = React.createElement('div', {}, avatar);
+    const result = getAvatarProps(wrapper);
+    expect(result).toEqual(avatarProps);
+  });
+
+  it("should return props from deeply nested Avatar", () => {
+    const avatarProps = {
+      size: 7 as const,
+      color: "sky" as const,
+      fallback: "GS",
+    };
+    const avatar = React.createElement(Avatar, avatarProps);
+    const innerWrapper = React.createElement('div', {}, avatar);
+    const outerWrapper = React.createElement('div', {}, innerWrapper);
+    const result = getAvatarProps(outerWrapper);
+    expect(result).toEqual(avatarProps);
+  });
+
+  it("should return empty object when children is not a valid element", () => {
+    const element = React.createElement('div', {}, 'text content');
+    const result = getAvatarProps(element);
+    expect(result).toEqual({});
+  });
+});

packages/raystack/v1/components/avatar/utils.tsx

@@ -1,3 +1,8 @@
+import { isValidElement, ReactElement } from "react";
+import { Avatar } from "./avatar";
+
+import { AvatarProps } from "./avatar";
+
 export const COLORS = [
   "indigo",
   "orange",
@@ -21,3 +26,22 @@ export function getAvatarColor(str: string): AVATAR_COLORS {
   const index = hash % COLORS.length;
   return COLORS[index];
 }
+
+/*
+ * @desc Recursively get the avatar props even if it's
+ * wrapped in another component like Tooltip, Flex, etc.
+ */ 
+export const getAvatarProps = (element: ReactElement): AvatarProps => {
+  const { props } = element;
+
+  if (element.type === Avatar) {
+    return props;
+  }
+  
+  if (props.children) {
+    if (isValidElement(props.children)) {
+      return getAvatarProps(props.children);
+    }
+  }
+  return {};
+};