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.

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

fix: Popconfirm margin problem when icon is null #42433

Merged
merged 7 commits into from
May 17, 2023
Merged

Conversation

afc163
Copy link
Member

@afc163 afc163 commented May 17, 2023

[中文版模板 / Chinese template]

🤔 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

close #42417 (comment)

💡 Background and solution

重构了 Popconfirm 的 dom 结构,如果手动覆盖样式可能会被影响。

核心改动在:https://github.com/ant-design/ant-design/pull/42433/files#diff-d57f0a697c7d1520b5a3174edf0317ae67cb31369b7ca569afa32ce074e2c770

before after
图片 图片

📝 Changelog

Language Changelog
🇺🇸 English Refactor Popconfirm DOM structure to fix extra margin before title and description when icon={null}.
🇨🇳 Chinese 重构 Popconfirm DOM 结构以解决 icon={null}titledescription 的多余 margin 问题。

☑️ 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

🚀 Summary

🤖 Generated by Copilot at 69e3c73

This pull request enhances the popconfirm component by refactoring its message rendering, improving its style and alignment, and fixing a test file typo. It affects the files components/popconfirm/PurePanel.tsx, components/popconfirm/style/index.tsx, and components/popconfirm/__tests__/index.test.tsx.

🔍 Walkthrough

🤖 Generated by Copilot at 69e3c73

  • Simplify and improve the rendering and styling of the popconfirm message (link, link, link, link, link)
  • Extract renderTitle and renderDescription variables from title and description props in PurePanel.tsx (link)
  • Wrap title and description in a separate div with the class ${prefixCls}-message-text and render them only if truthy in PurePanel.tsx (link)
  • Add marginXXS token to the token object in style/index.tsx (link)
  • Remove redundant color and fontSize styles from the ${componentCls}-message selector in style/index.tsx (link)
  • Adjust margin and font-weight of the icon, title, and description elements in style/index.tsx (link)
  • Fix a typo and remove unnecessary innerHTML property in the test file __tests__/index.test.tsx (link)
    • Replace the duplicated snapshot assertion with the correct one (link)
    • Remove innerHTML from the querySelector argument, since the snapshot matcher can handle the whole element (link)

@github-actions
Copy link
Contributor

github-actions bot commented May 17, 2023

@github-actions
Copy link
Contributor

github-actions bot commented May 17, 2023

size-limit report 📦

Path Size
./dist/antd.min.js 384.33 KB (-29 B 🔽)
./dist/antd-with-locales.min.js 443.57 KB (-24 B 🔽)

@codecov
Copy link

codecov bot commented May 17, 2023

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (74d5718) 100.00% compared to head (9d9ec44) 100.00%.

Additional details and impacted files
@@            Coverage Diff            @@
##            master    #42433   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          640       640           
  Lines        10841     10843    +2     
  Branches      2945      2945           
=========================================
+ Hits         10841     10843    +2     
Impacted Files Coverage Δ
components/popconfirm/PurePanel.tsx 100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

})}
>
{getRenderPropValue(title)}
<div className={`${prefixCls}-message-text`}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

好像没有这个 classname 相关的样式?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

确实没有,放个 div 也行。但是为了有点语义表达,还是放一个 className。

@afc163 afc163 merged commit 7271b7c into master May 17, 2023
91 checks passed
@afc163 afc163 deleted the fix/popconfirm-margin branch May 17, 2023 06:49
@MadCcc MadCcc mentioned this pull request May 22, 2023
20 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
4 participants