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: Icon styles for inputs are incorrect in Space Compact mode. #42167

Merged

Conversation

dark9wesley
Copy link
Contributor

@dark9wesley dark9wesley commented May 6, 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

fix: Space Compact 样式问题,对于有图标的Input组合样式没有融合

💡 Background and solution

当Input组件被Space.Compact组件包装,并且使用addonBefore或addonAfter时,样式会出现错误。经过分析,原因是Input组件没有应用正确的类名,例如xxx-compact-item。

image

如图所示,input组件由于使用了addonBefore/addonAfter,会被包裹一层wrapper,xxx-compact-item添加到了wrapper容器上,导致input的boder-radius没有被正确覆盖。

目前我想到的做法是选中wrapper中含有xxx-compact-item相关的类名,并将其相关子类的样式进行修改,如果有更好的解决方法,请多多指教,谢谢。

📝 Changelog

Language Changelog
🇺🇸 English fix: Icon styles for inputs are incorrect in Space Compact mode.
🇨🇳 Chinese 修复Input在Space.Compact下使用图标的样式错误

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

Fix input icon style in Space Compact mode. Adjust border radius of input and group-addon elements in components/input/style/index.ts based on their position in Space component.

🔍 Walkthrough

🤖 Generated by Copilot at a5731de

  • Fix the issue of using icons in Space Compact mode by applying different border radius values to the input components and their group addons (link)

@github-actions
Copy link
Contributor

github-actions bot commented May 6, 2023

@codecov
Copy link

codecov bot commented May 6, 2023

Codecov Report

Patch and project coverage have no change.

Comparison is base (5ccb7ba) 100.00% compared to head (0e2a25a) 100.00%.

Additional details and impacted files
@@            Coverage Diff            @@
##            master    #42167   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          617       617           
  Lines        10543     10545    +2     
  Branches      2882      2883    +1     
=========================================
+ Hits         10543     10545    +2     
Impacted Files Coverage Δ
components/input/style/index.ts 100.00% <ø> (ø)

... and 1 file with indirect coverage changes

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

@zombieJ zombieJ merged commit 4e05f08 into ant-design:master May 8, 2023
52 checks passed
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.

Space Compact 样式问题,对于有图标的Input组合样式没有融合
2 participants