Skip to content
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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

fix: use flex to correct avatar child position #47236

Merged
merged 10 commits into from
Jan 31, 2024
Merged

fix: use flex to correct avatar child position #47236

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b651e83
fix: remove avatar border when height less then 16
lcgash Jan 30, 2024
f7e95ce
fix: 使用 flex 完成子元素居中布局
lcgash Jan 31, 2024
27166ae
fix: fix avatar tests snapshot
lcgash Jan 31, 2024
bcc0caf
fix: fix avatar tests snapshot
lcgash Jan 31, 2024
0b175bd
Update components/avatar/style/index.ts
lcgash Jan 31, 2024
6df38df
fix: changealign
lcgash Jan 31, 2024
3f8ba3e
fix: update avatar snapshots
lcgash Jan 31, 2024
bd4678d
fix:update snapshot
lcgash Jan 31, 2024
16df09e
fix: update snapshot
lcgash Jan 31, 2024
ef3c1b8
fix: update snapshot
lcgash Jan 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
40 changes: 20 additions & 20 deletions components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ exports[`Avatar Render adjusts component size to 24 when window size is xs 1`] =
<div>
<span
class="ant-avatar ant-avatar-circle"
style="width: 24px; height: 24px; line-height: 24px; font-size: 18px;"
style="width: 24px; height: 24px; font-size: 18px;"
>
<span
class="ant-avatar-string"
style="transform: scale(0.32) translateX(-50%);"
style="transform: scale(0.32);"
/>
</span>
</div>
Expand All @@ -18,11 +18,11 @@ exports[`Avatar Render adjusts component size to 32 when window size is sm 1`] =
<div>
<span
class="ant-avatar ant-avatar-circle"
style="width: 32px; height: 32px; line-height: 32px; font-size: 18px;"
style="width: 32px; height: 32px; font-size: 18px;"
>
<span
class="ant-avatar-string"
style="transform: scale(0.32) translateX(-50%);"
style="transform: scale(0.32);"
/>
</span>
</div>
Expand All @@ -32,11 +32,11 @@ exports[`Avatar Render adjusts component size to 40 when window size is md 1`] =
<div>
<span
class="ant-avatar ant-avatar-circle"
style="width: 40px; height: 40px; line-height: 40px; font-size: 18px;"
style="width: 40px; height: 40px; font-size: 18px;"
>
<span
class="ant-avatar-string"
style="transform: scale(0.32) translateX(-50%);"
style="transform: scale(0.32);"
/>
</span>
</div>
Expand All @@ -46,11 +46,11 @@ exports[`Avatar Render adjusts component size to 64 when window size is lg 1`] =
<div>
<span
class="ant-avatar ant-avatar-circle"
style="width: 64px; height: 64px; line-height: 64px; font-size: 18px;"
style="width: 64px; height: 64px; font-size: 18px;"
>
<span
class="ant-avatar-string"
style="transform: scale(0.32) translateX(-50%);"
style="transform: scale(0.32);"
/>
</span>
</div>
Expand All @@ -60,11 +60,11 @@ exports[`Avatar Render adjusts component size to 80 when window size is xl 1`] =
<div>
<span
class="ant-avatar ant-avatar-circle"
style="width: 80px; height: 80px; line-height: 80px; font-size: 18px;"
style="width: 80px; height: 80px; font-size: 18px;"
>
<span
class="ant-avatar-string"
style="transform: scale(0.32) translateX(-50%);"
style="transform: scale(0.32);"
/>
</span>
</div>
Expand All @@ -74,11 +74,11 @@ exports[`Avatar Render adjusts component size to 100 when window size is xxl 1`]
<div>
<span
class="ant-avatar ant-avatar-circle"
style="width: 100px; height: 100px; line-height: 100px; font-size: 18px;"
style="width: 100px; height: 100px; font-size: 18px;"
>
<span
class="ant-avatar-string"
style="transform: scale(0.32) translateX(-50%);"
style="transform: scale(0.32);"
/>
</span>
</div>
Expand All @@ -90,7 +90,7 @@ exports[`Avatar Render fallback 1`] = `
>
<span
class="ant-avatar-string"
style="transform: scale(1) translateX(-50%);"
style="transform: scale(1);"
>
A
</span>
Expand All @@ -103,15 +103,15 @@ exports[`Avatar Render rtl render component should be rendered correctly in RTL
>
<span
class="ant-avatar-string"
style="transform: scale(0.72) translateX(-50%);"
style="transform: scale(0.72);"
/>
</span>
`;

exports[`Avatar Render should calculate scale of avatar children correctly 1`] = `
<span
class="ant-avatar-string"
style="transform: scale(0.72) translateX(-50%);"
style="transform: scale(0.72);"
>
Avatar
</span>
Expand All @@ -120,7 +120,7 @@ exports[`Avatar Render should calculate scale of avatar children correctly 1`] =
exports[`Avatar Render should calculate scale of avatar children correctly 2`] = `
<span
class="ant-avatar-string"
style="transform: scale(0.72) translateX(-50%);"
style="transform: scale(0.72);"
>
xx
</span>
Expand All @@ -129,7 +129,7 @@ exports[`Avatar Render should calculate scale of avatar children correctly 2`] =
exports[`Avatar Render should calculate scale of avatar children correctly with gap 1`] = `
<span
class="ant-avatar-string"
style="transform: scale(0.36) translateX(-50%);"
style="transform: scale(0.36);"
>
Avatar
</span>
Expand All @@ -151,7 +151,7 @@ exports[`Avatar Render should show image on success after a failure state 1`] =
>
<span
class="ant-avatar-string"
style="transform: scale(1) translateX(-50%);"
style="transform: scale(1);"
>
Fallback
</span>
Expand All @@ -171,11 +171,11 @@ exports[`Avatar Render should show image on success after a failure state 2`] =
exports[`Avatar Render support size is number 1`] = `
<span
class="ant-avatar ant-avatar-circle"
style="width: 100px; height: 100px; line-height: 100px; font-size: 18px;"
style="width: 100px; height: 100px; font-size: 18px;"
>
<span
class="ant-avatar-string"
style="line-height: 100px; transform: scale(0.32) translateX(-50%);"
style="line-height: 100px; transform: scale(0.32);"
>
TestString
</span>
Expand Down
42 changes: 21 additions & 21 deletions components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ exports[`renders components/avatar/demo/basic.tsx extend context correctly 1`] =
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon"
style="width: 64px; height: 64px; line-height: 64px; font-size: 32px;"
style="width: 64px; height: 64px; font-size: 32px;"
>
<span
aria-label="user"
Expand Down Expand Up @@ -229,7 +229,7 @@ exports[`renders components/avatar/demo/basic.tsx extend context correctly 1`] =
>
<span
class="ant-avatar ant-avatar-square ant-avatar-icon"
style="width: 64px; height: 64px; line-height: 64px; font-size: 32px;"
style="width: 64px; height: 64px; font-size: 32px;"
>
<span
aria-label="user"
Expand Down Expand Up @@ -379,7 +379,7 @@ Array [
>
<span
class="ant-avatar-string"
style="transform: scale(1) translateX(-50%);"
style="transform: scale(1);"
>
K
</span>
Expand All @@ -390,7 +390,7 @@ Array [
>
<span
class="ant-avatar-string"
style="transform: scale(1) translateX(-50%);"
style="transform: scale(1);"
>
+2
</span>
Expand Down Expand Up @@ -588,7 +588,7 @@ Array [
>
<span
class="ant-avatar-string"
style="transform: scale(1) translateX(-50%);"
style="transform: scale(1);"
>
U
</span>
Expand Down Expand Up @@ -668,7 +668,7 @@ Array [
>
<span
class="ant-avatar-string"
style="transform: scale(1) translateX(-50%);"
style="transform: scale(1);"
>
K
</span>
Expand Down Expand Up @@ -762,7 +762,7 @@ Array [
>
<span
class="ant-avatar-string"
style="transform: scale(1) translateX(-50%);"
style="transform: scale(1);"
>
K
</span>
Expand All @@ -773,7 +773,7 @@ Array [
>
<span
class="ant-avatar-string"
style="transform: scale(1) translateX(-50%);"
style="transform: scale(1);"
>
+2
</span>
Expand Down Expand Up @@ -888,7 +888,7 @@ Array [
>
<span
class="ant-avatar-string"
style="transform: scale(1) translateX(-50%);"
style="transform: scale(1);"
>
K
</span>
Expand All @@ -899,7 +899,7 @@ Array [
>
<span
class="ant-avatar-string"
style="transform: scale(1) translateX(-50%);"
style="transform: scale(1);"
>
+2
</span>
Expand Down Expand Up @@ -1014,7 +1014,7 @@ Array [
>
<span
class="ant-avatar-string"
style="transform: scale(1) translateX(-50%);"
style="transform: scale(1);"
>
K
</span>
Expand All @@ -1025,7 +1025,7 @@ Array [
>
<span
class="ant-avatar-string"
style="transform: scale(1) translateX(-50%);"
style="transform: scale(1);"
>
+2
</span>
Expand Down Expand Up @@ -1133,7 +1133,7 @@ Array [
>
<span
class="ant-avatar-string"
style="transform: scale(1) translateX(-50%);"
style="transform: scale(1);"
>
A
</span>
Expand All @@ -1144,7 +1144,7 @@ Array [
>
<span
class="ant-avatar-string"
style="transform: scale(1) translateX(-50%);"
style="transform: scale(1);"
>
K
</span>
Expand Down Expand Up @@ -1206,7 +1206,7 @@ exports[`renders components/avatar/demo/group.tsx extend context correctly 2`] =
exports[`renders components/avatar/demo/responsive.tsx extend context correctly 1`] = `
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon"
style="width: 24px; height: 24px; line-height: 24px; font-size: 12px;"
style="width: 24px; height: 24px; font-size: 12px;"
>
<span
aria-label="ant-design"
Expand Down Expand Up @@ -1284,7 +1284,7 @@ Array [
>
<span
class="ant-avatar-string"
style="transform: scale(1) translateX(-50%);"
style="transform: scale(1);"
>
Avatar
</span>
Expand All @@ -1306,7 +1306,7 @@ Array [
>
<span
class="ant-avatar-string"
style="transform: scale(1) translateX(-50%);"
style="transform: scale(1);"
>
Avatar
</span>
Expand Down Expand Up @@ -1366,7 +1366,7 @@ exports[`renders components/avatar/demo/type.tsx extend context correctly 1`] =
>
<span
class="ant-avatar-string"
style="transform: scale(1) translateX(-50%);"
style="transform: scale(1);"
>
U
</span>
Expand All @@ -1377,11 +1377,11 @@ exports[`renders components/avatar/demo/type.tsx extend context correctly 1`] =
>
<span
class="ant-avatar ant-avatar-circle"
style="width: 40px; height: 40px; line-height: 40px; font-size: 18px;"
style="width: 40px; height: 40px; font-size: 18px;"
>
<span
class="ant-avatar-string"
style="line-height: 40px; transform: scale(1) translateX(-50%);"
style="line-height: 40px; transform: scale(1);"
>
USER
</span>
Expand Down Expand Up @@ -1419,7 +1419,7 @@ exports[`renders components/avatar/demo/type.tsx extend context correctly 1`] =
>
<span
class="ant-avatar-string"
style="transform: scale(1) translateX(-50%);"
style="transform: scale(1);"
>
U
</span>
Expand Down
26 changes: 23 additions & 3 deletions components/avatar/__tests__/__snapshots__/demo.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ exports[`renders components/avatar/demo/basic.tsx correctly 1`] = `
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon"
style="width:64px;height:64px;line-height:64px;font-size:32px"
style="width:64px;height:64px;font-size:32px"
>
<span
aria-label="user"
Expand Down Expand Up @@ -213,6 +213,16 @@ exports[`renders components/avatar/demo/basic.tsx correctly 1`] = `
</span>
</span>
</div>
<div class="ant-space-item">
<span class="ant-avatar ant-avatar-circle ant-avatar-icon css-var-rep ant-avatar-css-var" style="width: 14px; height: 14px; font-size: 7px;">
<span role="img" aria-label="user" class="anticon anticon-user">
<svg viewBox="64 64 896 896" focusable="false" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z">
</path>
</svg>
</span>
</span>
</div>
</div>
</div>
<div
Expand All @@ -227,7 +237,7 @@ exports[`renders components/avatar/demo/basic.tsx correctly 1`] = `
>
<span
class="ant-avatar ant-avatar-square ant-avatar-icon"
style="width:64px;height:64px;line-height:64px;font-size:32px"
style="width:64px;height:64px;font-size:32px"
>
<span
aria-label="user"
Expand Down Expand Up @@ -331,6 +341,16 @@ exports[`renders components/avatar/demo/basic.tsx correctly 1`] = `
</span>
</span>
</div>
<div class="ant-space-item">
<span class="ant-avatar ant-avatar-square ant-avatar-icon css-var-rep ant-avatar-css-var" style="width: 14px; height: 14px; font-size: 7px;">
<span role="img" aria-label="user" class="anticon anticon-user">
<svg viewBox="64 64 896 896" focusable="false" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z">
</path>
</svg>
</span>
</span>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -985,7 +1005,7 @@ exports[`renders components/avatar/demo/type.tsx correctly 1`] = `
>
<span
class="ant-avatar ant-avatar-circle"
style="width:40px;height:40px;line-height:40px;font-size:18px"
style="width:40px;height:40px;font-size:18px"
>
<span
class="ant-avatar-string"
Expand Down