feat: arrow offset (#37527)

* feat: arrow margin

* feat: dropdown arrow offset

* chore: code clean

components/dropdown/style/index.tsx

@@ -1,3 +1,4 @@
+import { getArrowOffset } from '../../style/placementArrow';
 import {
   initMoveMotion,
   initSlideMotion,
@@ -434,15 +435,22 @@ export default genComponentStyleHook(
       lineHeight,
       paddingXXS,
       componentCls,
+      radiusOuter,
+      radiusLG,
     } = token;
 
     const dropdownPaddingVertical = (controlHeight - fontSizeBase * lineHeight) / 2;
+    const { dropdownArrowOffset } = getArrowOffset({
+      sizePopupArrow,
+      contentRadius: radiusLG,
+      radiusOuter,
+    });
 
     const dropdownToken = mergeToken<DropdownToken>(token, {
       menuCls: `${componentCls}-menu`,
       rootPrefixCls,
       dropdownArrowDistance: sizePopupArrow + marginXXS,
-      dropdownArrowOffset: (sizePopupArrow / Math.sqrt(2)) * 2,
+      dropdownArrowOffset,
       dropdownPaddingVertical,
       dropdownEdgeChildPadding: paddingXXS,
     });

components/popover/style/index.tsx

@@ -78,7 +78,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = token => {
     },
 
     // Arrow Style
-    getArrowStyle(token, token.colorBgElevated),
+    getArrowStyle(token, { colorBg: token.colorBgElevated }),
 
     // Pure Render
     {

components/style/placementArrow.tsx

@@ -7,23 +7,44 @@ function connectArrowCls(classList: string[], showArrowCls: string = '') {
   return classList.map(cls => `${showArrowCls}${cls}`).join(',');
 }
 
+export const MAX_VERTICAL_CONTENT_RADIUS = 8;
+
+export function getArrowOffset(options: {
+  sizePopupArrow: number;
+  contentRadius: number;
+  radiusOuter: number;
+  limitVerticalRadius?: boolean;
+}) {
+  const maxVerticalContentRadius = MAX_VERTICAL_CONTENT_RADIUS;
+  const { sizePopupArrow, contentRadius, radiusOuter, limitVerticalRadius } = options;
+  const arrowInnerOffset = sizePopupArrow / 2 - Math.ceil(radiusOuter * (Math.sqrt(2) - 1));
+  const dropdownArrowOffset = (contentRadius > 12 ? contentRadius + 2 : 12) - arrowInnerOffset;
+  const dropdownArrowOffsetVertical = limitVerticalRadius
+    ? maxVerticalContentRadius - arrowInnerOffset
+    : dropdownArrowOffset;
+  return { dropdownArrowOffset, dropdownArrowOffsetVertical };
+}
+
 export default function getArrowStyle<Token extends TokenWithCommonCls<AliasToken>>(
   token: Token,
-  colorBg: string,
-  showArrowCls?: string,
-  arrowMargin?: number,
+  options: {
+    colorBg: string;
+    showArrowCls?: string;
+    contentRadius?: number;
+    limitVerticalRadius?: boolean;
+  },
 ): CSSInterpolation {
-  const {
-    componentCls,
-    sizePopupArrow,
-    marginXXS,
-    radiusXS,
-    radiusOuter,
-    boxShadowPopoverArrow,
-    marginXS,
-  } = token;
+  const { componentCls, sizePopupArrow, marginXXS, radiusXS, radiusOuter, boxShadowPopoverArrow } =
+    token;
 
-  const dropdownArrowOffset = arrowMargin ?? marginXS;
+  const { colorBg, showArrowCls, contentRadius = token.radiusLG, limitVerticalRadius } = options;
+
+  const { dropdownArrowOffsetVertical, dropdownArrowOffset } = getArrowOffset({
+    sizePopupArrow,
+    contentRadius,
+    radiusOuter,
+    limitVerticalRadius,
+  });
   const dropdownArrowDistance = sizePopupArrow + marginXXS;
 
   return {
@@ -131,11 +152,11 @@ export default function getArrowStyle<Token extends TokenWithCommonCls<AliasToke
       },
 
       [`&-placement-leftTop ${componentCls}-arrow`]: {
-        top: dropdownArrowOffset,
+        top: dropdownArrowOffsetVertical,
       },
 
       [`&-placement-leftBottom ${componentCls}-arrow`]: {
-        bottom: dropdownArrowOffset,
+        bottom: dropdownArrowOffsetVertical,
       },
 
       // >>>>> Right
@@ -160,11 +181,11 @@ export default function getArrowStyle<Token extends TokenWithCommonCls<AliasToke
       },
 
       [`&-placement-rightTop ${componentCls}-arrow`]: {
-        top: dropdownArrowOffset,
+        top: dropdownArrowOffsetVertical,
       },
 
       [`&-placement-rightBottom ${componentCls}-arrow`]: {
-        bottom: dropdownArrowOffset,
+        bottom: dropdownArrowOffsetVertical,
       },
 
       // =========================== Offset ============================

components/tooltip/style/index.tsx

@@ -8,7 +8,7 @@ import type {
 } from '../../theme';
 import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme';
 import { resetComponent } from '../../style';
-import getArrowStyle from '../../style/placementArrow';
+import getArrowStyle, { MAX_VERTICAL_CONTENT_RADIUS } from '../../style/placementArrow';
 
 export interface ComponentToken {
   zIndexPopup: number;
@@ -86,6 +86,23 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = token => {
           boxShadow: boxShadowSecondary,
         },
 
+        // Limit left and right placement radius
+        [[
+          `&-placement-left`,
+          `&-placement-leftTop`,
+          `&-placement-leftBottom`,
+          `&-placement-right`,
+          `&-placement-rightTop`,
+          `&-placement-rightBottom`,
+        ].join(',')]: {
+          [`${componentCls}-inner`]: {
+            borderRadius:
+              tooltipBorderRadius > MAX_VERTICAL_CONTENT_RADIUS
+                ? MAX_VERTICAL_CONTENT_RADIUS
+                : tooltipBorderRadius,
+          },
+        },
+
         [`${componentCls}-content`]: {
           position: 'relative',
         },
@@ -105,9 +122,12 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = token => {
       mergeToken<TooltipToken>(token, {
         radiusOuter: tooltipRadiusOuter,
       }),
-      'var(--antd-arrow-background-color)',
-      '',
-      0,
+      {
+        colorBg: 'var(--antd-arrow-background-color)',
+        showArrowCls: '',
+        contentRadius: tooltipBorderRadius,
+        limitVerticalRadius: true,
+      },
     ),
 
     // Pure Render