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

Commitbadebc7

Browse files
chore: add new avatar component (#15882)
Related to#14997- Add a new `Avatar` component based on the [new avatardesign](https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=711-383&t=xqxOSUk48GvDsjGK-0).- Deprecate existent `Avatar` component.
1 parent468ffd9 commitbadebc7

File tree

33 files changed

+420
-161
lines changed

33 files changed

+420
-161
lines changed

‎site/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
"@mui/system":"5.16.7",
5151
"@mui/utils":"5.16.6",
5252
"@mui/x-tree-view":"7.18.0",
53+
"@radix-ui/react-avatar":"1.1.2",
5354
"@radix-ui/react-dialog":"1.1.2",
5455
"@radix-ui/react-label":"2.1.0",
5556
"@radix-ui/react-slider":"1.2.1",

‎site/pnpm-lock.yaml‎

Lines changed: 81 additions & 1 deletion
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.
Lines changed: 38 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,73 @@
1-
importPauseIconfrom"@mui/icons-material/PauseOutlined";
21
importtype{Meta,StoryObj}from"@storybook/react";
3-
import{Avatar,AvatarIcon}from"./Avatar";
2+
import{Avatar,AvatarFallback,AvatarImage}from"./Avatar";
43

54
constmeta:Meta<typeofAvatar>={
65
title:"components/Avatar",
76
component:Avatar,
7+
args:{
8+
children:<AvatarImagesrc="https://github.com/kylecarbs.png"/>,
9+
},
810
};
911

1012
exportdefaultmeta;
1113
typeStory=StoryObj<typeofAvatar>;
1214

13-
exportconstWithLetter:Story={
14-
args:{
15-
children:"Coder",
16-
},
15+
exportconstImageLgSize:Story={
16+
args:{size:"lg"},
1717
};
1818

19-
exportconstWithLetterXL={
19+
exportconstImageDefaultSize:Story={};
20+
21+
exportconstImageSmSize:Story={
22+
args:{size:"sm"},
23+
};
24+
25+
exportconstIconLgSize:Story={
2026
args:{
21-
children:"Coder",
22-
size:"xl",
27+
size:"lg",
28+
variant:"icon",
29+
children:(
30+
<AvatarImagesrc="https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png"/>
31+
),
2332
},
2433
};
2534

26-
exportconstWithImage={
35+
exportconstIconDefaultSize:Story={
2736
args:{
28-
src:"https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
37+
variant:"icon",
38+
children:(
39+
<AvatarImagesrc="https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png"/>
40+
),
2941
},
3042
};
3143

32-
exportconstWithImageXL={
44+
exportconstIconSmSize:Story={
3345
args:{
34-
src:"https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
35-
size:"xl",
46+
variant:"icon",
47+
size:"sm",
48+
children:(
49+
<AvatarImagesrc="https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png"/>
50+
),
3651
},
3752
};
3853

39-
exportconstWithMuiIcon={
54+
exportconstFallbackLgSize:Story={
4055
args:{
41-
background:true,
42-
children:<PauseIcon/>,
56+
size:"lg",
57+
58+
children:<AvatarFallback>AR</AvatarFallback>,
4359
},
4460
};
4561

46-
exportconstWithMuiIconXL={
62+
exportconstFallbackDefaultSize:Story={
4763
args:{
48-
background:true,
49-
children:<PauseIcon/>,
50-
size:"xl",
64+
children:<AvatarFallback>AR</AvatarFallback>,
5165
},
5266
};
5367

54-
exportconstWithAvatarIcon={
68+
exportconstFallbackSmSize:Story={
5569
args:{
56-
background:true,
57-
children:<AvatarIconsrc="/icon/database.svg"alt="Database"/>,
70+
size:"sm",
71+
children:<AvatarFallback>AR</AvatarFallback>,
5872
},
5973
};

0 commit comments

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