vertically center icons in icon-only buttons

[momesana]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• 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

fix #48071

💡 Background and solution

Currently the icons on buttons aren't vertically centered. This is a regression of a prior issue prevalent in antd 4, namely #31701. To illustrate this I have created the following side-by-side screenshot, highlighting the affected buttons and the icons in different colors and with a dashed border. The left side shows the alignment as is whereas the right side shows the fixed version:

An alternative to the applied fix would've been the following code but I chose the former for brevity:

diff --git a/components/button/style/index.ts b/components/button/style/index.ts
index 9b38143ae7..b7b28e774d 100644
--- a/components/button/style/index.ts
+++ b/components/button/style/index.ts
@@ -419,9 +419,13 @@ const genButtonStyle = (token: ButtonToken, prefixCls: string = ''): CSSInterpol
         borderRadius,
 
         [`&${iconOnlyCls}`]: {
+          display: 'inline-flex',
           width: controlHeight,
           paddingInlineStart: 0,
           paddingInlineEnd: 0,
+          [`${componentCls}-icon`]: {
+            margin: 'auto',
+          },
           [`&${componentCls}-round`]: {
             width: 'auto',
           },

📝 Changelog

Language	Changelog
🇺🇸 English	vertically center icons on icon-only buttons
🇨🇳 Chinese

☑️ Self-Check before Merge

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

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

👁 Visual Regression Report for PR #48178 Failed ❌

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

Image name	Expected	Actual	Diff
auto-complete-certain-category.compact.png
auto-complete-certain-category.compact.css-var.png
auto-complete-certain-category.dark.png
auto-complete-certain-category.dark.css-var.png
auto-complete-certain-category.default.png
auto-complete-certain-category.default.css-var.png
auto-complete-form-debug.compact.png
auto-complete-form-debug.compact.css-var.png
auto-complete-form-debug.dark.png
auto-complete-form-debug.dark.css-var.png

Check Full Report for details

[github-actions]

[codesandbox-ci]

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.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (82720bc) to head (ad0c05f).
Report is 17 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master    #48178   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          736       736           
  Lines        12683     12690    +7     
  Branches      3326      3329    +3     
=========================================
+ Hits         12683     12690    +7     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[li-jia-nan]

the same as：

• style: fix Button align issue #47318

[momesana]

the same as：

• style: fix Button align issue #47318

ah, I hadn't been able to find the issue on the issue tracker. My bad. Well, hopefully one of the solutions will be merged soon. The other PR is a bit invasive, applying the fix to all styles whereas this PR only applies it to icon-only buttons.
Whatever the solution, it would be nice to see the issue being taken care of.

[li-jia-nan]

@afc163 @MadCcc @zombieJ I think it's ok

[github-actions]

🎉 Thank you for your contribution! If you have not yet joined our DingTalk community group, please feel free to join us (when joining, please provide the link to this PR).

🎉 感谢您的贡献！如果您还没有加入钉钉社区群，请扫描下方二维码加入我们（加群时请提供此 PR 链接）。