feat(module:dropdown): display arrow for content dropdown (#9329)

Author: Nicoss54

components/dropdown/demo/arrow.md

@@ -0,0 +1,14 @@
+---
+order: 9
+title:
+  zh-CN: 箭头
+  en-US: Arrow
+---
+
+## zh-CN
+
+可以展示一个箭头
+
+## en-US
+
+You could display an arrow

components/dropdown/demo/arrow.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzDropDownModule, NzPlacementType } from 'ng-zorro-antd/dropdown';
+import { NzFlexModule } from 'ng-zorro-antd/flex';
+
+@Component({
+  selector: 'nz-demo-dropdown-arrow',
+  imports: [NzDropDownModule, NzButtonModule, NzFlexModule],
+  template: `
+    <div nz-flex [nzGap]="8" nzWrap="wrap">
+      @for (position of listOfPosition; track position) {
+        <button nz-button nz-dropdown [nzDropdownMenu]="menu" [nzPlacement]="position" nzArrow>{{ position }}</button>
+        <nz-dropdown-menu #menu="nzDropdownMenu">
+          <ul nz-menu>
+            <li nz-menu-item>1st menu item length</li>
+            <li nz-menu-item>2nd menu item length</li>
+            <li nz-menu-item>3rd menu item length</li>
+          </ul>
+        </nz-dropdown-menu>
+      }
+    </div>
+  `
+})
+export class NzDemoDropdownArrowComponent {
+  listOfPosition: NzPlacementType[] = ['bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight'];
+}

components/dropdown/doc/index.en-US.md

@@ -25,6 +25,7 @@ If there are too many operations to display, you can wrap them in a `Dropdown`.
 | `[nzOverlayClassName]` | Class name of the dropdown root element                                                           | `string`                                                                                    | -              |
 | `[nzOverlayStyle]`     | Style of the dropdown root element                                                                | `object`                                                                                    | -              |
 | `(nzVisibleChange)`    | a callback function takes an argument: `nzVisible`, is executed when the visible state is changed | `EventEmitter<boolean>`                                                                     | -              |
+| `[nzArrow]`            | Whether the dropdown arrow should be visible                                                      | `boolean`                                                                                   | `false`        |
 
 You should use [nz-menu](/components/menu/en) in `nz-dropdown`. The menu items and dividers are also available by using `nz-menu-item` and `nz-menu-divider`.
 

components/dropdown/doc/index.zh-CN.md

@@ -26,6 +26,7 @@ description: 向下弹出的列表。
 | `[nzOverlayClassName]` | 下拉根元素的类名称                       | `string`                                                                                    | -              |
 | `[nzOverlayStyle]`     | 下拉根元素的样式                         | `object`                                                                                    | -              |
 | `(nzVisibleChange)`    | 菜单显示状态改变时调用，参数为 nzVisible | `EventEmitter<boolean>`                                                                     | -              |
+| `[nzArrow]`            | 下拉框箭头是否显示                       | `boolean`                                                                                   | `false`        |
 
 菜单使用 [nz-menu](/components/menu/zh)，还包括菜单项 `[nz-menu-item]`，分割线 `[nz-menu-divider]`。
 

components/dropdown/dropdown-menu.component.ts

@@ -48,6 +48,13 @@ export type NzPlacementType = 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 't
       <div
         class="ant-dropdown"
         [class.ant-dropdown-rtl]="dir === 'rtl'"
+        [class.ant-dropdown-show-arrow]="nzArrow"
+        [class.ant-dropdown-placement-bottomLeft]="placement === 'bottomLeft'"
+        [class.ant-dropdown-placement-bottomRight]="placement === 'bottomRight'"
+        [class.ant-dropdown-placement-bottom]="placement === 'bottom'"
+        [class.ant-dropdown-placement-topLeft]="placement === 'topLeft'"
+        [class.ant-dropdown-placement-topRight]="placement === 'topRight'"
+        [class.ant-dropdown-placement-top]="placement === 'top'"
         [class]="nzOverlayClassName"
         [style]="nzOverlayStyle"
         @slideMotion
@@ -57,6 +64,9 @@ export type NzPlacementType = 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 't
         (mouseenter)="setMouseState(true)"
         (mouseleave)="setMouseState(false)"
       >
+        @if (nzArrow) {
+          <div class="ant-dropdown-arrow"></div>
+        }
         <ng-content></ng-content>
       </div>
     </ng-template>
@@ -79,6 +89,8 @@ export class NzDropdownMenuComponent implements AfterContentInit, OnInit {
   animationStateChange$ = new EventEmitter<AnimationEvent>();
   nzOverlayClassName: string = '';
   nzOverlayStyle: IndexableObject = {};
+  nzArrow: boolean = false;
+  placement: NzPlacementType | 'bottom' | 'top' = 'bottomLeft';
   @ViewChild(TemplateRef, { static: true }) templateRef!: TemplateRef<NzSafeAny>;
 
   dir: Direction = 'ltr';

components/dropdown/dropdown.directive.spec.ts

@@ -39,6 +39,59 @@ describe('dropdown', () => {
     overlayContainer.ngOnDestroy();
   }));
 
+  it('should render arrow when nzArrow is true and apply placement classes', fakeAsync(() => {
+    const fixture = createComponent(NzTestDropdownArrowComponent);
+    fixture.componentInstance.arrow = true;
+    fixture.componentInstance.placement = 'bottomLeft';
+    fixture.detectChanges();
+    const dropdownElement = fixture.debugElement.query(By.directive(NzDropDownDirective)).nativeElement;
+    dispatchFakeEvent(dropdownElement, 'mouseenter');
+    tick(1000);
+    fixture.detectChanges();
+    const dropdown = overlayContainerElement.querySelector('.ant-dropdown') as HTMLElement;
+    expect(dropdown).not.toBeNull();
+    expect(dropdown.classList.contains('ant-dropdown-show-arrow')).toBeTrue();
+    expect(dropdown.classList.contains('ant-dropdown-placement-bottomLeft')).toBeTrue();
+    expect(dropdown.querySelector('.ant-dropdown-arrow')).not.toBeNull();
+
+    // Change placement while open should update placement class
+    fixture.componentInstance.placement = 'topRight';
+    fixture.detectChanges();
+    tick(0);
+    fixture.detectChanges();
+    expect(dropdown.classList.contains('ant-dropdown-placement-topRight')).toBeTrue();
+  }));
+
+  it('should map center placements to top/bottom classes', fakeAsync(() => {
+    const fixture = createComponent(NzTestDropdownArrowComponent);
+    fixture.componentInstance.arrow = true;
+    fixture.componentInstance.placement = 'bottomCenter';
+    fixture.detectChanges();
+    const dropdownElement = fixture.debugElement.query(By.directive(NzDropDownDirective)).nativeElement;
+    dispatchFakeEvent(dropdownElement, 'mouseenter');
+    tick(1000);
+    fixture.detectChanges();
+    const dropdown = overlayContainerElement.querySelector('.ant-dropdown') as HTMLElement;
+    expect(dropdown).not.toBeNull();
+    expect(dropdown.classList.contains('ant-dropdown-show-arrow')).toBeTrue();
+    const isBottomFamily =
+      dropdown.classList.contains('ant-dropdown-placement-bottom') ||
+      dropdown.classList.contains('ant-dropdown-placement-bottomLeft') ||
+      dropdown.classList.contains('ant-dropdown-placement-bottomRight');
+    expect(isBottomFamily).toBeTrue();
+
+    // Switch to topCenter
+    fixture.componentInstance.placement = 'topCenter';
+    fixture.detectChanges();
+    tick(0);
+    fixture.detectChanges();
+    const isTopFamily =
+      dropdown.classList.contains('ant-dropdown-placement-top') ||
+      dropdown.classList.contains('ant-dropdown-placement-topLeft') ||
+      dropdown.classList.contains('ant-dropdown-placement-topRight');
+    expect(isTopFamily).toBeTrue();
+  }));
+
   it('should hover correct', fakeAsync(() => {
     const fixture = createComponent(NzTestDropdownComponent);
     fixture.componentInstance.trigger = 'hover';
@@ -241,3 +294,21 @@ export class NzTestDropdownVisibleComponent {
   visible = false;
   triggerVisible = jasmine.createSpy('visibleChange');
 }
+
+@Component({
+  imports: [NzDropDownModule, NzMenuModule],
+  template: `
+    <a nz-dropdown [nzDropdownMenu]="menu" [nzArrow]="arrow" [nzPlacement]="placement" [nzTrigger]="'hover'">
+      Trigger
+    </a>
+    <nz-dropdown-menu #menu="nzDropdownMenu">
+      <ul nz-menu>
+        <li nz-menu-item>1st menu item</li>
+      </ul>
+    </nz-dropdown-menu>
+  `
+})
+export class NzTestDropdownArrowComponent {
+  arrow = false;
+  placement: NzPlacementType = 'bottomLeft';
+}

components/dropdown/dropdown.directive.ts

@@ -27,7 +27,7 @@ import { BehaviorSubject, EMPTY, Subject, combineLatest, fromEvent, merge } from
 import { auditTime, distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators';
 
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
-import { POSITION_MAP } from 'ng-zorro-antd/core/overlay';
+import { POSITION_MAP, getPlacementName } from 'ng-zorro-antd/core/overlay';
 import { IndexableObject } from 'ng-zorro-antd/core/types';
 
 import { NzDropdownMenuComponent, NzPlacementType } from './dropdown-menu.component';
@@ -41,6 +41,17 @@ const listOfPositions = [
   POSITION_MAP.topLeft
 ];
 
+const normalizePlacementForClass = (p: NzPlacementType): NzDropdownMenuComponent['placement'] => {
+  // Map center placements to generic top/bottom classes for styling
+  if (p === 'topCenter') {
+    return 'top';
+  }
+  if (p === 'bottomCenter') {
+    return 'bottom';
+  }
+  return p as NzDropdownMenuComponent['placement'];
+};
+
 @Directive({
   selector: '[nz-dropdown]',
   exportAs: 'nzDropdown',
@@ -76,6 +87,7 @@ export class NzDropDownDirective implements AfterViewInit, OnChanges {
   @Input({ transform: booleanAttribute }) nzClickHide = true;
   @Input({ transform: booleanAttribute }) nzDisabled = false;
   @Input({ transform: booleanAttribute }) nzVisible = false;
+  @Input({ transform: booleanAttribute }) nzArrow = false;
   @Input() nzOverlayClassName: string = '';
   @Input() nzOverlayStyle: IndexableObject = {};
   @Input() nzPlacement: NzPlacementType = 'bottomLeft';
@@ -154,6 +166,13 @@ export class NzDropDownDirective implements AfterViewInit, OnChanges {
                 hasBackdrop: this.nzBackdrop && this.nzTrigger === 'click',
                 scrollStrategy: this.overlay.scrollStrategies.reposition()
               });
+              // Listen for placement changes to update the menu classes (arrow position)
+              this.positionStrategy.positionChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(change => {
+                const placement = getPlacementName(change) as NzPlacementType | undefined;
+                if (placement) {
+                  this.setDropdownMenuValue('placement', normalizePlacementForClass(placement));
+                }
+              });
               merge(
                 this.overlayRef.backdropClick(),
                 this.overlayRef.detachments(),
@@ -177,6 +196,9 @@ export class NzDropDownDirective implements AfterViewInit, OnChanges {
             if (!this.portal || this.portal.templateRef !== this.nzDropdownMenu!.templateRef) {
               this.portal = new TemplatePortal(this.nzDropdownMenu!.templateRef, this.viewContainerRef);
             }
+            // Initialize arrow and placement on open
+            this.setDropdownMenuValue('nzArrow', this.nzArrow);
+            this.setDropdownMenuValue('placement', normalizePlacementForClass(this.nzPlacement));
             this.overlayRef.attach(this.portal);
           } else {
             /** detach overlayRef if needed **/
@@ -198,7 +220,7 @@ export class NzDropDownDirective implements AfterViewInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    const { nzVisible, nzDisabled, nzOverlayClassName, nzOverlayStyle, nzTrigger } = changes;
+    const { nzVisible, nzDisabled, nzOverlayClassName, nzOverlayStyle, nzTrigger, nzArrow, nzPlacement } = changes;
     if (nzTrigger) {
       this.nzTrigger$.next(this.nzTrigger);
     }
@@ -220,5 +242,11 @@ export class NzDropDownDirective implements AfterViewInit, OnChanges {
     if (nzOverlayStyle) {
       this.setDropdownMenuValue('nzOverlayStyle', this.nzOverlayStyle);
     }
+    if (nzArrow) {
+      this.setDropdownMenuValue('nzArrow', this.nzArrow);
+    }
+    if (nzPlacement) {
+      this.setDropdownMenuValue('placement', normalizePlacementForClass(this.nzPlacement));
+    }
   }
 }