ant-design / ant-design

An enterprise-class UI design language and React UI library

https://ant.design

MIT License

90.42k stars 46.41k forks source link

fix: fix custom icon vertical-align in step component #48649

Closed nova1751 closed 2 weeks ago

nova1751 commented 2 weeks ago

中文版模板 / Chinese template

🤔 This is a ...

[ ] New feature
[x] Bug fix
[ ] Site / documentation update
[ ] Demo update
[x] Component style update
[ ] TypeScript definition update
[ ] Bundle size optimization
[ ] Performance optimization
[ ] Enhancement feature
[ ] Internationalization
[ ] Refactoring
[ ] Code style optimization
[ ] Test Case
[ ] Branch merge
[ ] Workflow
[ ] Other (about what?)

🔗 Related issue link

48641

💡 Background and solution

The custom icon is not centered vertically. Flex layout can solve this problem.

📝 Changelog

Language	Changelog
🇺🇸 English	The Steps component custom icon is not vertically centered
🇨🇳 Chinese	Steps 自定义图标没有垂直居中对齐

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

[x] Doc is updated/provided or not needed
[x] Demo is updated/provided or not needed
[x] TypeScript definition is updated/provided or not needed
[x] Changelog is provided or not needed

stackblitz[bot] commented 2 weeks ago

Run & review this pull request in StackBlitz Codeflow.

github-actions[bot] commented 2 weeks ago

github-actions[bot] commented 2 weeks ago

👁 Visual Regression Report for PR #48649 Failed ❌

🎯 Target branch: master (bf330cbedbdc995e045953a3c13fa14915e8594b) 📖 View Full Report ↗︎

Expected (Branch master)	Actual (Current PR)	Diff
steps-component-token.compact.png	steps-component-token.compact.png
steps-component-token.compact.png	steps-component-token.compact.css-var.png
steps-component-token.dark.png	steps-component-token.dark.png
steps-component-token.dark.png	steps-component-token.dark.css-var.png
steps-component-token.default.png	steps-component-token.default.png
steps-component-token.default.png	steps-component-token.default.css-var.png
table-summary.default.png	table-summary.default.css-var.png

Check Full Report for details

codesandbox-ci[bot] commented 2 weeks ago

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Wxh16144 commented 2 weeks ago

👍，flex 一把梭不错。感觉 #48650 才是正确的解法，原因：https://github.com/ant-design/ant-design/pull/42184#discussion_r1580541152

注意到对方是 First-time contributor，所以 pick 那边的 PR 吧，把机会跟更多的首次贡献者～