fix(module:space): fix style of compact mode of input & input-number (#…

…8908) * fix(module:space): fix style of compact mode of input & input-number * test: fix test
NG-ZORRO · Dec 3, 2024 · 809155f · 809155f
1 parent df55d88
commit 809155f
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 28 deletions.
diff --git a/components/auto-complete/autocomplete.spec.ts b/components/auto-complete/autocomplete.spec.ts
@@ -56,7 +56,6 @@ describe('auto-complete', () => {
   let zone: MockNgZone;
 
   beforeEach(waitForAsync(() => {
-    const dir = 'ltr';
     TestBed.configureTestingModule({
       imports: [NzAutocompleteModule, NoopAnimationsModule, FormsModule, ReactiveFormsModule, NzInputModule],
       declarations: [
@@ -71,7 +70,7 @@ describe('auto-complete', () => {
         NzTestAutocompleteWithGroupInputComponent
       ],
       providers: [
-        { provide: Directionality, useFactory: () => ({ value: dir }) },
+        { provide: Directionality, useClass: MockDirectionality },
         { provide: ScrollDispatcher, useFactory: () => ({ scrolled: () => scrolledSubject }) },
         {
           provide: NgZone,
@@ -1219,11 +1218,6 @@ class NzTestAutocompleteWithGroupInputComponent {
   @ViewChild('inputGroupComponent', { static: false, read: ElementRef }) inputGroupComponent!: ElementRef;
 }
 
-class MockDirectionality {
-  value = 'ltr';
-  change = new Subject();
-}
-
 describe('auto-complete', () => {
   let component: NzAutocompleteComponent;
   let fixture: ComponentFixture<NzAutocompleteComponent>;
@@ -1333,3 +1327,8 @@ describe('auto-complete', () => {
     expect(nzOptionSelectionChange.isUserInput).toBeFalsy();
   });
 });
+
+class MockDirectionality {
+  value = 'ltr';
+  change = new Subject();
+}
diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less
@@ -238,6 +238,8 @@
 
   // ===================== Compact Item Styles =====================
   .compact-item(@input-number-prefix-cls, null, ~'@{input-number-prefix-cls}-focused');
+  .compact-item(~'@{input-number-prefix-cls}-affix-wrapper', null, ~'@{input-number-prefix-cls}-focused');
+  .compact-item(~'@{input-number-prefix-cls}-group-wrapper', ~'@{input-number-prefix-cls}-group-addon', ~'@{input-number-prefix-cls}-focused');
 }
 
 @import './rtl';
diff --git a/components/input/style/index.less b/components/input/style/index.less
@@ -81,6 +81,8 @@
 
   // ===================== Compact Item Styles =====================
   .compact-item(@input-prefix-cls);
+  .compact-item(~'@{input-prefix-cls}-affix-wrapper');
+  .compact-item(~'@{input-prefix-cls}-group-wrapper', ~'@{input-prefix-cls}-group-addon');
 }
 
 @import './search-input';

diff --git a/components/mention/mention.spec.ts b/components/mention/mention.spec.ts
@@ -32,12 +32,11 @@ describe('mention', () => {
   let zone: MockNgZone;
 
   beforeEach(waitForAsync(() => {
-    const dir = 'ltr';
     TestBed.configureTestingModule({
       imports: [NoopAnimationsModule],
       providers: [
         provideNzIconsTesting(),
-        { provide: Directionality, useFactory: () => ({ value: dir }) },
+        { provide: Directionality, useClass: MockDirectionality },
         { provide: ScrollDispatcher, useFactory: () => ({ scrolled: () => scrolledSubject }) },
         {
           provide: NgZone,
@@ -695,3 +694,8 @@ class NzTestMentionInFormComponent {
   status: NzFormControlStatusType = 'error';
   feedback = true;
 }
+
+class MockDirectionality {
+  value = 'ltr';
+  change = new Subject();
+}
diff --git a/components/space/demo/compact.ts b/components/space/demo/compact.ts
@@ -67,19 +67,25 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
       <nz-input-group nzSearch [nzAddOnAfter]="addonTmpl" [style.width.%]="30">
         <input nz-input value="0571" />
         <ng-template #addonTmpl>
-          <button nz-button><span nz-icon nzType="search"></span></button>
+          <button nz-button class="ant-input-search-button">
+            <span nz-icon nzType="search"></span>
+          </button>
         </ng-template>
       </nz-input-group>
       <nz-input-group nzSearch [nzAddOnAfter]="addonTmpl" [style.width.%]="50">
         <input nz-input value="26888888" />
         <ng-template #addonTmpl>
-          <button nz-button><span nz-icon nzType="search"></span></button>
+          <button nz-button class="ant-input-search-button">
+            <span nz-icon nzType="search"></span>
+          </button>
         </ng-template>
       </nz-input-group>
       <nz-input-group nzSearch [nzAddOnAfter]="addonTmpl" [style.width.%]="20">
         <input nz-input value="+1" />
         <ng-template #addonTmpl>
-          <button nz-button><span nz-icon nzType="search"></span></button>
+          <button nz-button class="ant-input-search-button">
+            <span nz-icon nzType="search"></span>
+          </button>
         </ng-template>
       </nz-input-group>
     </nz-space-compact>
@@ -174,6 +180,18 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
       ></nz-tree-select>
       <button nz-button nzType="primary">Submit</button>
     </nz-space-compact>
+    <br />
+    <nz-space-compact nzBlock>
+      <nz-input-group nzAddOnBefore="Http://" nzAddOnAfter=".com" [style.width.%]="50">
+        <input nz-input placeholder="input here" />
+      </nz-input-group>
+      <nz-input-number>
+        <span nzInputPrefix>$</span>
+      </nz-input-number>
+      <nz-input-number>
+        <span nzInputAddonBefore>$</span>
+      </nz-input-number>
+    </nz-space-compact>
   `,
   styles: [
     `

diff --git a/components/space/space-compact-item.directive.ts b/components/space/space-compact-item.directive.ts
@@ -3,7 +3,9 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { Directionality } from '@angular/cdk/bidi';
 import { afterNextRender, computed, Directive, ElementRef, inject, OnDestroy } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 import { NzSpaceCompactComponent } from './space-compact.component';
 import { NZ_SPACE_COMPACT_ITEM_TYPE, NZ_SPACE_COMPACT_ITEMS } from './space-compact.token';
@@ -16,17 +18,30 @@ import { NZ_SPACE_COMPACT_ITEM_TYPE, NZ_SPACE_COMPACT_ITEMS } from './space-comp
   }
 })
 export class NzSpaceCompactItemDirective implements OnDestroy {
+  /**
+   * Ancestor component injected from the parent.
+   * Note that it is not necessarily the direct parent component.
+   */
   private readonly spaceCompactCmp = inject(NzSpaceCompactComponent, { host: true, optional: true });
   private readonly items = inject(NZ_SPACE_COMPACT_ITEMS, { host: true, optional: true });
   private readonly type = inject(NZ_SPACE_COMPACT_ITEM_TYPE);
+  private readonly elementRef: ElementRef<HTMLElement> = inject(ElementRef);
+  private readonly directionality = inject(Directionality);
+  private readonly dir = toSignal(this.directionality.change, { initialValue: this.directionality.value });
+
+  private get parentElement(): HTMLElement | null {
+    return this.elementRef.nativeElement?.parentElement;
+  }
 
   protected class = computed(() => {
     // Only handle when the parent is space compact component
     if (!this.spaceCompactCmp || !this.items) return null;
+    // Ensure that the injected ancestor component's elements are parent elements
+    if (this.parentElement !== this.spaceCompactCmp!.elementRef.nativeElement) return null;
 
     const items = this.items();
     const direction = this.spaceCompactCmp.nzDirection();
-    const classes = [compactItemClassOf(this.type, direction)];
+    const classes = [compactItemClassOf(this.type, direction, this.dir() === 'rtl')];
     const index = items.indexOf(this);
     const firstIndex = items.findIndex(element => element);
     // Array [empty, item]
@@ -44,11 +59,10 @@ export class NzSpaceCompactItemDirective implements OnDestroy {
   constructor() {
     if (!this.spaceCompactCmp || !this.items) return;
 
-    const { nativeElement }: ElementRef<HTMLElement> = inject(ElementRef);
-
     afterNextRender(() => {
-      if (nativeElement.parentElement) {
-        const index = Array.from(nativeElement.parentElement.children).indexOf(nativeElement);
+      // Ensure that the injected ancestor component's elements are parent elements
+      if (this.parentElement === this.spaceCompactCmp!.elementRef.nativeElement) {
+        const index = Array.from(this.parentElement.children).indexOf(this.elementRef.nativeElement);
         this.items!.update(value => {
           const newValue = value.slice();
           newValue.splice(index, 0, this);
@@ -72,8 +86,9 @@ function generateCompactClass(
   return `ant-${type}-compact-${directionPrefix}${position}`;
 }
 
-function compactItemClassOf(type: string, direction: 'vertical' | 'horizontal'): string {
-  return generateCompactClass(type, direction, 'item');
+function compactItemClassOf(type: string, direction: 'vertical' | 'horizontal', rtl?: boolean): string {
+  const rtlSuffix = rtl ? '-rtl' : '';
+  return `${generateCompactClass(type, direction, 'item')}${rtlSuffix}`;
 }
 
 function compactFirstItemClassOf(type: string, direction: 'vertical' | 'horizontal'): string {

diff --git a/components/space/space-compact.component.ts b/components/space/space-compact.component.ts
@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { booleanAttribute, ChangeDetectionStrategy, Component, inject, input, signal } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, ElementRef, inject, input, signal } from '@angular/core';
 
 import { NzSizeLDSType } from 'ng-zorro-antd/core/types';
 
@@ -26,7 +26,8 @@ import { NZ_SPACE_COMPACT_ITEMS, NZ_SPACE_COMPACT_SIZE } from './space-compact.t
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NzSpaceCompactComponent {
-  nzBlock = input(false, { transform: booleanAttribute });
-  nzDirection = input<'vertical' | 'horizontal'>('horizontal');
-  nzSize = input<NzSizeLDSType>('default');
+  readonly nzBlock = input(false, { transform: booleanAttribute });
+  readonly nzDirection = input<'vertical' | 'horizontal'>('horizontal');
+  readonly nzSize = input<NzSizeLDSType>('default');
+  readonly elementRef: ElementRef<HTMLElement> = inject(ElementRef);
 }
diff --git a/components/style/mixins/compact-item.less b/components/style/mixins/compact-item.less
@@ -30,28 +30,28 @@
 
   & when (not (@bordered-item-cls = null)) {
     // border-radius
-    &-item:not(&-first-item):not(&-last-item).@{prefix-cls} > .@{bordered-item-cls} {
+    &-item:not(&-first-item):not(&-last-item).@{prefix-cls} .@{bordered-item-cls} {
       border-radius: 0;
     }
 
-    &-item&-first-item.@{prefix-cls}:not(&-last-item):not(&-item-rtl) > .@{bordered-item-cls} {
+    &-item&-first-item.@{prefix-cls}:not(&-last-item):not(&-item-rtl) .@{bordered-item-cls} {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
 
-    &-item&-last-item.@{prefix-cls}:not(&-first-item):not(&-item-rtl) > .@{bordered-item-cls} {
+    &-item&-last-item.@{prefix-cls}:not(&-first-item):not(&-item-rtl) .@{bordered-item-cls} {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
 
     // ----------rtl for first item----------
-    &-item.@{prefix-cls}&-first-item&-item-rtl:not(&-last-item) > .@{bordered-item-cls} {
+    &-item.@{prefix-cls}&-first-item&-item-rtl:not(&-last-item) .@{bordered-item-cls} {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
 
     // ----------rtl for last item----------
-    &-item.@{prefix-cls}&-last-item&-item-rtl:not(&-first-item) > .@{bordered-item-cls} {
+    &-item.@{prefix-cls}&-last-item&-item-rtl:not(&-first-item) .@{bordered-item-cls} {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }