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

Commit300ad87

Browse files
refactor: replace and remove deprecated Avatar component (#15930)
Close#14997
1 parent137dc6e commit300ad87

File tree

72 files changed

+461
-915
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+461
-915
lines changed

‎site/e2e/tests/deployment/workspaceProxies.spec.ts

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,12 @@ test("default proxy is online", async ({ page }) => {
2525
`table.MuiTable-root tr[data-testid="primary"]`,
2626
);
2727

28-
constworkspaceProxyName=workspaceProxyPrimary.locator("td.name span");
29-
constworkspaceProxyURL=workspaceProxyPrimary.locator("td.url");
30-
constworkspaceProxyStatus=workspaceProxyPrimary.locator("td.status span");
28+
constsummary=workspaceProxyPrimary.locator(".summary");
29+
conststatus=workspaceProxyPrimary.locator(".status");
3130

32-
awaitexpect(workspaceProxyName).toHaveText("Default");
33-
awaitexpect(workspaceProxyURL).toHaveText(`http://localhost:${coderPort}`);
34-
awaitexpect(workspaceProxyStatus).toHaveText("Healthy");
31+
awaitexpect(summary).toContainText("Default");
32+
awaitexpect(summary).toContainText(`http://localhost:${coderPort}`);
33+
awaitexpect(status).toContainText("Healthy");
3534
});
3635

3736
test("custom proxy is online",async({ page})=>{
@@ -57,19 +56,16 @@ test("custom proxy is online", async ({ page }) => {
5756
waitUntil:"domcontentloaded",
5857
});
5958

60-
constworkspaceProxy=page.locator("table.MuiTable-root tr",{
59+
constproxyRow=page.locator("table.MuiTable-root tr",{
6160
hasText:proxyName,
6261
});
6362

64-
constworkspaceProxyName=workspaceProxy.locator("td.name span");
65-
constworkspaceProxyURL=workspaceProxy.locator("td.url");
66-
constworkspaceProxyStatus=workspaceProxy.locator("td.status span");
63+
constsummary=proxyRow.locator(".summary");
64+
conststatus=proxyRow.locator(".status");
6765

68-
awaitexpect(workspaceProxyName).toHaveText(proxyName);
69-
awaitexpect(workspaceProxyURL).toHaveText(
70-
`http://127.0.0.1:${workspaceProxyPort}`,
71-
);
72-
awaitexpect(workspaceProxyStatus).toHaveText("Healthy");
66+
awaitexpect(summary).toContainText(proxyName);
67+
awaitexpect(summary).toContainText(`http://127.0.0.1:${workspaceProxyPort}`);
68+
awaitexpect(status).toContainText("Healthy");
7369

7470
// Tear down the proxy
7571
awaitstopWorkspaceProxy(proxyServer);
@@ -89,13 +85,13 @@ const waitUntilWorkspaceProxyIsHealthy = async (
8985
while(retries<maxRetries){
9086
awaitpage.reload();
9187

92-
constworkspaceProxy=page.locator("table.MuiTable-root tr",{
88+
constproxyRow=page.locator("table.MuiTable-root tr",{
9389
hasText:proxyName,
9490
});
95-
constworkspaceProxyStatus=workspaceProxy.locator("td.status span");
91+
conststatus=proxyRow.locator(".status");
9692

9793
try{
98-
awaitexpect(workspaceProxyStatus).toHaveText("Healthy",{
94+
awaitexpect(status).toContainText("Healthy",{
9995
timeout:1_000,
10096
});
10197
return;// healthy!
Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
importtype{Meta,StoryObj}from"@storybook/react";
2-
import{Avatar,AvatarFallback,AvatarImage}from"./Avatar";
2+
import{Avatar}from"./Avatar";
33

44
constmeta:Meta<typeofAvatar>={
55
title:"components/Avatar",
66
component:Avatar,
77
args:{
8-
children:<AvatarImagesrc="https://github.com/kylecarbs.png"/>,
8+
src:"https://github.com/kylecarbs.png",
99
},
1010
};
1111

@@ -16,7 +16,7 @@ export const ImageLgSize: Story = {
1616
args:{size:"lg"},
1717
};
1818

19-
exportconstImageDefaultSize:Story={};
19+
exportconstImageMdSize:Story={};
2020

2121
exportconstImageSmSize:Story={
2222
args:{size:"sm"},
@@ -26,48 +26,51 @@ export const IconLgSize: Story = {
2626
args:{
2727
size:"lg",
2828
variant:"icon",
29-
children:(
30-
<AvatarImagesrc="https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png"/>
31-
),
29+
src:"https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png",
3230
},
3331
};
3432

35-
exportconstIconDefaultSize:Story={
33+
exportconstIconMdSize:Story={
3634
args:{
3735
variant:"icon",
38-
children:(
39-
<AvatarImagesrc="https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png"/>
40-
),
36+
src:"https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png",
4137
},
4238
};
4339

4440
exportconstIconSmSize:Story={
4541
args:{
4642
variant:"icon",
4743
size:"sm",
48-
children:(
49-
<AvatarImagesrc="https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png"/>
50-
),
44+
src:"https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png",
45+
},
46+
};
47+
48+
exportconstNonSquaredIcon:Story={
49+
args:{
50+
variant:"icon",
51+
src:"/icon/docker.png",
5152
},
5253
};
5354

5455
exportconstFallbackLgSize:Story={
5556
args:{
57+
src:"",
5658
size:"lg",
57-
58-
children:<AvatarFallback>AR</AvatarFallback>,
59+
fallback:"Adriana Rodrigues",
5960
},
6061
};
6162

62-
exportconstFallbackDefaultSize:Story={
63+
exportconstFallbackMdSize:Story={
6364
args:{
64-
children:<AvatarFallback>AR</AvatarFallback>,
65+
src:"",
66+
fallback:"Adriana Rodrigues",
6567
},
6668
};
6769

6870
exportconstFallbackSmSize:Story={
6971
args:{
72+
src:"",
7073
size:"sm",
71-
children:<AvatarFallback>AR</AvatarFallback>,
74+
fallback:"Adriana Rodrigues",
7275
},
7376
};

‎site/src/components/Avatar/Avatar.tsx

Lines changed: 48 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,92 @@
1-
import*asAvatarPrimitivefrom"@radix-ui/react-avatar";
2-
import{typeVariantProps,cva}from"class-variance-authority";
31
/**
42
* Copied from shadc/ui on 12/16/2024
53
*@see {@link https://ui.shadcn.com/docs/components/avatar}
64
*
75
* This component was updated to support the variants and match the styles from
86
* the Figma design:
97
*@see {@link https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=711-383&t=xqxOSUk48GvDsjGK-0}
8+
*
9+
* It was also simplified to make usage easier and reduce boilerplate.
10+
*@see {@link https://github.com/coder/coder/pull/15930#issuecomment-2552292440}
1011
*/
12+
13+
import{useTheme}from"@emotion/react";
14+
import*asAvatarPrimitivefrom"@radix-ui/react-avatar";
15+
import{typeVariantProps,cva}from"class-variance-authority";
1116
import*asReactfrom"react";
17+
import{getExternalImageStylesFromUrl}from"theme/externalImages";
1218
import{cn}from"utils/cn";
1319

1420
constavatarVariants=cva(
1521
"relative flex shrink-0 overflow-hidden rounded border border-solid bg-surface-secondary text-content-secondary",
1622
{
1723
variants:{
1824
size:{
19-
lg:"h-10 w-10 rounded-[6px] text-sm font-medium",
20-
default:"h-6 w-6 text-2xs",
21-
sm:"h-[18px] w-[18px] text-[8px]",
25+
lg:"h-[--avatar-lg] w-[--avatar-lg] rounded-[6px] text-sm font-medium",
26+
md:"h-[--avatar-default] w-[--avatar-default] text-2xs",
27+
sm:"h-[--avatar-sm] w-[--avatar-sm] text-[8px]",
2228
},
2329
variant:{
24-
default:"",
25-
icon:"",
30+
default:null,
31+
icon:null,
2632
},
2733
},
2834
defaultVariants:{
29-
size:"default",
35+
size:"md",
3036
},
3137
compoundVariants:[
3238
{
3339
size:"lg",
3440
variant:"icon",
35-
className:"p-[9px]",
41+
className:"p-2",
3642
},
3743
{
38-
size:"default",
44+
size:"md",
3945
variant:"icon",
40-
className:"p-[3px]",
46+
className:"p-1",
4147
},
4248
{
4349
size:"sm",
4450
variant:"icon",
45-
className:"p-[2px]",
51+
className:"p-[3px]",
4652
},
4753
],
4854
},
4955
);
5056

51-
exportinterfaceAvatarProps
52-
extendsReact.ComponentPropsWithoutRef<typeofAvatarPrimitive.Root>,
53-
VariantProps<typeofavatarVariants>{}
57+
exporttypeAvatarProps=AvatarPrimitive.AvatarProps&
58+
VariantProps<typeofavatarVariants>&{
59+
src?:string;
60+
61+
fallback?:string;
62+
};
5463

5564
constAvatar=React.forwardRef<
5665
React.ElementRef<typeofAvatarPrimitive.Root>,
5766
AvatarProps
58-
>(({ className, size, variant, ...props},ref)=>(
59-
<AvatarPrimitive.Root
60-
ref={ref}
61-
className={cn(avatarVariants({ size, variant, className}))}
62-
{...props}
63-
/>
64-
));
65-
Avatar.displayName=AvatarPrimitive.Root.displayName;
66-
67-
constAvatarImage=React.forwardRef<
68-
React.ElementRef<typeofAvatarPrimitive.Image>,
69-
React.ComponentPropsWithoutRef<typeofAvatarPrimitive.Image>
70-
>(({ className, ...props},ref)=>(
71-
<AvatarPrimitive.Image
72-
ref={ref}
73-
className={cn("aspect-square h-full w-full",className)}
74-
{...props}
75-
/>
76-
));
77-
AvatarImage.displayName=AvatarPrimitive.Image.displayName;
67+
>(({ className, size, variant, src, fallback, children, ...props},ref)=>{
68+
consttheme=useTheme();
7869

79-
constAvatarFallback=React.forwardRef<
80-
React.ElementRef<typeofAvatarPrimitive.Fallback>,
81-
React.ComponentPropsWithoutRef<typeofAvatarPrimitive.Fallback>
82-
>(({ className, ...props},ref)=>(
83-
<AvatarPrimitive.Fallback
84-
ref={ref}
85-
className={cn(
86-
"flex h-full w-full items-center justify-center rounded-full",
87-
className,
88-
)}
89-
{...props}
90-
/>
91-
));
92-
AvatarFallback.displayName=AvatarPrimitive.Fallback.displayName;
70+
return(
71+
<AvatarPrimitive.Root
72+
ref={ref}
73+
className={cn(avatarVariants({ size, variant, className}))}
74+
{...props}
75+
>
76+
<AvatarPrimitive.Image
77+
src={src}
78+
className="aspect-square h-full w-full object-contain"
79+
css={getExternalImageStylesFromUrl(theme.externalImages,src)}
80+
/>
81+
{fallback&&(
82+
<AvatarPrimitive.FallbackclassName="flex h-full w-full items-center justify-center rounded-full">
83+
{fallback.charAt(0).toUpperCase()}
84+
</AvatarPrimitive.Fallback>
85+
)}
86+
{children}
87+
</AvatarPrimitive.Root>
88+
);
89+
});
90+
Avatar.displayName=AvatarPrimitive.Root.displayName;
9391

94-
export{Avatar,AvatarImage,AvatarFallback};
92+
export{Avatar};

‎site/src/components/AvatarCard/AvatarCard.stories.tsxrenamed to‎site/src/components/Avatar/AvatarCard.stories.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ export const WithImage: Story = {
1313
args:{
1414
header:"Coder",
1515
imgUrl:"https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
16-
altText:"Coder",
1716
subtitle:"56 members",
1817
},
1918
};

‎site/src/components/AvatarCard/AvatarCard.tsxrenamed to‎site/src/components/Avatar/AvatarCard.tsx

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,17 @@
11
import{typeCSSObject,useTheme}from"@emotion/react";
2-
import{Avatar}from"components/deprecated/Avatar/Avatar";
2+
import{Avatar}from"components/Avatar/Avatar";
33
importtype{FC,ReactNode}from"react";
44

55
typeAvatarCardProps={
66
header:string;
77
imgUrl:string;
8-
altText:string;
9-
background?:boolean;
10-
118
subtitle?:ReactNode;
129
maxWidth?:number|"none";
1310
};
1411

1512
exportconstAvatarCard:FC<AvatarCardProps>=({
1613
header,
1714
imgUrl,
18-
altText,
19-
background,
2015
subtitle,
2116
maxWidth="none",
2217
})=>{
@@ -72,9 +67,7 @@ export const AvatarCard: FC<AvatarCardProps> = ({
7267
)}
7368
</div>
7469

75-
<Avatarbackground={background}src={imgUrl}alt={altText}size="md">
76-
{header}
77-
</Avatar>
70+
<Avatarsize="lg"src={imgUrl}fallback={header}/>
7871
</div>
7972
);
8073
};

‎site/src/components/AvatarData/AvatarData.tsxrenamed to‎site/src/components/Avatar/AvatarData.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import{useTheme}from"@emotion/react";
2+
import{Avatar}from"components/Avatar/Avatar";
23
import{Stack}from"components/Stack/Stack";
3-
import{Avatar}from"components/deprecated/Avatar/Avatar";
44
importtype{FC,ReactNode}from"react";
55

66
exportinterfaceAvatarDataProps{
@@ -29,17 +29,17 @@ export const AvatarData: FC<AvatarDataProps> = ({
2929
consttheme=useTheme();
3030
if(!avatar){
3131
avatar=(
32-
<Avatarbackgroundsrc={src}>
33-
{(typeoftitle==="string" ?title :imgFallbackText)||"-"}
34-
</Avatar>
32+
<Avatar
33+
src={src}
34+
fallback={(typeoftitle==="string" ?title :imgFallbackText)||"-"}
35+
/>
3536
);
3637
}
3738

3839
return(
3940
<Stack
40-
spacing={1.5}
41+
spacing={1}
4142
direction="row"
42-
alignItems="center"
4343
css={{
4444
minHeight:40,// Make it predictable for the skeleton
4545
width:"100%",

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp