p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(Tooltip): add delay option examples

Browse Source 
Three new delay options have been added for the Tooltip component: NoDelay, EarlyDelay, and LateDelay. These options have also been incorporated into the component's documentation for better understanding.
This commit is contained in:
p-sw 2024-06-11 19:24:08 +09:00
parent ea987ad590
commit 300c7fc8c3
6 changed files with 94 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
packages/react/components/Form.tsx Normal file
View File

51
packages/react/src/docs/components/Tooltip.mdx
View File

@ -133,3 +133,54 @@ import { Tooltip, TooltipContent } from "@components/Tooltip";
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Right.tsx`} />
</TabContent>
</TabProvider>
### No Delay
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name={"preview"}>Preview</TabTrigger>
<TabTrigger name={"code"}>Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.NoDelay />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/NoDelay.tsx`} />
</TabContent>
</TabProvider>
### Early Delay
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name={"preview"}>Preview</TabTrigger>
<TabTrigger name={"code"}>Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.EarlyDelay />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/EarlyDelay.tsx`} />
</TabContent>
</TabProvider>
### Late Delay
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name={"preview"}>Preview</TabTrigger>
<TabTrigger name={"code"}>Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.LateDelay />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/LateDelay.tsx`} />
</TabContent>
</TabProvider>

13
packages/react/src/docs/components/TooltipBlocks/Examples/EarlyDelay.tsx Normal file
View File

@ -0,0 +1,13 @@
import { Button } from "@components/Button";
import { Tooltip, TooltipContent } from "@components/Tooltip";
export function EarlyDelay() {
return (
<Tooltip position="bottom">
<TooltipContent delay={"early"}>
<p>Tooltip!</p>
</TooltipContent>
<Button>Hover me</Button>
</Tooltip>
);
}

13
packages/react/src/docs/components/TooltipBlocks/Examples/LateDelay.tsx Normal file
View File

@ -0,0 +1,13 @@
import { Button } from "@components/Button";
import { Tooltip, TooltipContent } from "@components/Tooltip";
export function LateDelay() {
return (
<Tooltip position="bottom">
<TooltipContent delay={"late"}>
<p>Tooltip!</p>
</TooltipContent>
<Button>Hover me</Button>
</Tooltip>
);
}

13
packages/react/src/docs/components/TooltipBlocks/Examples/NoDelay.tsx Normal file
View File

@ -0,0 +1,13 @@
import { Button } from "@components/Button";
import { Tooltip, TooltipContent } from "@components/Tooltip";
export function NoDelay() {
return (
<Tooltip position="bottom">
<TooltipContent delay={"none"}>
<p>Tooltip!</p>
</TooltipContent>
<Button>Hover me</Button>
</Tooltip>
);
}

6
packages/react/src/docs/components/TooltipBlocks/Examples/index.ts
View File

@ -2,6 +2,8 @@ import { Bottom } from "./Bottom";
import { Left } from "./Left";
import { Right } from "./Right";
import { Top } from "./Top";
import { NoDelay } from "./NoDelay";
import { EarlyDelay } from "./EarlyDelay";
import { LateDelay } from "./LateDelay";
export default { Bottom, Left, Right, Top };
export default { Bottom, Left, Right, Top, NoDelay, EarlyDelay, LateDelay };