From 874a227d94e3987877197e91fac57618eb150321 Mon Sep 17 00:00:00 2001
From: dengfuping <fuping.dfp@antgroup.com>
Date: Thu, 19 Dec 2024 11:30:48 +0800
Subject: [PATCH] chore(ui): Add Action demo with tooltip and popconfirm

---
 .../Action/demo/with-tooltip-popconfirm.tsx   | 29 +++++++++++++++++++
 packages/ui/src/Action/index.md               |  6 ++--
 2 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 packages/ui/src/Action/demo/with-tooltip-popconfirm.tsx

diff --git a/packages/ui/src/Action/demo/with-tooltip-popconfirm.tsx b/packages/ui/src/Action/demo/with-tooltip-popconfirm.tsx
new file mode 100644
index 000000000..eccadc763
--- /dev/null
+++ b/packages/ui/src/Action/demo/with-tooltip-popconfirm.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Popconfirm, Space } from '@oceanbase/design';
+import { Action } from '@oceanbase/ui';
+import { DownOutlined } from '@oceanbase/icons';
+
+export default () => {
+  return (
+    <Action.Group
+      moreText={
+        <Space size={4}>
+          更多
+          <DownOutlined />
+        </Space>
+      }
+    >
+      <Action.Button type="primary" tooltip="This is tooltip">
+        action1
+      </Action.Button>
+      <Popconfirm placement="bottom" title="Confirm to delete it?">
+        <Action.Button danger tooltip="This is tooltip">
+          危险按钮
+        </Action.Button>
+      </Popconfirm>
+      <Action.Button>action3</Action.Button>
+      <Action.Button>action4</Action.Button>
+      <Action.Button>action5</Action.Button>
+    </Action.Group>
+  );
+};
diff --git a/packages/ui/src/Action/index.md b/packages/ui/src/Action/index.md
index 4970b10e5..57b173e29 100644
--- a/packages/ui/src/Action/index.md
+++ b/packages/ui/src/Action/index.md
@@ -7,14 +7,12 @@ nav:
 
 ## 代码演示
 
+<!-- prettier-ignore -->
 <code src="./demo/link.tsx" title="Action.Link"></code>
-
 <code src="./demo/button.tsx" title="Action.Button"></code>
-
 <code src="./demo/loading.tsx" title="loading 状态"></code>
-
+<code src="./demo/with-tooltip-popconfirm.tsx" title="带 Tooltip 和 Popconfirm"></code>
 <code src="./demo/fixed.tsx" title="固定展示、不被折叠的 Action"></code>
-
 <code src="./demo/groupControl.tsx" title="整体控制状态"></code>
 
 ## API