8000 feat: ConfigProvider support Badge.Ribbon by thinkasany · Pull Request #52303 · ant-design/ant-design · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

feat: ConfigProvider support Badge.Ribbon #52303

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

Merged
merged 6 commits into from
Jan 15, 2025

Conversation

thinkasany
Copy link
Collaborator
@thinkasany thinkasany commented Jan 8, 2025

中文版模板 / Chinese template

🤔 This is a ...

  • 🆕 New feature

🔗 Related Issues

close #48089
close #48169

  • Describe the source of related requirements, such as links to relevant issue discussions.
  • For example: close #xxxx, fix #xxxx

💡 Background and Solution

  • The specific problem to be addressed.
  • List the final API implementation and usage if needed.
  • If there are UI/interaction changes, consider providing screenshots or GIFs.

📝 Change Log

Language Changelog
🇺🇸 English ConfigProvider support Badge.Ribbon semantic props classNames and styles and className and style.
🇨🇳 Chinese ConfigProvider 支持 Badge.Ribbon组件语义化 classNamesstylesclassNamestyle

Copy link

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

Copy link
Contributor
github-actions bot commented Jan 8, 2025

Preview is ready

Copy link
Contributor
github-actions bot commented Jan 8, 2025

👁 Visual Regression Report for PR #52303 Failed ❌

🎯 Target branch: next (5669073)
📖 View Full Report ↗︎
📊 Summary: 🔄 6 changed

Expected (Branch next) Actual (Current PR) Diff
input-group.compact.png input-group.compact.png input-group.compact.png input-group.compact.png
input-group.compact.png input-group.compact.png input-group.compact.css-var.png input-group.compact.css-var.png
input-group.dark.png input-group.dark.png input-group.dark.png input-group.dark.png
input-group.dark.png input-group.dark.png input-group.dark.css-var.png input-group.dark.css-var.png
input-group.default.png input-group.default.png input-group.default.png input-group.default.png
input-group.default.png input-group.default.png input-group.default.css-var.png input-group.default.css-var.png

Important

There are 6 diffs found in this PR: 🔄 6 changed.
Please check all items:

  • Visual diff is acceptable

Copy link

Walkthrough

This pull request introduces a new feature to the ConfigProvider by adding support for the Ribbon component. It enhances the Ribbon component to accept semantic properties such as classNames and styles, allowing for more customizable styling options. Additionally, tests and documentation have been updated to reflect these changes.

Changes

Files Summary
components/badge/Ribbon.tsx Added support for semantic properties classNames and styles in Ribbon component.
components/badge/tests/ribbon.test.tsx Added tests to verify custom styles and classNames for Badge.Ribbon.
components/badge/demo/_semantic_ribbon.tsx Added a demo for Badge.Ribbon showcasing semantic styling.
components/badge/index.en-US.md, components/badge/index.zh-CN.md Updated documentation to include Badge.Ribbon semantic DOM information.
components/config-provider/context.ts Introduced RibbonConfig type and added ribbon to ConfigProvider context.
components/config-provider/index.en-US.md, components/config-provider/index.zh-CN.md Documented Ribbon common props in ConfigProvider.

@thinkasany thinkasany changed the title feat: ConfigProvider support Ribbon feat: ConfigProvider support Badge.Ribbon Jan 8, 2025
Copy link
pkg-pr-new bot commented Jan 8, 2025

Copy link
codecov bot commented Jan 8, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (cd3c3d8) to head (4d346e3).
Report is 4 commits behind head on next.

Additional details and impacted files
@@            Coverage Diff            @@
##              next    #52303   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          760       760           
  Lines        13673     13673           
  Branches      3570      3570           
=========================================
  Hits         13673     13673           

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

cn: {
root: '根节点',
body: '主体节点',
text: '文本节点',
Copy link
Member

Choose a reason for hiding this comment

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

看起来也是 content?这里不一定放 text 的。

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

041330ed8c208e296e98cf4da4bee4fa

root: '根节点',
body: '主体节点',
text: '文本节点',
corner: '角标节点',
Copy link
Member

Choose a reason for hiding this comment

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

这个先不加吧,感觉是很容易重构坏掉的 dom 的。先不要承诺给人用。

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

我还是希望能够支持的,自定义能力更强,可以让角标显示不一样的颜色,或是说调节filter。

image

Copy link
codecov bot commented Jan 9, 2025

Bundle Report

Changes will increase total bundle size by 5.86kB (0.17%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
antd.min-array-push 3.37MB 5.86kB (0.17%) ⬆️

@@ -46,6 +52,9 @@ const Ribbon: React.FC<RibbonProps> = (props) => {
[`${prefixCls}-color-${color}`]: colorInPreset,
},
className,
ribbon?.className,
ribbon?.classNames?.body,
ribbonClassNames?.body,
Copy link
Member

Choose a reason for hiding this comment

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

这个应该和 Badge 标准版一样叫做 indicator,下面 content 没问题

@zombieJ zombieJ merged commit 1f50049 into ant-design:next Jan 15, 2025
37 checks passed

const locales = {
cn: {
root: '根节点',
Copy link
Member

Choose a reason for hiding this comment

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

这个中文要不统一一下 我看有元素也有节点

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

ok 我改一下~

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.

3 participants
0