From 90960ff8003717593c46eb0010a84ddcff3a9a0b Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Tue, 11 Jun 2024 20:14:05 +0900
Subject: [PATCH] feat: add Controlled tooltip example
Added a new example, 'Controlled', for the Tooltip component in the documentation. The 'Controlled' example demonstrates how to use tooltip with controlled states. The change includes the update of examples index and documentation MDX page.
---
packages/react/src/docs/components/Tooltip.mdx | 17 +++++++++++++++++
.../TooltipBlocks/Examples/Controlled.tsx | 16 ++++++++++++++++
.../components/TooltipBlocks/Examples/index.ts | 12 +++++++++++-
3 files changed, 44 insertions(+), 1 deletion(-)
create mode 100644 packages/react/src/docs/components/TooltipBlocks/Examples/Controlled.tsx
diff --git a/packages/react/src/docs/components/Tooltip.mdx b/packages/react/src/docs/components/Tooltip.mdx
index 0b01cac..42ef25b 100644
--- a/packages/react/src/docs/components/Tooltip.mdx
+++ b/packages/react/src/docs/components/Tooltip.mdx
@@ -184,3 +184,20 @@ import { Tooltip, TooltipContent } from "@components/Tooltip";
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/LateDelay.tsx`} />
</TabContent>
</TabProvider>
+
+### Controlled
+
+<TabProvider defaultName="preview">
+ <TabList>
+ <TabTrigger name={"preview"}>Preview</TabTrigger>
+ <TabTrigger name={"code"}>Code</TabTrigger>
+ </TabList>
+ <TabContent name={"preview"}>
+ <Story layout={"centered"}>
+ <Examples.Controlled />
+ </Story>
+ </TabContent>
+ <TabContent name={"code"}>
+ <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Controlled.tsx`} />
+ </TabContent>
+</TabProvider>
\ No newline at end of file
diff --git a/packages/react/src/docs/components/TooltipBlocks/Examples/Controlled.tsx b/packages/react/src/docs/components/TooltipBlocks/Examples/Controlled.tsx
new file mode 100644
index 0000000..a9b72ce
--- /dev/null
+++ b/packages/react/src/docs/components/TooltipBlocks/Examples/Controlled.tsx
@@ -0,0 +1,16 @@
+import { Button } from "@components/Button";
+import { Tooltip, TooltipContent } from "@components/Tooltip";
+import { useState } from "react";
+
+export function Controlled() {
+ const [opened, setOpened] = useState(false);
+
+ return (
+ <Tooltip position="top" controlled opened={opened}>
+ <TooltipContent delay={"early"}>
+ <p>Tooltip!</p>
+ </TooltipContent>
+ <Button onClick={() => setOpened((p) => !p)}>Open hover</Button>
+ </Tooltip>
+ );
+}
diff --git a/packages/react/src/docs/components/TooltipBlocks/Examples/index.ts b/packages/react/src/docs/components/TooltipBlocks/Examples/index.ts
index 1f08d68..239edf9 100644
--- a/packages/react/src/docs/components/TooltipBlocks/Examples/index.ts
+++ b/packages/react/src/docs/components/TooltipBlocks/Examples/index.ts
@@ -5,5 +5,15 @@ import { Top } from "./Top";
import { NoDelay } from "./NoDelay";
import { EarlyDelay } from "./EarlyDelay";
import { LateDelay } from "./LateDelay";
+import { Controlled } from "./Controlled";
-export default { Bottom, Left, Right, Top, NoDelay, EarlyDelay, LateDelay };
+export default {
+ Bottom,
+ Left,
+ Right,
+ Top,
+ NoDelay,
+ EarlyDelay,
+ LateDelay,
+ Controlled,
+};