Skip to content

refactor: replace and remove deprecated Avatar component #15930

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 32 commits into from
Dec 20, 2024
Merged

refactor: replace and remove deprecated Avatar component #15930

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
dbf1eb9
Add avatarLetters utility
BrunoQuaresma Dec 17, 2024
8f24c9e
Fix avatar for non squared icon
BrunoQuaresma Dec 17, 2024
e689d42
Replace avatar o template menu
BrunoQuaresma Dec 17, 2024
6f8c280
Move UserAvatar to modules/users
BrunoQuaresma Dec 17, 2024
e72cecb
Only use one letter on fallback to simplify changes
BrunoQuaresma Dec 17, 2024
758f240
Refactor UserAvatar to user the new Avatar component
BrunoQuaresma Dec 17, 2024
22c241c
Move GroupAvatar to modules/groups
BrunoQuaresma Dec 17, 2024
8ecbfc5
Update GroupAvatar to use latest Avatar component
BrunoQuaresma Dec 17, 2024
081bb47
Move BuildAvatar to modules/builds
BrunoQuaresma Dec 17, 2024
83ca623
Update BuildAvatar to use latest Avatar component
BrunoQuaresma Dec 17, 2024
dff92f7
Move AvatarCard to components/Avatar
BrunoQuaresma Dec 17, 2024
52ea623
Update AccountUserGroups to use the new Avatar component
BrunoQuaresma Dec 17, 2024
16c194d
Move AvatarData to components/Avatar
BrunoQuaresma Dec 17, 2024
1caeffd
Update AvatarData to use new Avatar component
BrunoQuaresma Dec 17, 2024
4f12e95
Update remaining components
BrunoQuaresma Dec 17, 2024
76c211d
Fix lint issues
BrunoQuaresma Dec 17, 2024
08fee38
Remove deprecated Avatar
BrunoQuaresma Dec 17, 2024
bfd9244
Merge branch 'main' of https://github.com/coder/coder into bq/use-new…
BrunoQuaresma Dec 18, 2024
d6fc56b
Merge branch 'main' of https://github.com/coder/coder into bq/use-new…
BrunoQuaresma Dec 18, 2024
f47ed9d
Align avatar with the timeline vertical line
BrunoQuaresma Dec 18, 2024
7304999
Fix selected template avatar
BrunoQuaresma Dec 18, 2024
9fdb4fd
Adjust components for the new Avatar
BrunoQuaresma Dec 18, 2024
0a0b1cf
Fix a few style inconsistencies
BrunoQuaresma Dec 18, 2024
f079dcd
Merge branch 'main' of https://github.com/coder/coder into bq/use-new…
BrunoQuaresma Dec 19, 2024
dc410a7
Simplify Avatar usage
BrunoQuaresma Dec 19, 2024
37a678d
Fix missed src
BrunoQuaresma Dec 19, 2024
9e03115
Fix remaining issues
BrunoQuaresma Dec 19, 2024
6453ce3
E2E fix + review requests
BrunoQuaresma Dec 19, 2024
bb8e9af
Fix fmt
BrunoQuaresma Dec 19, 2024
417cab7
Fix assertions
BrunoQuaresma Dec 20, 2024
ad61871
Fix locators
BrunoQuaresma Dec 20, 2024
d57833b
Change locator to use .summary
BrunoQuaresma Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix missed src
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Dec 19, 2024
commit 37a678ddb84c4384d0bcfd98c3822f95d48af5e8
51 changes: 29 additions & 22 deletions site/src/components/Avatar/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const avatarVariants = cva(
},
);

export type AvatarProps = Omit<AvatarPrimitive.AvatarProps, "children"> &
export type AvatarProps = AvatarPrimitive.AvatarProps &
VariantProps<typeof avatarVariants> & {
src?: string;
alt?: string;
Expand All @@ -64,28 +64,35 @@ export type AvatarProps = Omit<AvatarPrimitive.AvatarProps, "children"> &
const Avatar = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Root>,
AvatarProps
>(({ className, size, variant, alt, fallback, ...props }, ref) => {
const theme = useTheme();
>(
(
{ className, size, variant, src, alt, fallback, children, ...props },
ref,
) => {
const theme = useTheme();

return (
<AvatarPrimitive.Root
ref={ref}
className={cn(avatarVariants({ size, variant, className }))}
{...props}
>
<AvatarPrimitive.Image
className="aspect-square h-full w-full object-contain"
css={getExternalImageStylesFromUrl(theme.externalImages, props.src)}
alt={alt}
/>
{fallback && (
<AvatarPrimitive.Fallback className="flex h-full w-full items-center justify-center rounded-full">
{fallback.charAt(0).toUpperCase()}
</AvatarPrimitive.Fallback>
)}
</AvatarPrimitive.Root>
);
});
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()}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could be a separate PR but it would be nice if we started using 2 letters for the fallback case. For example, the first letter of the first 2 words in display name. For example, if you look at the users page on dev.coder.com there are many duplicated avatars for the letters A and B that it doesn't serve much purpose as a identifier.

Copy link
Collaborator Author

@BrunoQuaresma BrunoQuaresma Dec 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I was planning to address this in another PR if necessary. Since we don’t control the name or display name, we can’t enforce them to have at least two words to display two letters. In such cases, we would display only one letter, correct? Since this involves some logic and could slightly impact the design, I left it out of the scope for this PR.

</AvatarPrimitive.Fallback>
)}
{children}
</AvatarPrimitive.Root>
);
},
);
Avatar.displayName = AvatarPrimitive.Root.displayName;

export { Avatar };
2 changes: 0 additions & 2 deletions site/src/modules/builds/BuildAvatar/BuildAvatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import { css, cx } from "@emotion/css";
import { useTheme } from "@emotion/react";
import Badge from "@mui/material/Badge";
import type { WorkspaceBuild } from "api/typesGenerated";
import { Avatar, type AvatarProps } from "components/Avatar/Avatar";
import { BuildIcon } from "components/BuildIcon/BuildIcon";
Expand Down
4 changes: 2 additions & 2 deletions site/src/modules/management/OrganizationSettingsLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ import {
BreadcrumbSeparator,
} from "components/Breadcrumb/Breadcrumb";
import { Loader } from "components/Loader/Loader";
import { UserAvatar } from "components/UserAvatar/UserAvatar";
import { useAuthenticated } from "contexts/auth/RequireAuth";
import { RequirePermission } from "contexts/auth/RequirePermission";
import { useDashboard } from "modules/dashboard/useDashboard";
import { type FC, Suspense, createContext, useContext } from "react";
import { Outlet, useParams } from "react-router-dom";
import { OrganizationSidebar } from "./OrganizationSidebar";
import { UserAvatar } from "modules/users/UserAvatar/UserAvatar";

export const OrganizationSettingsContext = createContext<
OrganizationSettingsValue | undefined
Expand Down Expand Up @@ -92,7 +92,7 @@ const OrganizationSettingsLayout: FC = () => {
<BreadcrumbPage className="text-content-primary">
<UserAvatar
key={organization.id}
size="xs"
size="sm"
username={organization.display_name}
avatarURL={organization.icon}
/>
Expand Down