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: progress add inside and bottom text position #48157

Merged
merged 50 commits into from
May 10, 2024

Conversation

LonelySnowman
Copy link
Contributor

@LonelySnowman LonelySnowman commented Mar 28, 2024

[English Template / 英文模板]

🤔 这个变动的性质是?

  • 新特性提交
  • 日常 bug 修复
  • 站点、文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • TypeScript 定义更新
  • 包体积优化
  • 性能优化
  • 功能增强
  • 国际化改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 工作流程
  • 其他改动(是关于什么的改动?)

🔗 相关 Issue

💡 需求背景和解决方案

为 Progress 组件添加 infoPosition API 设置进度数值的位置,支持展示在进度条内部与底部。
添加 insideInfoPositon API 设置进度数值在进度条内部的位置,支持靠左、靠右与居中。

📝 更新日志

语言 更新描述
🇺🇸 英文 Progress component supports setting the progress value position
🇨🇳 中文 Progress 组件支持设置进度数值位置

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

Copy link

stackblitz bot commented Mar 28, 2024

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

Copy link
Contributor

github-actions bot commented Mar 28, 2024

Preview is ready

Copy link
Contributor

github-actions bot commented Mar 28, 2024

👁 Visual Regression Report for PR #48157 Failed ❌

🎯 Target branch: feature (a343fcd)
📖 View Full Report ↗︎

Expected (Branch feature) Actual (Current PR) Diff
progress-component-token.compact.png progress-component-token.compact.png progress-component-token.compact.png progress-component-token.compact.png
progress-component-token.compact.png progress-component-token.compact.png progress-component-token.compact.css-var.png progress-component-token.compact.css-var.png
progress-component-token.dark.png progress-component-token.dark.png progress-component-token.dark.png progress-component-token.dark.png
progress-component-token.dark.png progress-component-token.dark.png progress-component-token.dark.css-var.png progress-component-token.dark.css-var.png
progress-component-token.default.png progress-component-token.default.png progress-component-token.default.png progress-component-token.default.png
progress-component-token.default.png progress-component-token.default.png progress-component-token.default.css-var.png progress-component-token.default.css-var.png
progress-dynamic.compact.png progress-dynamic.compact.png progress-dynamic.compact.png progress-dynamic.compact.png
progress-dynamic.compact.png progress-dynamic.compact.png progress-dynamic.compact.css-var.png progress-dynamic.compact.css-var.png
progress-dynamic.dark.png progress-dynamic.dark.png progress-dynamic.dark.png progress-dynamic.dark.png
progress-dynamic.dark.png progress-dynamic.dark.png progress-dynamic.dark.css-var.png progress-dynamic.dark.css-var.png

Check Full Report for details

Copy link

codesandbox-ci bot commented Mar 28, 2024

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

components/progress/progress.tsx Outdated Show resolved Hide resolved
components/progress/index.zh-CN.md Outdated Show resolved Hide resolved
components/progress/index.en-US.md Outdated Show resolved Hide resolved
docs/react/i18n.zh-CN.md Outdated Show resolved Hide resolved
components/progress/style/index.ts Outdated Show resolved Hide resolved
components/progress/progress.tsx Outdated Show resolved Hide resolved
components/progress/index.zh-CN.md Outdated Show resolved Hide resolved
components/progress/index.en-US.md Outdated Show resolved Hide resolved
components/progress/demo/info-position.md Outdated Show resolved Hide resolved
components/progress/demo/info-position.md Outdated Show resolved Hide resolved
docs/react/i18n.zh-CN.md Outdated Show resolved Hide resolved
@li-jia-nan
Copy link
Member

test 挂了看一下,可能需要更新一下快照

@li-jia-nan
Copy link
Member

这个字体颜色有点奇怪,感觉需要根据背景颜色调整,大佬们看下 @MadCcc @zombieJ @afc163

image

@afc163
Copy link
Member

afc163 commented Apr 1, 2024

需要反色

@li-jia-nan
Copy link
Member

反色我记得 @ctrl/tinycolor 提供了开箱即用的 api

@LonelySnowman
Copy link
Contributor Author

test 挂了看一下,可能需要更新一下快照

快照需要本地更新嘛

@li-jia-nan
Copy link
Member

需要的:npm run test:update components/progress

@afc163
Copy link
Member

afc163 commented May 5, 2024

size-limit report 📦

Path Size
./dist/antd.min.js 337.91 KB (+291 B 🔺)
./dist/antd-with-locales.min.js 385.63 KB (+167 B 🔺)

@LonelySnowman
Copy link
Contributor Author

看下 component-token.tsx 这个演示的 diff,貌似有点问题。

https://antd-visual-diff.oss-cn-shanghai.aliyuncs.com/pr-48157/visualRegressionReport/report.html

这个是之前说过的 outerStyle 导致的,size 属性根据 outerStyle 控制 progress 的长度,我改回去了。

@LonelySnowman
Copy link
Contributor Author

e4da3e1 反色的值改回了 rgba 值,现有的 token 暗黑模式下都会变成白色调的。现在 color picker 的 preset 也是直接写的 rgba(0, 0, 0, 0.45)。

[`&${componentCls}-presets-color-bright`]: {
'&::after': {
borderColor: 'rgba(0, 0, 0, 0.45)',
},
},

@LonelySnowman
Copy link
Contributor Author

@afc163 大佬看看呢 👀

afc163
afc163 previously approved these changes May 8, 2024
@afc163 afc163 merged commit 5098e6e into ant-design:feature May 10, 2024
57 of 58 checks passed
Copy link
Contributor

🎉 Thank you for your contribution! If you have not yet joined our DingTalk community group, please feel free to join us (when joining, please provide the link to this PR).

🎉 感谢您的贡献!如果您还没有加入钉钉社区群,请扫描下方二维码加入我们(加群时请提供此 PR 链接)。

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.

7 participants