Merge pull request #2224 from XiaoMi/feature/popover-gutter-gap

feat(popover): 增加设置间距功能

packages/ui/pop-confirm/src/use-pop-confirm.ts

@@ -117,6 +117,10 @@ export interface UsePopConfirmProps {
    * 点击确认按钮时回调
    */
   onConfirm?: () => void
+  /**
+   * 设置基于 reference 元素的间隙偏移量
+   */
+  gutterGap?: number
   /**
    * 是否开启禁用。暂不对外暴露
    * @private

packages/ui/pop-confirm/stories/gutter-gap.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import PopConfirm from '../src'
+import Button from '@hi-ui/button'
+
+/**
+ * @title 设置基于依附元素的间隙偏移量
+ */
+export const GutterGap = () => {
+  return (
+    <>
+      <h1>Gutter Gap</h1>
+      <div className="pop-confirm-basic__wrap">
+        <PopConfirm title="Delete this item along with the entered content?" gutterGap={30}>
+          <Button>Trigger</Button>
+        </PopConfirm>
+      </div>
+    </>
+  )
+}

packages/ui/pop-confirm/stories/index.stories.tsx

@@ -4,6 +4,7 @@ import PopConfirm from '../src'
 export * from './basic.stories'
 export * from './custom-icon.stories'
 export * from './async.stories'
+export * from './gutter-gap.stories'
 
 export default {
   title: 'FeedBack/PopConfirm',

packages/ui/popover/src/use-popover.tsx

@@ -181,6 +181,10 @@ export interface UsePopoverProps extends PopperOverlayProps {
    * 鼠标移出后隐藏延时，单位：毫秒
    */
   mouseLeaveDelay?: number
+  /**
+   * 设置基于 reference 元素的间隙偏移量
+   */
+  gutterGap?: number
 }
 
 export type UsePopoverReturn = ReturnType<typeof usePopover>

packages/ui/popover/stories/gutter-gap.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import Popover from '../src'
+import Button from '@hi-ui/button'
+
+/**
+ * @title 设置基于依附元素的间隙偏移量
+ */
+export const GutterGap = () => {
+  const title = <span>文字提示</span>
+  const content = (
+    <div>
+      <div>此处展示 Popover 具体内容</div>
+      <div>具体内容可以自行渲染</div>
+    </div>
+  )
+
+  return (
+    <>
+      <h1>Gutter Gap</h1>
+      <div className="popover-basic__wrap">
+        <Popover title={title} content={content} gutterGap={30} trigger="click">
+          <Button>trigger</Button>
+        </Popover>
+      </div>
+    </>
+  )
+}

packages/ui/popover/stories/index.stories.tsx

@@ -6,6 +6,7 @@ export * from './arrow.stories'
 export * from './trigger.stories'
 export * from './placement.stories'
 export * from './controlled.stories'
+export * from './gutter-gap.stories'
 
 export default {
   title: 'Data Display/Popover',

packages/ui/tooltip/src/use-tooltip.ts

@@ -207,6 +207,10 @@ export interface UseTooltipProps extends PopperOverlayProps {
    * 鼠标移出后隐藏延时，单位：毫秒
    */
   mouseLeaveDelay?: number
+  /**
+   * 设置基于 reference 元素的间隙偏移量
+   */
+  gutterGap?: number
 }
 
 export type UseTooltipReturn = ReturnType<typeof useTooltip>

packages/ui/tooltip/stories/gutter-gap.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Tooltip from '../src'
+import Button from '@hi-ui/button'
+
+/**
+ * @title 设置基于依附元素的间隙偏移量
+ */
+export const GutterGap = () => {
+  return (
+    <>
+      <h1>Gutter Gap</h1>
+      <div className="Tooltip-basic__wrap">
+        <Tooltip title="Tooltip Title" gutterGap={30} trigger="hover">
+          <Button>trigger</Button>
+        </Tooltip>
+      </div>
+    </>
+  )
+}

packages/ui/tooltip/stories/index.stories.tsx

@@ -6,6 +6,7 @@ export * from './trigger.stories'
 export * from './placement.stories'
 export * from './break-word.stories'
 export * from './with-api.stories'
+export * from './gutter-gap.stories'
 
 export default {
   title: 'Data Display/Tooltip',