coder · BrunoQuaresma · Dec 20, 2024 · Dec 17, 2024 · Dec 17, 2024 · Dec 17, 2024
diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/Avatar/Avatar.stories.tsx
@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Avatar, AvatarFallback, AvatarImage } from "./Avatar";
+import { Avatar } from "./Avatar";
 
 const meta: Meta<typeof Avatar> = {
 	title: "components/Avatar",
 	component: Avatar,
 	args: {
-		children: <AvatarImage src="https://github.com/kylecarbs.png" />,
+		src: "https://github.com/kylecarbs.png",
 	},
 };
 
@@ -26,48 +26,51 @@ export const IconLgSize: Story = {
 	args: {
 		size: "lg",
 		variant: "icon",
-		children: (
-			<AvatarImage src="https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png" />
-		),
+		src: "https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png",
 	},
 };
 
 export const IconDefaultSize: Story = {
 	args: {
 		variant: "icon",
-		children: (
-			<AvatarImage src="https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png" />
-		),
+		src: "https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png",
 	},
 };
 
 export const IconSmSize: Story = {
 	args: {
 		variant: "icon",
 		size: "sm",
-		children: (
-			<AvatarImage src="https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png" />
-		),
+		src: "https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png",
+	},
+};
+
+export const NonSquaredIcon: Story = {
+	args: {
+		variant: "icon",
+		src: "/icon/docker.png",
 	},
 };
 
 export const FallbackLgSize: Story = {
 	args: {
+		src: "",
 		size: "lg",
-
-		children: <AvatarFallback>AR</AvatarFallback>,
+		fallback: "Adriana Rodrigues",
 	},
 };
 
 export const FallbackDefaultSize: Story = {
 	args: {
-		children: <AvatarFallback>AR</AvatarFallback>,
+		src: "",
+		fallback: "Adriana Rodrigues",
 	},
 };
 
 export const FallbackSmSize: Story = {
 	args: {
+		src: "",
 		size: "sm",
-		children: <AvatarFallback>AR</AvatarFallback>,
+		fallback: "Adriana Rodrigues",
 	},
 };
diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
@@ -1,24 +1,30 @@
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { type VariantProps, cva } from "class-variance-authority";
 /**
  * Copied from shadc/ui on 12/16/2024
  * @see {@link https://ui.shadcn.com/docs/components/avatar}
  *
  * This component was updated to support the variants and match the styles from
  * the Figma design:
  * @see {@link https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=711-383&t=xqxOSUk48GvDsjGK-0}
+ *
+ * It was also simplified to make usage easier and reduce boilerplate.
+ * @see {@link https://github.com/coder/coder/pull/15930#issuecomment-2552292440}
  */
+
+import { useTheme } from "@emotion/react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
+import { getExternalImageStylesFromUrl } from "theme/externalImages";
 import { cn } from "utils/cn";
 
 const avatarVariants = cva(
 	"relative flex shrink-0 overflow-hidden rounded border border-solid bg-surface-secondary text-content-secondary",
 	{
 		variants: {
 			size: {
-				lg: "h-10 w-10 rounded-[6px] text-sm font-medium",
-				default: "h-6 w-6 text-2xs",
-				sm: "h-[18px] w-[18px] text-[8px]",
+				lg: "h-[--avatar-lg] w-[--avatar-lg] rounded-[6px] text-sm font-medium",
+				default: "h-[--avatar-default] w-[--avatar-default] text-2xs",
+				sm: "h-[--avatar-sm] w-[--avatar-sm] text-[8px]",
 			},
 			variant: {
 				default: "",
@@ -32,63 +38,61 @@ const avatarVariants = cva(
 			{
 				size: "lg",
 				variant: "icon",
-				className: "p-[9px]",
+				className: "p-2",
 			},
 			{
 				size: "default",
 				variant: "icon",
-				className: "p-[3px]",
+				className: "p-1",
 			},
 			{
 				size: "sm",
 				variant: "icon",
-				className: "p-[2px]",
+				className: "p-[3px]",
 			},
 		],
 	},
 );
 
-export interface AvatarProps
-	extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
-		VariantProps<typeof avatarVariants> {}
+export type AvatarProps = AvatarPrimitive.AvatarProps &
+	VariantProps<typeof avatarVariants> & {
+		src?: string;
+		alt?: string;
+		fallback?: string;
+	};
 
 const Avatar = React.forwardRef<
 	React.ElementRef<typeof AvatarPrimitive.Root>,
 	AvatarProps
->(({ className, size, variant, ...props }, ref) => (
-	<AvatarPrimitive.Root
-		ref={ref}
-		className={cn(avatarVariants({ size, variant, className }))}
-		{...props}
-	/>
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-const AvatarImage = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Image>,
-	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-	<AvatarPrimitive.Image
-		ref={ref}
-		className={cn("aspect-square h-full w-full", className)}
-		{...props}
-	/>
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+>(
+	(
+		{ className, size, variant, src, alt, fallback, children, ...props },
+		ref,
+	) => {
+		const theme = useTheme();
 
-const AvatarFallback = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Fallback>,
-	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-	<AvatarPrimitive.Fallback
-		ref={ref}
-		className={cn(
-			"flex h-full w-full items-center justify-center rounded-full",
-			className,
-		)}
-		{...props}
-	/>
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+		return (
+			<AvatarPrimitive.Root
+				ref={ref}
+				className={cn(avatarVariants({ size, variant, className }))}
+				{...props}
+			>
+				<AvatarPrimitive.Image
+					src={src}
+					className="aspect-square h-full w-full object-contain"
+					css={getExternalImageStylesFromUrl(theme.externalImages, src)}
+					alt={alt}
+				/>
+				{fallback && (
+					<AvatarPrimitive.Fallback className="flex h-full w-full items-center justify-center rounded-full">
+						{fallback.charAt(0).toUpperCase()}
+					</AvatarPrimitive.Fallback>
+				)}
+				{children}
+			</AvatarPrimitive.Root>
+		);
+	},
+);
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback };
+export { Avatar };
diff --git a/...ponents/AvatarCard/AvatarCard.stories.tsx → .../components/Avatar/AvatarCard.stories.tsx b/...ponents/AvatarCard/AvatarCard.stories.tsx → .../components/Avatar/AvatarCard.stories.tsx
diff --git a/.../src/components/AvatarCard/AvatarCard.tsx → site/src/components/Avatar/AvatarCard.tsx b/.../src/components/AvatarCard/AvatarCard.tsx → site/src/components/Avatar/AvatarCard.tsx
@@ -1,13 +1,11 @@
 import { type CSSObject, useTheme } from "@emotion/react";
-import { Avatar } from "components/deprecated/Avatar/Avatar";
+import { Avatar } from "components/Avatar/Avatar";
 import type { FC, ReactNode } from "react";
 
 type AvatarCardProps = {
 	header: string;
 	imgUrl: string;
 	altText: string;
-	background?: boolean;
-
 	subtitle?: ReactNode;
 	maxWidth?: number | "none";
 };
@@ -16,7 +14,6 @@ export const AvatarCard: FC<AvatarCardProps> = ({
 	header,
 	imgUrl,
 	altText,
-	background,
 	subtitle,
 	maxWidth = "none",
 }) => {
@@ -72,9 +69,7 @@ export const AvatarCard: FC<AvatarCardProps> = ({
 				)}
 			</div>
 
-			<Avatar background={background} src={imgUrl} alt={altText} size="md">
-				{header}
-			</Avatar>
+			<Avatar size="lg" src={imgUrl} alt={altText} fallback={header} />
 		</div>
 	);
 };
diff --git a/...ponents/AvatarData/AvatarData.stories.tsx → .../components/Avatar/AvatarData.stories.tsx b/...ponents/AvatarData/AvatarData.stories.tsx → .../components/Avatar/AvatarData.stories.tsx
diff --git a/.../src/components/AvatarData/AvatarData.tsx → site/src/components/Avatar/AvatarData.tsx b/.../src/components/AvatarData/AvatarData.tsx → site/src/components/Avatar/AvatarData.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from "@emotion/react";
+import { Avatar } from "components/Avatar/Avatar";
 import { Stack } from "components/Stack/Stack";
-import { Avatar } from "components/deprecated/Avatar/Avatar";
 import type { FC, ReactNode } from "react";
 
 export interface AvatarDataProps {
@@ -29,17 +29,17 @@ export const AvatarData: FC<AvatarDataProps> = ({
 	const theme = useTheme();
 	if (!avatar) {
 		avatar = (
-			<Avatar background src={src}>
-				{(typeof title === "string" ? title : imgFallbackText) || "-"}
-			</Avatar>
+			<Avatar
+				src={src}
+				fallback={(typeof title === "string" ? title : imgFallbackText) || "-"}
+			/>
 		);
 	}
 
 	return (
 		<Stack
-			spacing={1.5}
+			spacing={1}
 			direction="row"
-			alignItems="center"
 			css={{
 				minHeight: 40, // Make it predictable for the skeleton
 				width: "100%",

diff --git a/...ponents/AvatarData/AvatarDataSkeleton.tsx → .../components/Avatar/AvatarDataSkeleton.tsx b/...ponents/AvatarData/AvatarDataSkeleton.tsx → .../components/Avatar/AvatarDataSkeleton.tsx
diff --git a/site/src/components/BuildAvatar/BuildAvatar.tsx b/site/src/components/BuildAvatar/BuildAvatar.tsx
diff --git a/site/src/components/Filter/SelectFilter.stories.tsx b/site/src/components/Filter/SelectFilter.stories.tsx
@@ -1,7 +1,7 @@
 import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, userEvent, within } from "@storybook/test";
-import { UserAvatar } from "components/UserAvatar/UserAvatar";
+import { UserAvatar } from "modules/users/UserAvatar/UserAvatar";
 import { useState } from "react";
 import { withDesktopViewport } from "testHelpers/storybook";
 import {
@@ -11,7 +11,7 @@ import {
 } from "./SelectFilter";
 
 const options: SelectFilterOption[] = Array.from({ length: 50 }, (_, i) => ({
-	startIcon: <UserAvatar username={`username ${i + 1}`} size="xs" />,
+	startIcon: <UserAvatar username={`username ${i + 1}`} size="sm" />,
 	label: `Option ${i + 1}`,
 	value: `option-${i + 1}`,
 }));

diff --git a/site/src/components/Filter/UserFilter.tsx b/site/src/components/Filter/UserFilter.tsx
@@ -4,8 +4,8 @@ import {
 	type SelectFilterOption,
 	SelectFilterSearch,
 } from "components/Filter/SelectFilter";
-import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
+import { UserAvatar } from "modules/users/UserAvatar/UserAvatar";
 import type { FC } from "react";
 import { type UseFilterMenuOptions, useFilterMenu } from "./menu";
 
@@ -26,7 +26,7 @@ export const useUserFilterMenu = ({
 					<UserAvatar
 						username={me.username}
 						avatarURL={me.avatar_url}
-						size="xs"
+						size="sm"
 					/>
 				),
 			},
@@ -48,7 +48,7 @@ export const useUserFilterMenu = ({
 						<UserAvatar
 							username={me.username}
 							avatarURL={me.avatar_url}
-							size="xs"
+							size="sm"
 						/>
 					),
 				};
@@ -64,7 +64,7 @@ export const useUserFilterMenu = ({
 						<UserAvatar
 							username={firstUser.username}
 							avatarURL={firstUser.avatar_url}
-							size="xs"
+							size="sm"
 						/>
 					),
 				};
@@ -80,7 +80,7 @@ export const useUserFilterMenu = ({
 					<UserAvatar
 						username={user.username}
 						avatarURL={user.avatar_url}
-						size="xs"
+						size="sm"
 					/>
 				),
 			}));