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]>
ant-design · Apr 1, 2023 · 3b02e0f · 3b02e0f
1 parent 1929463
commit 3b02e0f
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git a/src/components/popover/index.en.md b/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
 

diff --git a/src/components/popover/index.zh.md b/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
 

diff --git a/src/components/popover/popover.less b/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%;

diff --git a/src/components/popover/popover.tsx b/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',