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

Author: HyperLife1119

components/button/button-group.component.ts

@@ -10,6 +10,9 @@ import { takeUntil } from 'rxjs/operators';
 
 export type NzButtonGroupSize = 'large' | 'default' | 'small';
 
+/**
+ * @deprecated Will be removed in v20. Use `NzSpaceCompactComponent` instead.
+ */
 @Component({
   selector: 'nz-button-group',
   exportAs: 'nzButtonGroup',

components/button/button.component.ts

@@ -15,28 +15,35 @@ import {
   Input,
   NgZone,
   OnChanges,
-  OnDestroy,
   OnInit,
   Renderer2,
   SimpleChanges,
   ViewEncapsulation,
-  booleanAttribute
+  booleanAttribute,
+  computed,
+  inject,
+  signal
 } from '@angular/core';
 import { Subject, fromEvent } from 'rxjs';
 import { filter, startWith, takeUntil } from 'rxjs/operators';
 
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
+import { NzDestroyService } from 'ng-zorro-antd/core/services';
+import { NzSizeLDSType } from 'ng-zorro-antd/core/types';
 import { NzIconDirective, NzIconModule } from 'ng-zorro-antd/icon';
+import { NZ_SPACE_COMPACT_ITEM_TYPE, NZ_SPACE_COMPACT_SIZE, NzSpaceCompactItemDirective } from 'ng-zorro-antd/space';
 
 export type NzButtonType = 'primary' | 'default' | 'dashed' | 'link' | 'text' | null;
 export type NzButtonShape = 'circle' | 'round' | null;
-export type NzButtonSize = 'large' | 'default' | 'small';
+export type NzButtonSize = NzSizeLDSType;
 
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'button';
 
 @Component({
   selector: 'button[nz-button], a[nz-button]',
   exportAs: 'nzButton',
+  standalone: true,
+  imports: [NzIconModule],
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -55,8 +62,8 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'button';
     '[class.ant-btn-text]': `nzType === 'text'`,
     '[class.ant-btn-circle]': `nzShape === 'circle'`,
     '[class.ant-btn-round]': `nzShape === 'round'`,
-    '[class.ant-btn-lg]': `nzSize === 'large'`,
-    '[class.ant-btn-sm]': `nzSize === 'small'`,
+    '[class.ant-btn-lg]': `finalSize() === 'large'`,
+    '[class.ant-btn-sm]': `finalSize() === 'small'`,
     '[class.ant-btn-dangerous]': `nzDanger`,
     '[class.ant-btn-loading]': `nzLoading`,
     '[class.ant-btn-background-ghost]': `nzGhost`,
@@ -67,10 +74,10 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'button';
     '[attr.tabindex]': 'disabled ? -1 : (tabIndex === null ? null : tabIndex)',
     '[attr.disabled]': 'disabled || null'
   },
-  imports: [NzIconModule],
-  standalone: true
+  hostDirectives: [NzSpaceCompactItemDirective],
+  providers: [NzDestroyService, { provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'btn' }]
 })
-export class NzButtonComponent implements OnDestroy, OnChanges, AfterViewInit, AfterContentInit, OnInit {
+export class NzButtonComponent implements OnChanges, AfterViewInit, AfterContentInit, OnInit {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
 
   @ContentChild(NzIconDirective, { read: ElementRef }) nzIconDirectiveElement!: ElementRef;
@@ -85,7 +92,17 @@ export class NzButtonComponent implements OnDestroy, OnChanges, AfterViewInit, A
   @Input() nzShape: NzButtonShape = null;
   @Input() @WithConfig() nzSize: NzButtonSize = 'default';
   dir: Direction = 'ltr';
-  private destroy$ = new Subject<void>();
+
+  protected finalSize = computed(() => {
+    if (this.compactSize) {
+      return this.compactSize();
+    }
+    return this.size();
+  });
+
+  private size = signal<NzSizeLDSType>(this.nzSize);
+  private compactSize = inject(NZ_SPACE_COMPACT_SIZE, { optional: true });
+  private destroy$ = inject(NzDestroyService);
   private loading$ = new Subject<boolean>();
 
   insertSpan(nodes: NodeList, renderer: Renderer2): void {
@@ -117,16 +134,18 @@ export class NzButtonComponent implements OnDestroy, OnChanges, AfterViewInit, A
     private renderer: Renderer2,
     public nzConfigService: NzConfigService,
     private directionality: Directionality
-  ) {
+  ) {}
+
+  ngOnInit(): void {
+    this.size.set(this.nzSize);
     this.nzConfigService
       .getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME)
       .pipe(takeUntil(this.destroy$))
       .subscribe(() => {
+        this.size.set(this.nzSize);
         this.cdr.markForCheck();
       });
-  }
 
-  ngOnInit(): void {
     this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
       this.dir = direction;
       this.cdr.detectChanges();
@@ -150,11 +169,13 @@ export class NzButtonComponent implements OnDestroy, OnChanges, AfterViewInit, A
     });
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    const { nzLoading } = changes;
+  ngOnChanges({ nzLoading, nzSize }: SimpleChanges): void {
     if (nzLoading) {
       this.loading$.next(this.nzLoading);
     }
+    if (nzSize) {
+      this.size.set(nzSize.currentValue);
+    }
   }
 
   ngAfterViewInit(): void {
@@ -177,9 +198,4 @@ export class NzButtonComponent implements OnDestroy, OnChanges, AfterViewInit, A
         }
       });
   }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }

components/button/demo/button-group.md

@@ -11,8 +11,12 @@ title:
 
 通过设置 `nzSize` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `nzSize`，则尺寸为中。
 
+警告：`<nz-button-group>` 在 `v19` 中被弃用，请使用 `<nz-space-compact>` 组件替代。
+
 ## en-US
 
 Buttons can be grouped by placing multiple `nz-button` components into a `nz-button-group`.
 
 The `nzSize` can be set to `large`, `small` or left unset resulting in a default size.
+
+Warning: `<nz-button-group>` is deprecated in `v19`, please use `<nz-space-compact>` instead.

components/button/style/space-compact.less

@@ -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']) {
       position: relative;
 
       &::after {
@@ -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']) {
         position: relative;
 
         &::after {