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: add styles props to support Badge wrapper style #48169

Open
wants to merge 7 commits into
base: feature
Choose a base branch
from

Conversation

CooperHash
Copy link
Contributor

[中文版模板 / 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

#48089

💡 Background and solution

Can't set wrapper of Badge Ribbon's style

Although we can currently set the style of Badge.Ribbon, the style is applied to the inner element of the wrapper, not the wrapper itself.

image

📝 Changelog

Language Changelog
🇺🇸 English add styles props to support wrapper's style
🇨🇳 Chinese 新增props以管理wrapper样式

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

Copy link

stackblitz bot commented Mar 29, 2024

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

Copy link
Contributor

github-actions bot commented Mar 29, 2024

Preview is ready

Copy link
Contributor

github-actions bot commented Mar 29, 2024

👁 Visual Regression Report for PR #48169 Failed ❌

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

Expected (Branch feature) Actual (Current PR) Diff
steps-label-placement.compact.png steps-label-placement.compact.png steps-label-placement.compact.png steps-label-placement.compact.png
steps-label-placement.compact.png steps-label-placement.compact.png steps-label-placement.compact.css-var.png steps-label-placement.compact.css-var.png
steps-label-placement.dark.png steps-label-placement.dark.png steps-label-placement.dark.png steps-label-placement.dark.png
steps-label-placement.dark.png steps-label-placement.dark.png steps-label-placement.dark.css-var.png steps-label-placement.dark.css-var.png
steps-label-placement.default.png steps-label-placement.default.png steps-label-placement.default.png steps-label-placement.default.png
steps-label-placement.default.png steps-label-placement.default.png steps-label-placement.default.css-var.png steps-label-placement.default.css-var.png
steps-progress-debug.dark.png steps-progress-debug.dark.png steps-progress-debug.dark.png steps-progress-debug.dark.png
steps-progress-debug.dark.png steps-progress-debug.dark.png steps-progress-debug.dark.css-var.png steps-progress-debug.dark.css-var.png
steps-progress.compact.png steps-progress.compact.png steps-progress.compact.png steps-progress.compact.png
steps-progress.compact.png steps-progress.compact.png steps-progress.compact.css-var.png steps-progress.compact.css-var.png

Check Full Report for details

Copy link

codesandbox-ci bot commented Mar 29, 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.

Copy link

codecov bot commented Mar 29, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (8a4a83a) to head (1210252).

Additional details and impacted files
@@            Coverage Diff            @@
##           feature    #48169   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          744       744           
  Lines        12896     12896           
  Branches      3382      3382           
=========================================
  Hits         12896     12896           

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

@Wxh16144
Copy link
Member

Wxh16144 commented Apr 1, 2024

styles 通常是指语义化样式,应该和 style 区分开。 就你当前 PR 应该加一个 styles.wrapper 更为合适

@li-jia-nan
Copy link
Member

文档&测试用例需要补一下

<div>custom styles</div>
</Badge.Ribbon>,
);
expect(container).toMatchSnapshot();
Copy link
Member

Choose a reason for hiding this comment

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

这里不用留快照,用 toHaveStyle 断言就好了,参考其它地方

@@ -63,6 +63,12 @@ group: 数据展示
| placement | 缎带的位置,`start` 和 `end` 随文字方向(RTL 或 LTR)变动 | `start` \| `end` | `end` | |
| text | 缎带中填入的内容 | ReactNode | - | |

### `styles` 属性

| 名称 | 说明 |
Copy link
Member

Choose a reason for hiding this comment

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

加上默认值和版本,另外要在 Badge.Ribbon 那一栏加上 styles


| Property | Description | Version |
| -------- | ------------------------------------- | ------- |
| body | The style of Ribbon Wrapper Container | 5.16.0 |
Copy link
Member

Choose a reason for hiding this comment

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

5.16.0 已经发布了,这里应该是 5.17.0

Copy link
Member

Choose a reason for hiding this comment

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

另外这个命名可能还需要在讨论一下

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

4 participants