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(module:space): add space compact component #8755

Merged
merged 1 commit into from
Nov 22, 2024

Conversation

HyperLife1119
Copy link
Collaborator

@HyperLife1119 HyperLife1119 commented Sep 16, 2024

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • Application (the showcase website) / infrastructure changes
  • Other... Please describe:

What is the current behavior?

Issue Number: N/A

[RFC] New component Space.Compact

What is the new behavior?

QQ_1727708538363

QQ_1726915377101

QQ_1726915390485

基础用法:

<nz-space-compact nzBlock>
  <input nz-input value="0571" [style.width.%]="20" />
  <input nz-input value="26888888" [style.width.%]="30" />
</nz-space-compact>

根据 RFC,该组件能够替代 input-groupbutton-group 组件:

  1. 计划在 v19 宣布弃用 button-group 组件,v20 完全删除 button-group 组件。
  2. 由于目前 zorro 的 input-group 实现还承担了 addon,affix 的功能,因此不会弃用,仅弃用 输入框组合 的用法,包括 nzCompact 属性。
  3. 后续计划:重构 input-number 组件,弃用 input-number-group 组件,并将它的 addon,affix 功能集成到 input-number 组件上

Does this PR introduce a breaking change?

  • Yes
  • No

NzSpaceComponent 的导出名称从 NzSpace 更新为规范化的 nzSpace

(考虑通过 schematics 帮用户自动更新)

Other information

Copy link

zorro-bot bot commented Sep 16, 2024

This preview will be available after the AzureCI is passed.

Copy link

codecov bot commented Sep 16, 2024

Codecov Report

Attention: Patch coverage is 96.07843% with 6 lines in your changes missing coverage. Please review.

Project coverage is 91.91%. Comparing base (c79c203) to head (6379b43).
Report is 5 commits behind head on master.

Files with missing lines Patch % Lines
components/tree-select/tree-select.component.ts 81.25% 3 Missing ⚠️
components/cascader/cascader.component.ts 90.90% 1 Missing ⚠️
components/select/select.component.ts 90.00% 1 Missing ⚠️
components/time-picker/time-picker.component.ts 92.30% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master    #8755      +/-   ##
==========================================
+ Coverage   91.86%   91.91%   +0.04%     
==========================================
  Files         541      546       +5     
  Lines       19142    19353     +211     
  Branches     2823     2858      +35     
==========================================
+ Hits        17585    17788     +203     
- Misses       1245     1253       +8     
  Partials      312      312              

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


🚨 Try these New Features:

@HyperLife1119 HyperLife1119 force-pushed the feat/space-compact branch 2 times, most recently from af22715 to 3c1cbd5 Compare September 21, 2024 10:47
@zorro-bot zorro-bot bot requested a review from hsuanxyz September 23, 2024 05:41
@HyperLife1119 HyperLife1119 force-pushed the feat/space-compact branch 2 times, most recently from 222eac7 to 9b8a439 Compare September 23, 2024 08:22
@HyperLife1119 HyperLife1119 added this to the v19 milestone Sep 23, 2024
@HyperLife1119 HyperLife1119 force-pushed the feat/space-compact branch 5 times, most recently from 2749246 to 0fa6380 Compare September 27, 2024 10:28
@HyperLife1119 HyperLife1119 force-pushed the feat/space-compact branch 5 times, most recently from f394e1f to ac6e8c2 Compare October 2, 2024 15:20
@HyperLife1119 HyperLife1119 marked this pull request as ready for review October 2, 2024 15:20
@HyperLife1119 HyperLife1119 requested a review from Laffery October 2, 2024 15:22
@@ -5,5 +5,6 @@

// TODO: replace other size with this type.
export type NzSizeLDSType = 'large' | 'default' | 'small';
export type NzSizeLMSType = 'large' | 'middle' | 'small';
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

值得注意的是,space compact size 原本应该使用 NzSizeLMSType 类型,但是我最后选择使用 NzSizeLDSType,因为 zorro 的其他 compact 子组件均使用的是 NzSizeLDSType 类型,如果要改为 NzSizeLMSType,那会造成不小的 breaking changes。

) {}

ngOnInit(): void {
this.size.set(this.nzSize);
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

此处用于同步来自 @WithConfig 第一次设置的值

@HyperLife1119 HyperLife1119 force-pushed the feat/space-compact branch 3 times, most recently from f526466 to 1b7dc46 Compare October 18, 2024 07:17
@@ -13,7 +13,7 @@

// Special styles for Primary Button
&-compact-item.@{btn-prefix-cls}-primary {
&:not([disabled]) + &:not([disabled]) {
&:not([disabled]) + &:not([disabled]):not([ant-click-animating-without-extra-node='true']) {
Copy link
Collaborator Author

@HyperLife1119 HyperLife1119 Oct 18, 2024

Choose a reason for hiding this comment

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

由于 antd4 遗留的样式 bug,导致按钮点击的 wave 效果显示错误

QQ_1729239613460

这里通过排除 animating-node 来解决这个问题。

@@ -69,7 +69,7 @@
// Special styles for Primary Button
&-compact-vertical-item {
&.@{btn-prefix-cls}-primary {
&:not([disabled]) + &:not([disabled]) {
&:not([disabled]) + &:not([disabled]):not([ant-click-animating-without-extra-node='true']) {
Copy link
Collaborator Author

@HyperLife1119 HyperLife1119 Oct 18, 2024

Choose a reason for hiding this comment

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

同样的,由于 antd4 遗留的样式 bug,导致按钮点击的 wave 效果显示错误

QQ_1729239652627

这里通过排除 animating-node 来解决这个问题。

@HyperLife1119 HyperLife1119 force-pushed the feat/space-compact branch 4 times, most recently from 47fb7cb to be82f45 Compare October 22, 2024 07:42
@@ -37,7 +38,7 @@ const SPACE_SIZE: {

@Component({
selector: 'nz-space, [nz-space]',
exportAs: 'NzSpace',
exportAs: 'nzSpace',
Copy link
Collaborator

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.

属于影响范围较小的破坏性更新,到时候在变更日志中说明就好了👌

@Laffery Laffery added the 💔 Breaking Change This PR or the solution to this issue would introduce breaking changes label Nov 22, 2024
Copy link
Collaborator

@Laffery Laffery left a comment

Choose a reason for hiding this comment

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

LGTM

Copy link
Collaborator

@Laffery Laffery left a comment

Choose a reason for hiding this comment

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

LGTM

@Laffery Laffery merged commit b9c511d into NG-ZORRO:master Nov 22, 2024
9 of 10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💔 Breaking Change This PR or the solution to this issue would introduce breaking changes Component: Space PR: target-major PR: unreviewed ⭐ New Component
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants