Fix avatars not overlapping (#6405)

* Fix avatars being weird

* Fix useravatar import

* Fix type error

* Fixing spacing

apps/web/components/booking/BookingDescription.tsx

@@ -76,7 +76,7 @@ const BookingDescription: FC<Props> = (props) => {
         profile={profile}
         users={eventType.users}
         showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
-        size={10}
+        size="sm"
         truncateAfter={3}
       />
       <h2 className="mt-2 break-words text-sm font-medium text-gray-600 dark:text-gray-300">

apps/web/components/booking/UserAvatars.tsx

@@ -1,6 +1,5 @@
 import { CAL_URL } from "@calcom/lib/constants";
-
-import AvatarGroup, { AvatarGroupProps } from "@components/ui/AvatarGroup";
+import { AvatarGroup, AvatarGroupProps } from "@calcom/ui";
 
 export const UserAvatars = ({
   profile,
@@ -14,7 +13,6 @@ export const UserAvatars = ({
   const showMembers = !users.find((user) => user.name === profile.name) && props.showMembers;
   return (
     <AvatarGroup
-      border="border-2 dark:border-darkgray-100 border-white"
       items={
         [
           {
@@ -38,7 +36,7 @@ export const UserAvatars = ({
           href?: string;
         }[]
       }
-      size={props.size}
+      size="sm"
       truncateAfter={props.truncateAfter}
     />
   );

apps/web/pages/[user].tsx

@@ -26,12 +26,11 @@ import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calco
 import prisma from "@calcom/prisma";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { Icon, HeadSeo } from "@calcom/ui";
+import { Icon, HeadSeo, AvatarGroup } from "@calcom/ui";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 import { EmbedProps } from "@lib/withEmbedSsr";
 
-import AvatarGroup from "@components/ui/AvatarGroup";
 import { AvatarSSR } from "@components/ui/AvatarSSR";
 
 import { ssrInit } from "@server/lib/ssr";
@@ -69,10 +68,9 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
             </div>
             <div className="mt-1 self-center">
               <AvatarGroup
-                border="border-2 border-white dark:border-darkgray-100"
                 truncateAfter={4}
                 className="flex flex-shrink-0"
-                size={10}
+                size="sm"
                 items={props.users.map((user) => ({
                   alt: user.name || "",
                   image: user.avatar || "",

apps/web/pages/event-types/index.tsx

@@ -29,6 +29,8 @@ import {
   Icon,
   showToast,
   Switch,
+  Avatar,
+  AvatarGroup,
   Tooltip,
 } from "@calcom/ui";
 
@@ -37,8 +39,6 @@ import { HttpError } from "@lib/core/http/error";
 
 import { EmbedButton, EmbedDialog } from "@components/Embed";
 import SkeletonLoader from "@components/eventtype/SkeletonLoader";
-import Avatar from "@components/ui/Avatar";
-import AvatarGroup from "@components/ui/AvatarGroup";
 
 import { ssrInit } from "@server/lib/ssr";
 
@@ -279,9 +279,8 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                     <div className="flex justify-between space-x-2 rtl:space-x-reverse">
                       {type.users?.length > 1 && (
                         <AvatarGroup
-                          border="border-2 border-white"
                           className="relative top-1 right-3"
-                          size={8}
+                          size="sm"
                           truncateAfter={4}
                           items={type.users.map((organizer) => ({
                             alt: organizer.name || "",
@@ -512,12 +511,12 @@ const EventTypeListHeading = ({
   teamId,
 }: EventTypeListHeadingProps): JSX.Element => {
   return (
-    <div className="mb-4 flex">
+    <div className="mb-4 flex items-center space-x-2">
       <Link href={teamId ? `/settings/teams/${teamId}/profile` : "/settings/my-account/profile"}>
         <Avatar
           alt={profile?.name || ""}
           imageSrc={`${WEBAPP_URL}/${profile.slug}/avatar.png` || undefined}
-          size={8}
+          size="sm"
           className="mt-1 inline ltr:mr-2 rtl:ml-2"
         />
       </Link>

apps/web/pages/team/[slug].tsx

@@ -12,13 +12,12 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { getTeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
-import { Avatar, Button, Icon, HeadSeo } from "@calcom/ui";
+import { Avatar, Button, Icon, HeadSeo, AvatarGroup } from "@calcom/ui";
 
 import { useToggleQuery } from "@lib/hooks/useToggleQuery";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import Team from "@components/team/screens/Team";
-import AvatarGroup from "@components/ui/AvatarGroup";
 
 export type TeamPageProps = inferSSRProps<typeof getServerSideProps>;
 function TeamPage({ team }: TeamPageProps) {
@@ -57,10 +56,9 @@ function TeamPage({ team }: TeamPageProps) {
             </div>
             <div className="mt-1 self-center">
               <AvatarGroup
-                border="border-2 border-white dark:border-darkgray-100"
                 truncateAfter={4}
                 className="flex flex-shrink-0"
-                size={10}
+                size="sm"
                 items={type.users.map((user) => ({
                   alt: user.name || "",
                   title: user.name || "",

packages/ui/components/avatar/AvatarGroup.tsx

@@ -11,19 +11,21 @@ export type AvatarGroupProps = {
   }[];
   className?: string;
   accepted?: boolean;
+  truncateAfter?: number;
 };
 
 export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
   const avatars = props.items.slice(0, 4);
   const LENGTH = props.items.length;
+  const truncateAfter = props.truncateAfter || 4;
 
   return (
     <ul className={classNames(props.className, "flex items-center")}>
       {avatars.map((item, enumerator) => {
         if (item.image != null) {
-          if (LENGTH > 4 && enumerator === 3) {
+          if (LENGTH > truncateAfter && enumerator === truncateAfter - 1) {
             return (
-              <li key={enumerator} className="relative -mr-4 inline-block ">
+              <li key={enumerator} className="relative -mr-[4px] inline-block ">
                 <div className="relative">
                   <div className="h-90 relative min-w-full scale-105 transform border-gray-200 ">
                     <Avatar className="" imageSrc={item.image} alt={item.alt || ""} size={props.size} />
@@ -34,14 +36,14 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
                     "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white",
                     props.size === "sm" ? "text-base" : "text-2xl"
                   )}>
-                  <span>+{LENGTH - 3}</span>
+                  <span>+{LENGTH - truncateAfter - 1}</span>
                 </div>
               </li>
             );
           }
           // Always display the first Four items items
           return (
-            <li key={enumerator} className="-mr-4 inline-block">
+            <li key={enumerator} className="-mr-[4px] inline-block">
               <Avatar
                 className="border-gray-200"
                 imageSrc={item.image}

packages/ui/components/avatar/index.ts

@@ -1,3 +1,4 @@
 export { Avatar } from "./Avatar";
 export type { AvatarProps } from "./Avatar";
 export { AvatarGroup } from "./AvatarGroup";
+export type { AvatarGroupProps } from "./AvatarGroup";

packages/ui/components/index.ts

@@ -1,5 +1,5 @@
 export { Avatar, AvatarGroup } from "./avatar";
-export type { AvatarProps } from "./avatar";
+export type { AvatarProps, AvatarGroupProps } from "./avatar";
 export { Badge } from "./badge";
 export type { BadgeProps } from "./badge";
 export { Breadcrumb, BreadcrumbContainer, BreadcrumbItem } from "./breadcrumb";

packages/ui/index.tsx

@@ -130,6 +130,7 @@ export type {
   NavTabProps,
   HorizontalTabItemProps,
   VerticalTabItemProps,
+  AvatarGroupProps,
 } from "./components";
 export { default as CheckboxField } from "./components/form/checkbox/Checkbox";
 /** ⬇️ TODO - Move these to components */