Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

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.

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

Already on GitHub?Sign in to your account

Merged
BrunoQuaresma merged 32 commits intomainfrombq/use-new-avatar
Dec 20, 2024
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
Show all changes
32 commits
Select commitHold shift + click to select a range
dbf1eb9
Add avatarLetters utility
BrunoQuaresmaDec 17, 2024
8f24c9e
Fix avatar for non squared icon
BrunoQuaresmaDec 17, 2024
e689d42
Replace avatar o template menu
BrunoQuaresmaDec 17, 2024
6f8c280
Move UserAvatar to modules/users
BrunoQuaresmaDec 17, 2024
e72cecb
Only use one letter on fallback to simplify changes
BrunoQuaresmaDec 17, 2024
758f240
Refactor UserAvatar to user the new Avatar component
BrunoQuaresmaDec 17, 2024
22c241c
Move GroupAvatar to modules/groups
BrunoQuaresmaDec 17, 2024
8ecbfc5
Update GroupAvatar to use latest Avatar component
BrunoQuaresmaDec 17, 2024
081bb47
Move BuildAvatar to modules/builds
BrunoQuaresmaDec 17, 2024
83ca623
Update BuildAvatar to use latest Avatar component
BrunoQuaresmaDec 17, 2024
dff92f7
Move AvatarCard to components/Avatar
BrunoQuaresmaDec 17, 2024
52ea623
Update AccountUserGroups to use the new Avatar component
BrunoQuaresmaDec 17, 2024
16c194d
Move AvatarData to components/Avatar
BrunoQuaresmaDec 17, 2024
1caeffd
Update AvatarData to use new Avatar component
BrunoQuaresmaDec 17, 2024
4f12e95
Update remaining components
BrunoQuaresmaDec 17, 2024
76c211d
Fix lint issues
BrunoQuaresmaDec 17, 2024
08fee38
Remove deprecated Avatar
BrunoQuaresmaDec 17, 2024
bfd9244
Merge branch 'main' of https://github.com/coder/coder into bq/use-new…
BrunoQuaresmaDec 18, 2024
d6fc56b
Merge branch 'main' of https://github.com/coder/coder into bq/use-new…
BrunoQuaresmaDec 18, 2024
f47ed9d
Align avatar with the timeline vertical line
BrunoQuaresmaDec 18, 2024
7304999
Fix selected template avatar
BrunoQuaresmaDec 18, 2024
9fdb4fd
Adjust components for the new Avatar
BrunoQuaresmaDec 18, 2024
0a0b1cf
Fix a few style inconsistencies
BrunoQuaresmaDec 18, 2024
f079dcd
Merge branch 'main' of https://github.com/coder/coder into bq/use-new…
BrunoQuaresmaDec 19, 2024
dc410a7
Simplify Avatar usage
BrunoQuaresmaDec 19, 2024
37a678d
Fix missed src
BrunoQuaresmaDec 19, 2024
9e03115
Fix remaining issues
BrunoQuaresmaDec 19, 2024
6453ce3
E2E fix + review requests
BrunoQuaresmaDec 19, 2024
bb8e9af
Fix fmt
BrunoQuaresmaDec 19, 2024
417cab7
Fix assertions
BrunoQuaresmaDec 20, 2024
ad61871
Fix locators
BrunoQuaresmaDec 20, 2024
d57833b
Change locator to use .summary
BrunoQuaresmaDec 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
32 changes: 14 additions & 18 deletionssite/e2e/tests/deployment/workspaceProxies.spec.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -18,13 +18,12 @@ test("default proxy is online", async ({ page }) => {
`table.MuiTable-root tr[data-testid="primary"]`,
);

const workspaceProxyName = workspaceProxyPrimary.locator("td.name span");
const workspaceProxyURL = workspaceProxyPrimary.locator("td.url");
const workspaceProxyStatus = workspaceProxyPrimary.locator("td.status span");
const summary = workspaceProxyPrimary.locator(".summary");
const status = workspaceProxyPrimary.locator(".status");

await expect(workspaceProxyName).toHaveText("Default");
await expect(workspaceProxyURL).toHaveText(`http://localhost:${coderPort}`);
await expect(workspaceProxyStatus).toHaveText("Healthy");
await expect(summary).toContainText("Default");
await expect(summary).toContainText(`http://localhost:${coderPort}`);
await expect(status).toContainText("Healthy");
});

test("custom proxy is online", async ({ page }) => {
Expand All@@ -50,19 +49,16 @@ test("custom proxy is online", async ({ page }) => {
waitUntil: "domcontentloaded",
});

constworkspaceProxy = page.locator("table.MuiTable-root tr", {
constproxyRow = page.locator("table.MuiTable-root tr", {
hasText: proxyName,
});

const workspaceProxyName = workspaceProxy.locator("td.name span");
const workspaceProxyURL = workspaceProxy.locator("td.url");
const workspaceProxyStatus = workspaceProxy.locator("td.status span");
const summary = proxyRow.locator(".summary");
const status = proxyRow.locator(".status");

await expect(workspaceProxyName).toHaveText(proxyName);
await expect(workspaceProxyURL).toHaveText(
`http://127.0.0.1:${workspaceProxyPort}`,
);
await expect(workspaceProxyStatus).toHaveText("Healthy");
await expect(summary).toContainText(proxyName);
await expect(summary).toContainText(`http://127.0.0.1:${workspaceProxyPort}`);
await expect(status).toContainText("Healthy");

// Tear down the proxy
await stopWorkspaceProxy(proxyServer);
Expand All@@ -82,13 +78,13 @@ const waitUntilWorkspaceProxyIsHealthy = async (
while (retries < maxRetries) {
await page.reload();

constworkspaceProxy = page.locator("table.MuiTable-root tr", {
constproxyRow = page.locator("table.MuiTable-root tr", {
hasText: proxyName,
});
constworkspaceProxyStatus =workspaceProxy.locator("td.status span");
conststatus =proxyRow.locator(".status");

try {
await expect(workspaceProxyStatus).toHaveText("Healthy", {
await expect(status).toContainText("Healthy", {
timeout: 1_000,
});
return; // healthy!
Expand Down
39 changes: 21 additions & 18 deletionssite/src/components/Avatar/Avatar.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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",
},
};

Expand All@@ -16,7 +16,7 @@ export const ImageLgSize: Story = {
args: { size: "lg" },
};

export constImageDefaultSize: Story = {};
export constImageMdSize: Story = {};

export const ImageSmSize: Story = {
args: { size: "sm" },
Expand All@@ -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 constIconDefaultSize: Story = {
export constIconMdSize: 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 constFallbackDefaultSize: Story = {
export constFallbackMdSize: 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",
},
};
98 changes: 48 additions & 50 deletionssite/src/components/Avatar/Avatar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,92 @@
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",
md: "h-[--avatar-default] w-[--avatar-default] text-2xs",
sm: "h-[--avatar-sm] w-[--avatar-sm] text-[8px]",
},
variant: {
default:"",
icon:"",
default:null,
icon:null,
},
},
defaultVariants: {
size: "default",
size: "md",
},
compoundVariants: [
{
size: "lg",
variant: "icon",
className: "p-[9px]",
className: "p-2",
},
{
size: "default",
size: "md",
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;

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, 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)}
/>
{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 };
Original file line numberDiff line numberDiff line change
Expand Up@@ -13,7 +13,6 @@ export const WithImage: Story = {
args: {
header: "Coder",
imgUrl: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
altText: "Coder",
subtitle: "56 members",
},
};
Expand Down
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,17 @@
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";
};

export const AvatarCard: FC<AvatarCardProps> = ({
header,
imgUrl,
altText,
background,
subtitle,
maxWidth = "none",
}) => {
Expand DownExpand Up@@ -72,9 +67,7 @@ export const AvatarCard: FC<AvatarCardProps> = ({
)}
</div>

<Avatar background={background} src={imgUrl} alt={altText} size="md">
{header}
</Avatar>
<Avatar size="lg" src={imgUrl} fallback={header} />
</div>
);
};
Original file line numberDiff line numberDiff line change
@@ -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 {
Expand DownExpand Up@@ -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%",
Expand Down
Loading
Loading
[8]ページ先頭
©2009-2025 Movatter.jp