feat(Popover): support custom arrow size (#6072)

* feat: Support customizable arrow-size

* feat: svg aspect ratio adapt

* feat: use css variable insteadof getcomputedstyle

* feat: update document

* feat: keep original format style

* doc: update arrow size default value

* chore: update popover types

---------

Co-authored-by: bobihuang <[email protected]>
Co-authored-by: miracles1919 <[email protected]>

Author: 3 people

src/components/popover/index.en.md

@@ -49,6 +49,7 @@ In order to maintain compatibility, we still support the use of the old version
 | Name | Description | Default | Global |
 | --- | --- | --- | --- |
 | --z-index | `z-index` of the popover element | `1030` | `--adm-popover-z-index` |
+| --arrow-size | the arrow size of the popover element | `8px` | - |
 
 ### Ref
 

src/components/popover/index.zh.md

@@ -46,9 +46,10 @@
 
 ### CSS 变量
 
-| 属性      | 说明             | 默认值 | 全局变量                |
-| --------- | ---------------- | ------ | ----------------------- |
-| --z-index | 元素的 `z-index` | `1030` | `--adm-popover-z-index` |
+| 属性         | 说明             | 默认值 | 全局变量                |
+| ------------ | ---------------- | ------ | ----------------------- |
+| --z-index    | 元素的 `z-index` | `1030` | `--adm-popover-z-index` |
+| --arrow-size | 元素的箭头尺寸   | `8px`  | -                       |
 
 ### Ref
 

src/components/popover/popover.less

@@ -63,7 +63,7 @@
   &-arrow-icon {
     display: block;
     height: var(--arrow-size);
-    width: 15px;
+    width: calc(var(--arrow-size) / 8 * 15);
     position: absolute;
     top: 50%;
     left: 50%;

src/components/popover/popover.tsx

@@ -49,7 +49,7 @@ export type PopoverProps = {
   placement?: Placement | DeprecatedPlacement
   stopPropagation?: PropagationEvent[]
   content: React.ReactNode
-} & NativeProps<'--z-index'>
+} & NativeProps<'--z-index' | '--arrow-size'>
 
 export type PopoverRef = {
   show: () => void
@@ -160,7 +160,7 @@ export const Popover = forwardRef<PopoverRef, PopoverProps>((p, ref) => {
       top: arrowY != null ? `${arrowY}px` : '',
       right: '',
       bottom: '',
-      [arrowSide]: `-${convertPx(8)}px`,
+      [arrowSide]: 'calc(var(--arrow-size) * -1)',
     })
     const arrowRotate = {
       top: '0deg',