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: Vertical tabs active width fix #18940

Closed
wants to merge 10 commits into from
Closed

fix: Vertical tabs active width fix #18940

wants to merge 10 commits into from

Conversation

sosohime
Copy link
Contributor

@sosohime sosohime commented Sep 22, 2019

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / document update
  • Component style update
  • TypeScript definition update
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

#18652

💡 Background and solution

Background

tab active之后font-weight变成500,字体宽度会变宽0.17px (macOS chrome 76.0.3809.132),导致观察到tab “跳一下”。

solution

rc-tabs 为 tab 为 string 增加 attribute,antd 使用伪元素为其预留位置

📝 Changelog

Language Changelog
🇺🇸 English
🇨🇳 Chinese

☑️ Self Check before Merge

  • 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

Copy link

@tests-checker tests-checker bot left a comment

Choose a reason for hiding this comment

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

Could you please add tests to make sure this change works as expected?

@netlify
Copy link

netlify bot commented Sep 22, 2019

Deploy preview for ant-design ready!

Built with commit 893c0a0

https://deploy-preview-18940--ant-design.netlify.com

@codecov
Copy link

codecov bot commented Sep 22, 2019

Codecov Report

Merging #18940 into master will decrease coverage by <.01%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           master   #18940      +/-   ##
==========================================
- Coverage   96.93%   96.92%   -0.01%     
==========================================
  Files         281      281              
  Lines        7557     7554       -3     
  Branches     2068     2105      +37     
==========================================
- Hits         7325     7322       -3     
  Misses        230      230              
  Partials        2        2
Impacted Files Coverage Δ
components/tree-select/index.tsx 95.55% <0%> (-0.28%) ⬇️
components/breadcrumb/Breadcrumb.tsx 96.96% <0%> (ø) ⬆️
components/tree/Tree.tsx 96.87% <0%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 913c5bb...893c0a0. Read the comment docs.

@sosohime
Copy link
Contributor Author

How about this solution. @dengfuping

@zombieJ
Copy link
Member

zombieJ commented Oct 8, 2019

ref react-component/tabs#221

@sosohime
Copy link
Contributor Author

sosohime commented Oct 9, 2019

还有一个解决方案,取消active的加粗

@zombieJ
Copy link
Member

zombieJ commented Oct 14, 2019

Update:react-component/tabs#221 (comment)

@afc163
Copy link
Member

afc163 commented May 31, 2020

Fixed in #24552

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants