feat: Expose showTimeout and hideTimeout props for Tooltip

Doist · Oct 23, 2024 · 6716d8e · 6716d8e
1 parent 0eea18f
commit 6716d8e
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,10 +2,14 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# Next
+
+-   [Feat] Expose `showTimeout` and `hideTimeout` props for `Tooltip`
+
 # v26.0.0
 
 -   [BREAKING] Remove unused `secondaryLabel` from `TexTfield`, `PasswordField`, `SelectField`, `TextArea`, and `SwitchField`.
--   [BREAKING] Remove `hint` from from `TexTfield`, `PasswordField`, `SelectField`, `TextArea`, and `SwitchField`.
+-   [BREAKING] Remove `hint` from from `Textfield`, `PasswordField`, `SelectField`, `TextArea`, and `SwitchField`.
     -   Please use `message` instead.
 -   [Feat] Update read only style for `TextField` and `TextArea` when `readOnly` is `true`.
 -   [Feat] Add `disableResize` option to `TextArea` to disallow manual resizing.

diff --git a/src/tooltip/tooltip.stories.tsx b/src/tooltip/tooltip.stories.tsx
@@ -78,6 +78,8 @@ TooltipPlaygroundStory.args = {
     position: 'top',
     gapSize: 5,
     withArrow: false,
+    showTimeout: 500,
+    hideTimeout: 100,
 }
 
 TooltipPlaygroundStory.argTypes = {
@@ -94,12 +96,16 @@ export function TooltipRichContentStory({
     position,
     gapSize,
     withArrow,
-}: Pick<TooltipProps, 'position' | 'gapSize' | 'withArrow'>) {
+    showTimeout,
+    hideTimeout,
+}: Pick<TooltipProps, 'position' | 'gapSize' | 'withArrow' | 'showTimeout' | 'hideTimeout'>) {
     return (
         <StoryTemplate
             position={position}
             gapSize={gapSize}
             withArrow={withArrow}
+            showTimeout={showTimeout}
+            hideTimeout={hideTimeout}
             content={
                 <Stack space="medium" padding="small" align="start">
                     <Text weight="bold" size="subtitle">
@@ -122,6 +128,8 @@ TooltipRichContentStory.args = {
     position: 'bottom',
     gapSize: 10,
     withArrow: true,
+    showTimeout: 500,
+    hideTimeout: 100,
 }
 
 TooltipRichContentStory.argTypes = {

diff --git a/src/tooltip/tooltip.tsx b/src/tooltip/tooltip.tsx
@@ -66,6 +66,18 @@ interface TooltipProps extends ObfuscatedClassName {
      * @default false
      */
     withArrow?: boolean
+
+    /**
+     * The amount of time in milliseconds to wait before showing the tooltip
+     * @default 500
+     */
+    showTimeout?: number
+
+    /**
+     * The amount of time in milliseconds to wait before hiding the tooltip
+     * @default 100
+     */
+    hideTimeout?: number
 }
 
 function Tooltip({
@@ -74,9 +86,11 @@ function Tooltip({
     position = 'top',
     gapSize = 3,
     withArrow = false,
+    showTimeout = 500,
+    hideTimeout = 100,
     exceptionallySetClassName,
 }: TooltipProps) {
-    const tooltip = useTooltipStore({ placement: position, showTimeout: 500, hideTimeout: 100 })
+    const tooltip = useTooltipStore({ placement: position, showTimeout, hideTimeout })
     const isOpen = tooltip.useState('open')
 
     const child = React.Children.only(