refactor(module:*): enhance popup arrow positioning and styles (#9360)

- add `placementArrow` mixin function

Author: Laffery

components/core/overlay/overlay-position.ts

@@ -42,7 +42,36 @@ export type POSITION_TYPE_HORIZONTAL = Extract<
   'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight'
 >;
 
-export const DEFAULT_TOOLTIP_POSITIONS = [POSITION_MAP.top, POSITION_MAP.right, POSITION_MAP.bottom, POSITION_MAP.left];
+/**
+ * @internal
+ * @param offset offset in pixels which should not be less than 0.
+ * The default value is `12`, which means `(arrow-size / 2) + 4`
+ */
+const positionOffsetMapFactory = (offset: number = 12): Record<string, [number, number]> => ({
+  top: [0, -offset],
+  topCenter: [0, -offset],
+  topLeft: [0, -offset],
+  topRight: [0, -offset],
+  right: [offset, 0],
+  rightTop: [offset, 0],
+  rightBottom: [offset, 0],
+  bottom: [0, offset],
+  bottomCenter: [0, offset],
+  bottomLeft: [0, offset],
+  bottomRight: [0, offset],
+  left: [-offset, 0],
+  leftTop: [-offset, 0],
+  leftBottom: [-offset, 0]
+});
+
+export const TOOLTIP_OFFSET_MAP = positionOffsetMapFactory();
+
+export const DEFAULT_TOOLTIP_POSITIONS = [
+  setConnectedPositionOffset(POSITION_MAP.top, TOOLTIP_OFFSET_MAP.top),
+  setConnectedPositionOffset(POSITION_MAP.right, TOOLTIP_OFFSET_MAP.right),
+  setConnectedPositionOffset(POSITION_MAP.bottom, TOOLTIP_OFFSET_MAP.bottom),
+  setConnectedPositionOffset(POSITION_MAP.left, TOOLTIP_OFFSET_MAP.left)
+];
 
 export const DEFAULT_CASCADER_POSITIONS = [
   POSITION_MAP.bottomLeft,
@@ -108,3 +137,20 @@ export const DEFAULT_DATE_PICKER_POSITIONS = [
   DATE_PICKER_POSITION_MAP.bottomRight,
   DATE_PICKER_POSITION_MAP.topRight
 ];
+
+export function normalizeConnectedPositionOffset(offset: number | [number, number]): [number, number] {
+  return Array.isArray(offset) ? offset : [offset, offset];
+}
+
+export function setConnectedPositionOffset(
+  position: ConnectionPositionPair,
+  offset: number | [number, number]
+): ConnectionPositionPair {
+  const [offsetX, offsetY] = normalizeConnectedPositionOffset(offset);
+  // return new object
+  return {
+    ...position,
+    offsetX: offsetX,
+    offsetY: offsetY
+  };
+}

components/date-picker/style/index.less

@@ -257,6 +257,9 @@
   // ======================= Dropdown =======================
   &-dropdown {
     .reset-component();
+
+    --antd-arrow-background-color: @calendar-bg;
+
     position: absolute;
     // Fix incorrect position of picker popup
     // https://github.com/ant-design/ant-design/issues/35590
@@ -268,19 +271,19 @@
       display: none;
     }
 
-    &-placement-bottomLeft {
+    &-placement-bottomLeft, &-placement-bottomRight {
       .@{picker-prefix-cls}-range-arrow {
-        top: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px;
+        top: 0;
         display: block;
-        transform: rotate(-135deg) translateY(1px);
+        transform: translateY(-100%);
       }
     }
 
-    &-placement-topLeft {
+    &-placement-topLeft, &-placement-topRight {
       .@{picker-prefix-cls}-range-arrow {
-        bottom: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px;
+        bottom: 0;
         display: block;
-        transform: rotate(45deg);
+        transform: translateY(100%) rotate(180deg);
       }
     }
 
@@ -310,7 +313,7 @@
   }
 
   &-dropdown-range {
-    padding: (@arrow-size * 2 / 3) 0;
+    margin-block: (@arrow-size * 2 / 3);
 
     &-hidden {
       display: none;
@@ -356,12 +359,10 @@
   &-range-arrow {
     position: absolute;
     z-index: 1;
-    width: @arrow-size;
-    height: @arrow-size;
+    box-sizing: content-box;
     margin-left: @input-padding-horizontal-base * 1.5;
-    box-shadow: 2px 2px 6px -2px fade(@black, 10%); // use spread radius to hide shadow over popover
     transition: left @animation-duration-slow ease-out;
-    .roundedArrow(@arrow-size, 5px, @calendar-bg);
+    .roundedArrow(@arrow-size, 4px, @arrow-border-radius, var(--antd-arrow-background-color), @popover-arrow-box-shadow);
   }
 
   &-panel-container {
@@ -381,17 +382,13 @@
     .@{picker-prefix-cls}-panel {
       vertical-align: top;
       background: transparent;
-      border-width: 0 0 @border-width-base;
+      border: none;
       border-radius: 0;
 
       .@{picker-prefix-cls}-content,
       table {
         text-align: center;
       }
-
-      &-focused {
-        border-color: @border-color-split;
-      }
     }
   }
 

components/dropdown/dropdown.directive.ts

@@ -27,19 +27,20 @@ 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, getPlacementName } from 'ng-zorro-antd/core/overlay';
+import {
+  POSITION_MAP,
+  getPlacementName,
+  POSITION_TYPE,
+  setConnectedPositionOffset,
+  TOOLTIP_OFFSET_MAP
+} from 'ng-zorro-antd/core/overlay';
 import { IndexableObject } from 'ng-zorro-antd/core/types';
 
 import { NzDropdownMenuComponent, NzPlacementType } from './dropdown-menu.component';
 
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'dropDown';
 
-const listOfPositions = [
-  POSITION_MAP.bottomLeft,
-  POSITION_MAP.bottomRight,
-  POSITION_MAP.topRight,
-  POSITION_MAP.topLeft
-];
+const listOfPositions: POSITION_TYPE[] = ['bottomLeft', 'bottomRight', 'topRight', 'topLeft'];
 
 const normalizePlacementForClass = (p: NzPlacementType): NzDropdownMenuComponent['placement'] => {
   // Map center placements to generic top/bottom classes for styling
@@ -191,7 +192,12 @@ export class NzDropDownDirective implements AfterViewInit, OnChanges {
               overlayConfig.minWidth = triggerWidth;
             }
             /** open dropdown with animation **/
-            this.positionStrategy.withPositions([POSITION_MAP[this.nzPlacement], ...listOfPositions]);
+            const positions = [this.nzPlacement, ...listOfPositions].map(position => {
+              return this.nzArrow
+                ? setConnectedPositionOffset(POSITION_MAP[position], TOOLTIP_OFFSET_MAP[position])
+                : POSITION_MAP[position];
+            });
+            this.positionStrategy.withPositions(positions);
             /** reset portal if needed **/
             if (!this.portal || this.portal.templateRef !== this.nzDropdownMenu!.templateRef) {
               this.portal = new TemplatePortal(this.nzDropdownMenu!.templateRef, this.viewContainerRef);

components/dropdown/style/index.less

@@ -7,6 +7,8 @@
 .@{dropdown-prefix-cls} {
   .reset-component();
 
+  --antd-arrow-background-color: @dropdown-menu-bg;
+
   position: absolute;
   top: -9999px;
   left: -9999px;
@@ -15,13 +17,10 @@
 
   &::before {
     position: absolute;
-    top: -@popover-distance + @popover-arrow-width;
-    right: 0;
-    bottom: -@popover-distance + @popover-arrow-width;
-    left: -7px;
+    inset-block: calc(@popover-arrow-width / 2 - @popover-distance);
     z-index: -9999;
     opacity: 0.0001;
-    content: ' ';
+    content: '';
   }
 
   &-wrap {
@@ -48,72 +47,8 @@
     display: none;
   }
 
-  // Offset the popover to account for the dropdown arrow
-  &-show-arrow&-placement-topLeft,
-  &-show-arrow&-placement-top,
-  &-show-arrow&-placement-topRight {
-    padding-bottom: @popover-distance;
-  }
-
-  &-show-arrow&-placement-bottomLeft,
-  &-show-arrow&-placement-bottom,
-  &-show-arrow&-placement-bottomRight {
-    padding-top: @popover-distance;
-  }
-
-  // Arrows
-  // .popover-arrow is outer, .popover-arrow:after is inner
-
-  &-arrow {
-    position: absolute;
-    z-index: 1; // lift it up so the menu wouldn't cask shadow on it
-    display: block;
-    width: @popover-arrow-width;
-    height: @popover-arrow-width;
-    .roundedArrow(@popover-arrow-width, 5px, @popover-bg);
-  }
-
-  &-placement-top > &-arrow,
-  &-placement-topLeft > &-arrow,
-  &-placement-topRight > &-arrow {
-    bottom: @popover-arrow-width * sqrt((1 / 2)) + 2px;
-    box-shadow: 3px 3px 7px -3px fade(@black, 10%);
-    transform: rotate(45deg);
-  }
-
-  &-placement-top > &-arrow {
-    left: 50%;
-    transform: translateX(-50%) rotate(45deg);
-  }
-
-  &-placement-topLeft > &-arrow {
-    left: 16px;
-  }
-
-  &-placement-topRight > &-arrow {
-    right: 16px;
-  }
-
-  &-placement-bottom > &-arrow,
-  &-placement-bottomLeft > &-arrow,
-  &-placement-bottomRight > &-arrow {
-    top: (@popover-arrow-width + 2px) * sqrt((1 / 2));
-    box-shadow: 2px 2px 5px -2px fade(@black, 10%);
-    transform: rotate(-135deg) translateY(-0.5px);
-  }
-
-  &-placement-bottom > &-arrow {
-    left: 50%;
-    transform: translateX(-50%) rotate(-135deg) translateY(-0.5px);
-  }
-
-  &-placement-bottomLeft > &-arrow {
-    left: 16px;
-  }
-
-  &-placement-bottomRight > &-arrow {
-    right: 16px;
-  }
+  // Arrow Style
+  .placementArrow(@popover-arrow-width, 4px, @arrow-border-radius, var(--antd-arrow-background-color), @popover-arrow-box-shadow);
 
   &-menu {
     position: relative;

components/dropdown/style/patch.less

@@ -8,11 +8,11 @@
 
 .ant-dropdown {
   position: relative;
-  top: 0;
-  left: 0;
-  width: 100%;
-  margin-top: 6px;
-  margin-bottom: 6px;
+  inset: 0;
+
+  &:not(:has(.ant-dropdown-arrow)) {
+    margin-block: calc(@popover-distance - @popover-arrow-width / 2)
+  }
 }
 
 .@{dropdown-prefix-cls} {

components/popconfirm/popconfirm.ts

@@ -177,12 +177,10 @@ export class NzPopconfirmDirective extends NzTooltipBaseDirective {
         [nzNoAnimation]="noAnimation?.nzNoAnimation"
         [@zoomBigMotion]="'active'"
       >
+        @if (nzPopconfirmShowArrow) {
+          <div class="ant-popover-arrow"></div>
+        }
         <div class="ant-popover-content">
-          @if (nzPopconfirmShowArrow) {
-            <div class="ant-popover-arrow">
-              <span class="ant-popover-arrow-content"></span>
-            </div>
-          }
           <div class="ant-popover-inner">
             <div>
               <div class="ant-popover-inner-content">

components/popover/popover.ts

@@ -109,10 +109,8 @@ export class NzPopoverDirective extends NzTooltipBaseDirective {
         [nzNoAnimation]="noAnimation?.nzNoAnimation"
         [@zoomBigMotion]="'active'"
       >
+        <div class="ant-popover-arrow"></div>
         <div class="ant-popover-content">
-          <div class="ant-popover-arrow">
-            <span class="ant-popover-arrow-content"></span>
-          </div>
           <div class="ant-popover-inner" role="tooltip">
             <div>
               @if (nzTitle) {