Merge pull request #14 from ruru-m07/issue-9

fix(components:avatar): correct rendering of AvatarGroup and AvatarWi…
ruru-m07 · Jul 27, 2024 · c36cc7a · c36cc7a
2 parents 532c975 + d60be66
commit c36cc7a
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 28 deletions.
diff --git a/apps/www/components/preview/index.tsx b/apps/www/components/preview/index.tsx
@@ -33,7 +33,7 @@ export default {
   ),
   avatar: (
     <Wrapper>
-      <div className="flex items-center justify-center">
+      <div className="flex items-center justify-between">
         <Avatar
           size={50}
           placeholder="RU"

diff --git a/apps/www/content/docs/components/avatar.mdx b/apps/www/content/docs/components/avatar.mdx
@@ -10,17 +10,6 @@ import {
   AvatarWithBadge,
 } from "ruru-ui/components/avatar";
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
-import { Callout } from "fumadocs-ui/components/callout";
-
-<Callout title="Bug(docs)!" type="error">
-  This component uses __absolute__ and __relative__ positioning so that in our **MDX** docs
-  the component is not visible properly, but it's fine to use in your project.
-
-  issue: [#9](https://github.com/ruru-m07/ruru-ui/issues/9)
-
-if you can fix this then feel free to submit a PR : )
-
-</Callout>
 
 ## Usage
 
@@ -95,7 +84,17 @@ The `AvatarGroup` component is used to display multiple avatars in a group.
             { src: "https://github.com/rauchg.png", alt: "rauchg" },
             { src: "https://github.com/shadcn.png", alt: "shadcn" },
           ]}
+          className={"mb-5"}
           size={40}
+          style={{
+            display: "flex",
+            gap: "20px",
+            justifyContent: "center",
+            alignItems: "center",
+            padding: "0px",
+          }}
+          aClassName="-ml-[26px] "
+          lnClassName="-ml-[26px] "
         />
         <AvatarGroup
           limit={4}
@@ -106,6 +105,15 @@ The `AvatarGroup` component is used to display multiple avatars in a group.
             { src: "https://github.com/rauchg.png", alt: "rauchg" },
             { src: "https://github.com/shadcn.png", alt: "shadcn" },
           ]}
+          style={{
+            display: "flex",
+            gap: "20px",
+            justifyContent: "center",
+            alignItems: "center",
+            padding: "0px",
+          }}
+          aClassName="-ml-[26px] "
+          lnClassName="-ml-[26px] "
         />
 
         <AvatarGroup
@@ -118,6 +126,15 @@ The `AvatarGroup` component is used to display multiple avatars in a group.
             { src: "https://github.com/shadcn.png", alt: "shadcn" },
           ]}
           size={40}
+          style={{
+            display: "flex",
+            gap: "20px",
+            justifyContent: "center",
+            alignItems: "center",
+            padding: "0px",
+          }}
+          aClassName="-ml-[26px] "
+          lnClassName="-ml-[26px] "
         />
     </Tab>
     <Tab className={"-mt-8"} value="Code">
@@ -157,20 +174,44 @@ The `AvatarGroup` component is used to display multiple avatars in a group.
 The `AvatarWithBadge` component is used to display an avatar with a badge.
 
 <Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex justify-between gap-5"} value="Preview" >
+  <Tab className={"flex items-center justify-between gap-5"} value="Preview" >
     <AvatarWithBadge
-        src="https://github.com/ruru-m07.png"
-        badgeSrc="https://github.com/github.png"
-        size={50}
+      src="https://github.com/ruru-m07.png"
+      badgeSrc="https://github.com/github.png"
+      size={50}
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: "0px",
+        height: "50px",
+      }}
+      sClassName="-bottom-8 -left-1"
     />
     <AvatarWithBadge
-        src="https://github.com/ruru-m07.png"
-        badgeSrc="https://github.com/github.png"
+      src="https://github.com/ruru-m07.png"
+      badgeSrc="https://github.com/github.png"
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: "0px",
+        height: "30px",
+      }}
+      sClassName="-bottom-8 -left-0"
     />
     <AvatarWithBadge
-        src="https://github.com/ruru-m07.png"
-        badgeSrc="https://github.com/github.png"
-        size={70}
+      src="https://github.com/ruru-m07.png"
+      badgeSrc="https://github.com/github.png"
+      size={70}
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: "0px",
+        height: "70px",
+      }}
+      sClassName="-bottom-7 -left-1"
     />
   </Tab>
   <Tab className={"-mt-8"} value="Code">

diff --git a/packages/ui/src/components/avatar.tsx b/packages/ui/src/components/avatar.tsx
@@ -135,10 +135,16 @@ type AvatarGroupProps = Omit<
    *
    */
   limit?: number;
+
+  aClassName?: string;
+  lnClassName?: string;
 };
 
 const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
-  ({ className, size = 30, members, limit, ...props }, ref) => {
+  (
+    { className, aClassName, lnClassName, size = 30, members, limit, ...props },
+    ref,
+  ) => {
     const displayedMembers =
       limit && members.length > limit ? members.slice(0, limit - 1) : members;
     const extraMembersCount =
@@ -149,7 +155,7 @@ const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
         {displayedMembers.map((member, index) => (
           <Avatar
             key={index}
-            className={cn(`-ml-2 border`, className)}
+            className={cn(`-ml-2 border`, aClassName)}
             size={size}
             src={member.src}
             placeholder={member.alt}
@@ -158,8 +164,8 @@ const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
         {extraMembersCount > 0 && (
           <div
             className={cn(
-              `-ml-2 flex items-center justify-center rounded-full border bg-primary-foreground`,
-              className,
+              `lastcount -ml-2 flex items-center justify-center rounded-full border bg-primary-foreground`,
+              lnClassName,
             )}
             style={{
               width: `${size}px`,
@@ -243,6 +249,9 @@ type AvatarWithBadgeProps = Omit<
    *
    */
   badgeSrc: string;
+
+  iClassName?: string;
+  sClassName?: string;
 };
 
 /**
@@ -252,7 +261,19 @@ type AvatarWithBadgeProps = Omit<
  * @returns {ReactElement}
  */
 const AvatarWithBadge = React.forwardRef<HTMLDivElement, AvatarWithBadgeProps>(
-  ({ className, size = 30, src, placeholder, badgeSrc, ...props }, ref) => {
+  (
+    {
+      className,
+      sClassName,
+      iClassName,
+      size = 30,
+      src,
+      placeholder,
+      badgeSrc,
+      ...props
+    },
+    ref,
+  ) => {
     return (
       <div
         className={cn("relative inline-block", className)}
@@ -264,7 +285,7 @@ const AvatarWithBadge = React.forwardRef<HTMLDivElement, AvatarWithBadgeProps>(
         {...props}
       >
         <img
-          className="rounded-full border"
+          className={cn("rounded-full border", iClassName)}
           style={{
             width: "100%",
             height: "100%",
@@ -273,7 +294,10 @@ const AvatarWithBadge = React.forwardRef<HTMLDivElement, AvatarWithBadgeProps>(
           alt={placeholder}
         />
         <img
-          className="absolute bottom-0 left-0 rounded-full border"
+          className={cn(
+            "absolute bottom-0 left-0 rounded-full border",
+            sClassName,
+          )}
           style={{
             width: `${size / 3}px`,
             height: `${size / 3}px`,