feat(module:space): add space compact component by HyperLife1119 · Pull Request #8755 · NG-ZORRO/ng-zorro-antd

HyperLife1119 · 2024-09-16T16:28:57Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

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?

基础用法：

<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-group 和 button-group 组件：

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

Does this PR introduce a breaking change?

Yes
No

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

（考虑通过 schematics 帮用户自动更新）

Other information

zorro-bot · 2024-09-16T16:29:22Z

This preview will be available after the AzureCI is passed.

codecov · 2024-09-16T16:39:25Z

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:

Flaky Tests Detection - Detect and resolve failed and flaky tests
JS Bundle Analysis - Avoid shipping oversized bundles

HyperLife1119 · 2024-10-02T15:29:06Z


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


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

HyperLife1119 · 2024-10-02T15:30:24Z

+  ) {}
+
+  ngOnInit(): void {
+    this.size.set(this.nzSize);


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

HyperLife1119 · 2024-10-18T08:22:55Z

  // 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']) {


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

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

HyperLife1119 · 2024-10-18T08:23:13Z

  &-compact-vertical-item {
    &.@{btn-prefix-cls}-primary {
-      &:not([disabled]) + &:not([disabled]) {
+      &:not([disabled]) + &:not([disabled]):not([ant-click-animating-without-extra-node='true']) {


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

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

Laffery · 2024-11-22T04:43:21Z

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


感觉算是个破坏性更新，用户需要改变使用的名称（虽然不知道有没有用户这么用）

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

Laffery

LGTM

Laffery

LGTM

HyperLife1119 force-pushed the feat/space-compact branch 2 times, most recently from af22715 to 3c1cbd5 Compare September 21, 2024 10:47

Laffery added PR: unreviewed Component: Space labels Sep 23, 2024

zorro-bot Bot requested a review from hsuanxyz September 23, 2024 05:41

HyperLife1119 force-pushed the feat/space-compact branch 2 times, most recently from 222eac7 to 9b8a439 Compare September 23, 2024 08:22

HyperLife1119 added ⭐ New Component PR: target-major labels Sep 23, 2024

HyperLife1119 added this to the v19 milestone Sep 23, 2024

HyperLife1119 force-pushed the feat/space-compact branch 5 times, most recently from 2749246 to 0fa6380 Compare September 27, 2024 10:28

HyperLife1119 force-pushed the feat/space-compact branch 5 times, most recently from f394e1f to ac6e8c2 Compare October 2, 2024 15:20

HyperLife1119 marked this pull request as ready for review October 2, 2024 15:20

HyperLife1119 requested review from vthinkxie, wenqi73 and wzhudev as code owners October 2, 2024 15:20

HyperLife1119 requested a review from Laffery October 2, 2024 15:22

HyperLife1119 commented Oct 2, 2024

View reviewed changes

HyperLife1119 force-pushed the feat/space-compact branch from ac6e8c2 to 75936d4 Compare October 2, 2024 16:05

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

HyperLife1119 commented Oct 18, 2024

View reviewed changes

HyperLife1119 force-pushed the feat/space-compact branch 4 times, most recently from 47fb7cb to be82f45 Compare October 22, 2024 07:42

HyperLife1119 force-pushed the feat/space-compact branch from be82f45 to 847cebb Compare November 22, 2024 01:14

HyperLife1119 requested a review from simplejason as a code owner November 22, 2024 01:14

feat(module:space): add space compact component

6379b43

HyperLife1119 force-pushed the feat/space-compact branch from 847cebb to 6379b43 Compare November 22, 2024 02:48

Laffery reviewed Nov 22, 2024

View reviewed changes

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

Laffery approved these changes Nov 22, 2024

View reviewed changes

Laffery merged commit b9c511d into NG-ZORRO:master Nov 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(module:space): add space compact component#8755

feat(module:space): add space compact component#8755
Laffery merged 1 commit into
NG-ZORRO:masterfrom
HyperLife1119:feat/space-compact

HyperLife1119 commented Sep 16, 2024 •

edited by Laffery

Loading

Uh oh!

zorro-bot Bot commented Sep 16, 2024

Uh oh!

codecov Bot commented Sep 16, 2024 •

edited

Loading

Uh oh!

HyperLife1119 Oct 2, 2024

Uh oh!

HyperLife1119 Oct 2, 2024

Uh oh!

HyperLife1119 Oct 18, 2024 •

edited

Loading

Uh oh!

HyperLife1119 Oct 18, 2024 •

edited

Loading

Uh oh!

Laffery Nov 22, 2024

Uh oh!

HyperLife1119 Nov 22, 2024

Uh oh!

Laffery left a comment

Uh oh!

Laffery left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

HyperLife1119 commented Sep 16, 2024 • edited by Laffery Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

Uh oh!

zorro-bot Bot commented Sep 16, 2024

Uh oh!

codecov Bot commented Sep 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

HyperLife1119 Oct 2, 2024

Choose a reason for hiding this comment

Uh oh!

HyperLife1119 Oct 2, 2024

Choose a reason for hiding this comment

Uh oh!

HyperLife1119 Oct 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HyperLife1119 Oct 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Laffery Nov 22, 2024

Choose a reason for hiding this comment

Uh oh!

HyperLife1119 Nov 22, 2024

Choose a reason for hiding this comment

Uh oh!

Laffery left a comment

Choose a reason for hiding this comment

Uh oh!

Laffery left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

HyperLife1119 commented Sep 16, 2024 •

edited by Laffery

Loading

codecov Bot commented Sep 16, 2024 •

edited

Loading

HyperLife1119 Oct 18, 2024 •

edited

Loading

HyperLife1119 Oct 18, 2024 •

edited

Loading