mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 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

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

@ -345,6 +345,9 @@ Array [
src="https://joeschmoe.io/api/v1/random"
/>
</span>
<a
href="https://ant.design"
>
<span
class="ant-avatar ant-avatar-circle"
style="background-color:#f56a00"
@ -356,6 +359,7 @@ Array [
K
</span>
</span>
</a>
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon"
style="background-color:#87d068"

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

@ -345,6 +345,9 @@ Array [
src="https://joeschmoe.io/api/v1/random"
/>
</span>
<a
href="https://ant.design"
>
<span
class="ant-avatar ant-avatar-circle"
style="background-color:#f56a00"
@ -356,6 +359,7 @@ Array [
K
</span>
</span>
</a>
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon"
style="background-color:#87d068"

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

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

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

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