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: 🐛 add border-radius of the image-mask when hover Card #42642

Merged
merged 2 commits into from
May 26, 2023
Merged

fix: 🐛 add border-radius of the image-mask when hover Card #42642

merged 2 commits into from
May 26, 2023

Conversation

iNeedToCopy
Copy link
Contributor

@iNeedToCopy iNeedToCopy commented May 26, 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

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English Using Card component, when cover attribute is set to Image, hover mask does not have rounded corner attribute, resulting in UI exception
🇨🇳 Chinese 使用Card组件,当cover属性设置为Image时,悬停蒙版没有圆角属性,导致UI异常

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

Improved Card component styling and customization. Added antCls parameter and image-mask style to genCardStyle function in components/card/style/index.ts.

🔍 Walkthrough

🤖 Generated by Copilot at 2e7c063

  • Add antCls parameter to genCardStyle function to support different themes and customizations of Card component (link)
  • Add CSS style for image-mask pseudo-element to create hover effect and match border radius of Card component (link)

@github-actions
Copy link
Contributor

github-actions bot commented May 26, 2023

@codecov
Copy link

codecov bot commented May 26, 2023

Codecov Report

Patch and project coverage have no change.

Comparison is base (1990b8e) 100.00% compared to head (78736b1) 100.00%.

Additional details and impacted files
@@            Coverage Diff            @@
##            master    #42642   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          641       641           
  Lines        10857     10857           
  Branches      2942      2942           
=========================================
  Hits         10857     10857           
Impacted Files Coverage Δ
components/card/style/index.ts 100.00% <ø> (ø)

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

@afc163
Copy link
Member

afc163 commented May 26, 2023

有重现链接不?

@iNeedToCopy
Copy link
Contributor Author

有重现链接不?

https://stackblitz.com/edit/react-uhzspy?file=demo.tsx
鼠标hover图片时,蒙层的左上角和右上角没有圆角,而图片是有圆角的

Optimize the css code structure

Co-authored-by: afc163 <afc163@gmail.com>
@afc163 afc163 merged commit 98e391c into ant-design:master May 26, 2023
@MadCcc MadCcc mentioned this pull request May 30, 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
Development

Successfully merging this pull request may close these issues.

2 participants