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

feat: Tabs support indicatorLength #44406

Merged
merged 8 commits into from Aug 29, 2023
Merged

feat: Tabs support indicatorLength #44406

merged 8 commits into from Aug 29, 2023

Conversation

MadCcc
Copy link
Member

@MadCcc MadCcc commented Aug 24, 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 #44311

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English Tabs support indicatorLength to customize length of indicator.
🇨🇳 Chinese Tabs 组件新增 indicatorLength 属性,用于自定义指示条的长度

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

This pull request adds a new prop indicatorLength to the Tabs component, which allows users to customize the length of the indicator line. It also updates the rc-tabs dependency and the documentation in both English and Chinese.

🔍 Walkthrough

🤖 Generated by Copilot at 873f687

  • Add a new prop indicatorLength to the Tabs component to customize the length of the indicator line (link, link)
  • Update the dependency version of rc-tabs to 12.11.0 to support the new prop (link)
  • Format the package.json file with prettier (link)

@stackblitz
Copy link

stackblitz bot commented Aug 24, 2023

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions
Copy link
Contributor

github-actions bot commented Aug 24, 2023

@github-actions
Copy link
Contributor

github-actions bot commented Aug 24, 2023

size-limit report 📦

Path Size
./dist/antd.min.js 394.08 KB (+171 B 🔺)
./dist/antd-with-locales.min.js 453.17 KB (+148 B 🔺)

@@ -54,6 +54,7 @@ Ant Design 依次提供了三级选项卡,分别用于不同的场景。
| centered | 标签居中展示 | boolean | false | 4.4.0 |
| defaultActiveKey | 初始化选中面板的 key,如果没有设置 activeKey | string | `第一个面板` | |
| hideAdd | 是否隐藏加号图标,在 `type="editable-card"` 时有效 | boolean | false | |
| indicatorLength | 自定义指示条长度,默认与 tab 等宽 | number \| (origin: number) => number | - | 5.9.0 |
Copy link
Member

Choose a reason for hiding this comment

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

这居然是个属性,为啥不用 token 来搞

Copy link
Member

Choose a reason for hiding this comment

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

如果需求是比文字短 32px,怎么设置?

Copy link
Member Author

Choose a reason for hiding this comment

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

因为指示条的长度是自动匹配 tab 宽度的,不是纯样式。

如果需求是比文字短 32px,怎么设置?

indicatorLength={(origin: number) => origin - 32}

Copy link
Contributor

Choose a reason for hiding this comment

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

  • 建议 ConfigProvider 支持配置 Tabs 的 indicatorLength,因为一般都是全局设置。
  • 如果支持 ConfigProvider,还需要同步到 Card tabList

@socket-security
Copy link

socket-security bot commented Aug 24, 2023

Updated and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Packages Version New capabilities Transitives Size Publisher
rc-mentions 2.5.0...2.6.0 None +1/-1 329 kB afc163
rc-menu 9.10.0...9.11.1 None +0/-0 256 kB afc163

🚮 Removed packages: rc-tabs@12.9.0

@argos-ci
Copy link

argos-ci bot commented Aug 24, 2023

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) 👍 Changes approved 15 changes Aug 29, 2023, 9:09 AM

@codecov
Copy link

codecov bot commented Aug 25, 2023

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (6f2bddd) 100.00% compared to head (9bf6429) 100.00%.
Report is 24 commits behind head on feature.

Additional details and impacted files
@@            Coverage Diff            @@
##           feature    #44406   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          670       673    +3     
  Lines        11349     11386   +37     
  Branches      3067      3071    +4     
=========================================
+ Hits         11349     11386   +37     
Files Changed Coverage Δ
components/badge/Ribbon.tsx 100.00% <ø> (ø)
components/carousel/index.tsx 100.00% <ø> (ø)
components/cascader/index.tsx 100.00% <ø> (ø)
components/form/FormItemInput.tsx 100.00% <ø> (ø)
components/image/index.tsx 100.00% <ø> (ø)
components/message/index.tsx 100.00% <ø> (ø)
components/tabs/TabPane.ts 100.00% <ø> (ø)
components/badge/style/index.ts 100.00% <100.00%> (ø)
components/badge/style/ribbon.ts 100.00% <100.00%> (ø)
components/button/button.tsx 100.00% <100.00%> (ø)
... and 9 more

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

Signed-off-by: MadCcc <1075746765@qq.com>
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.

None yet

3 participants