mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-18 11:18:14 +08:00
Code Issues Actions 15 Packages Projects Releases Wiki Activity

fix: Avatar.Group item could be wrapped (#39993)

Browse Source 
* fix: AvatarGroup item could be wrapped

* test: update snapshot

* refactor avatarGroup space

* test: update snapshot

* revert avatarGroupBorderColor
This commit is contained in:
afc163 2023-01-04 17:31:31 +08:00 committed by GitHub
parent dc2686d7eb
commit 6683c58b2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -345,17 +345,21 @@ Array [
src="https://joeschmoe.io/api/v1/random" src="https://joeschmoe.io/api/v1/random"
/> />
</span> </span>
<span <a
class="ant-avatar ant-avatar-circle" href="https://ant.design"
style="background-color:#f56a00"
> >
<span <span
class="ant-avatar-string" class="ant-avatar ant-avatar-circle"
style="opacity:0" style="background-color:#f56a00"
> >
K <span
class="ant-avatar-string"
style="opacity:0"
>
K
</span>
</span> </span>
</span> </a>
<span <span
class="ant-avatar ant-avatar-circle ant-avatar-icon" class="ant-avatar ant-avatar-circle ant-avatar-icon"
style="background-color:#87d068" style="background-color:#87d068"

18
components/avatar/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -345,17 +345,21 @@ Array [
src="https://joeschmoe.io/api/v1/random" src="https://joeschmoe.io/api/v1/random"
/> />
</span> </span>
<span <a
class="ant-avatar ant-avatar-circle" href="https://ant.design"
style="background-color:#f56a00"
> >
<span <span
class="ant-avatar-string" class="ant-avatar ant-avatar-circle"
style="opacity:0" style="background-color:#f56a00"
> >
K <span
class="ant-avatar-string"
style="opacity:0"
>
K
</span>
</span> </span>
</span> </a>
<span <span
class="ant-avatar ant-avatar-circle ant-avatar-icon" class="ant-avatar ant-avatar-circle ant-avatar-icon"
style="background-color:#87d068" style="background-color:#87d068"

4
components/avatar/demo/group.tsx
View File

@ -6,7 +6,9 @@ const App: React.FC = () => (
<> <>
<Avatar.Group> <Avatar.Group>
<Avatar src="https://joeschmoe.io/api/v1/random" /> <Avatar src="https://joeschmoe.io/api/v1/random" />
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar> <a href="https://ant.design">
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
</a>
<Tooltip title="Ant User" placement="top"> <Tooltip title="Ant User" placement="top">
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} /> <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
</Tooltip> </Tooltip>

15
components/avatar/style/index.ts
View File

@ -110,7 +110,7 @@ const genBaseStyle: GenerateStyle<AvatarToken> = (token) => {
}; };
const genGroupStyle: GenerateStyle<AvatarToken> = (token) => { const genGroupStyle: GenerateStyle<AvatarToken> = (token) => {
const { componentCls, avatarGroupBorderColor, avatarGroupOverlapping, avatarGroupSpace } = token; const { componentCls, avatarGroupBorderColor, avatarGroupSpace } = token;
return { return {
[`${componentCls}-group`]: { [`${componentCls}-group`]: {
@ -118,16 +118,10 @@ const genGroupStyle: GenerateStyle<AvatarToken> = (token) => {
[`${componentCls}`]: { [`${componentCls}`]: {
borderColor: avatarGroupBorderColor, borderColor: avatarGroupBorderColor,
[`&:not(:first-child)`]: {
marginInlineStart: -avatarGroupOverlapping,
},
}, },
[`&-popover`]: { [`> *:not(:first-child)`]: {
[`${componentCls} + ${componentCls}`]: { marginInlineStart: avatarGroupSpace,
marginInlineStart: avatarGroupSpace,
},
}, },
}, },
}; };
@ -162,8 +156,7 @@ export default genComponentStyleHook('Avatar', (token) => {
avatarFontSizeBase: Math.round((fontSizeLG + fontSizeXL) / 2), avatarFontSizeBase: Math.round((fontSizeLG + fontSizeXL) / 2),
avatarFontSizeLG: fontSizeHeading3, avatarFontSizeLG: fontSizeHeading3,
avatarFontSizeSM: fontSize, avatarFontSizeSM: fontSize,
avatarGroupOverlapping: marginXS, avatarGroupSpace: -marginXS,
avatarGroupSpace: marginXS,
avatarGroupBorderColor: colorBorderBg, avatarGroupBorderColor: colorBorderBg,
}); });