From ad3c82a56f7bdb1ab95bfc8a3c85087d8121584f Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Wed, 7 Sep 2022 20:54:38 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(popover):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E9=97=B4=E8=B7=9D=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/popover/src/use-popover.tsx       |  4 +++
 .../ui/popover/stories/gutter-gap.stories.tsx | 27 +++++++++++++++++++
 packages/ui/popover/stories/index.stories.tsx |  1 +
 3 files changed, 32 insertions(+)
 create mode 100644 packages/ui/popover/stories/gutter-gap.stories.tsx

diff --git a/packages/ui/popover/src/use-popover.tsx b/packages/ui/popover/src/use-popover.tsx
index 553b47888..af03b17c3 100644
--- a/packages/ui/popover/src/use-popover.tsx
+++ b/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>
diff --git a/packages/ui/popover/stories/gutter-gap.stories.tsx b/packages/ui/popover/stories/gutter-gap.stories.tsx
new file mode 100644
index 000000000..b87d139c0
--- /dev/null
+++ b/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>
+    </>
+  )
+}
diff --git a/packages/ui/popover/stories/index.stories.tsx b/packages/ui/popover/stories/index.stories.tsx
index 8ce8c9667..a243b6a80 100644
--- a/packages/ui/popover/stories/index.stories.tsx
+++ b/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',

From e2b0f216f0396f722ed3b711f5c458e9c23f06ac Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Thu, 8 Sep 2022 19:50:24 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(tooltip&pop-confirm):=20Tooltip?=
 =?UTF-8?q?=E5=92=8CPopConfirm=E7=BB=84=E4=BB=B6=E5=90=8C=E6=AD=A5?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=AE=BE=E7=BD=AE=E9=97=B4=E8=B7=9D=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/pop-confirm/src/use-pop-confirm.ts     |  4 ++++
 .../stories/gutter-gap.stories.tsx            | 19 +++++++++++++++++++
 .../ui/pop-confirm/stories/index.stories.tsx  |  1 +
 packages/ui/tooltip/src/use-tooltip.ts        |  4 ++++
 .../ui/tooltip/stories/gutter-gap.stories.tsx | 19 +++++++++++++++++++
 packages/ui/tooltip/stories/index.stories.tsx |  1 +
 6 files changed, 48 insertions(+)
 create mode 100644 packages/ui/pop-confirm/stories/gutter-gap.stories.tsx
 create mode 100644 packages/ui/tooltip/stories/gutter-gap.stories.tsx

diff --git a/packages/ui/pop-confirm/src/use-pop-confirm.ts b/packages/ui/pop-confirm/src/use-pop-confirm.ts
index 168b28b38..bc193daa1 100644
--- a/packages/ui/pop-confirm/src/use-pop-confirm.ts
+++ b/packages/ui/pop-confirm/src/use-pop-confirm.ts
@@ -117,6 +117,10 @@ export interface UsePopConfirmProps {
    * 点击确认按钮时回调
    */
   onConfirm?: () => void
+  /**
+   * 设置基于 reference 元素的间隙偏移量
+   */
+  gutterGap?: number
   /**
    * 是否开启禁用。暂不对外暴露
    * @private
diff --git a/packages/ui/pop-confirm/stories/gutter-gap.stories.tsx b/packages/ui/pop-confirm/stories/gutter-gap.stories.tsx
new file mode 100644
index 000000000..66c5387d2
--- /dev/null
+++ b/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>
+    </>
+  )
+}
diff --git a/packages/ui/pop-confirm/stories/index.stories.tsx b/packages/ui/pop-confirm/stories/index.stories.tsx
index b41c63c5b..959df58a8 100644
--- a/packages/ui/pop-confirm/stories/index.stories.tsx
+++ b/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',
diff --git a/packages/ui/tooltip/src/use-tooltip.ts b/packages/ui/tooltip/src/use-tooltip.ts
index 1c04dcf91..999d78d96 100644
--- a/packages/ui/tooltip/src/use-tooltip.ts
+++ b/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>
diff --git a/packages/ui/tooltip/stories/gutter-gap.stories.tsx b/packages/ui/tooltip/stories/gutter-gap.stories.tsx
new file mode 100644
index 000000000..bb42a441f
--- /dev/null
+++ b/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>
+    </>
+  )
+}
diff --git a/packages/ui/tooltip/stories/index.stories.tsx b/packages/ui/tooltip/stories/index.stories.tsx
index 2352ede35..29b92bc3c 100644
--- a/packages/ui/tooltip/stories/index.stories.tsx
+++ b/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',