feat(tooltip): expose tooltip open property (#42)

* feat(tooltip): expose tooltip open property * feat(tooltip): simplify implementation, added storybook for open by default case * feat(Tooltip): refactor component --------- Co-authored-by: Stewart Jingga <stewart.jingga@gojek.com>
goto · May 14, 2024 · d9c511f · d9c511f
1 parent 2dcbe75
commit d9c511f
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 36 deletions.
diff --git a/packages/apsara-ui/src/Tooltip/Tooltip.stories.tsx b/packages/apsara-ui/src/Tooltip/Tooltip.stories.tsx
@@ -1,14 +1,40 @@
 import React from "react";
-import Tooltip, { TooltipProps } from "./Tooltip";
+
+import Tooltip from "./Tooltip";
 
 export default {
     title: "Feedback/Tooltip",
     component: Tooltip,
 };
 
-const Template = (args: TooltipProps) => <Tooltip {...args}>Tooltip</Tooltip>;
-export const tooltip = Template.bind({});
-tooltip.args = {
-    title: "tooltip",
-    placement: "right",
+export const Basic = () => {
+    return (
+        <Tooltip title="This is tooltip content">
+            <span>Content Wrapped by Tooltip</span>
+        </Tooltip>
+    );
+};
+
+export const WithDefaultOpen = () => {
+    return (
+        <Tooltip title="I am open by default" defaultOpen>
+            <span>Content Wrapped by Tooltip</span>
+        </Tooltip>
+    );
+};
+
+export const ControlledState = () => {
+    const [open, setOpen] = React.useState(true);
+
+    return (
+        // @ts-ignore
+        <Tooltip title={(
+            <span>
+                This is tooltip content
+                <span style={{ marginLeft: '8px', cursor: 'pointer'}} onClick={() => setOpen(false)}>X</span>
+            </span>
+        )} open={open}>
+            <span>Content Wrapped by Tooltip</span>
+        </Tooltip>
+    );
 };
diff --git a/packages/apsara-ui/src/Tooltip/Tooltip.styles.tsx b/packages/apsara-ui/src/Tooltip/Tooltip.styles.tsx
@@ -1,20 +1,21 @@
 import styled from "styled-components";
+import * as RadixTooltip from "@radix-ui/react-tooltip";
 
-export const TooltipContentWrapper = styled("span")`
-    .TooltipContent {
-        --tooltip-color: ${({ style }) => style?.color};
-        --tooltip-background-color: ${({ style }) => style?.backgroundColor};
-        color: var(--tooltip-color);
-        background-color: var(--tooltip-background-color);
-        padding: 4px 8px;
-        width: max-content;
-        max-width: 250px;
-        border-radius: 2px;
-        text-align: left;
-        font-size: 11px;
-        font-family: Roboto;
-        font-weight: 200;
-    }
+export const TooltipContent = styled(RadixTooltip.Content)`
+    --tooltip-color: ${({ style }) => style?.color};
+    --tooltip-background-color: ${({ style }) => style?.backgroundColor};
+    color: var(--tooltip-color);
+    background-color: var(--tooltip-background-color);
+    padding: 4px 8px;
+    width: max-content;
+    max-width: 250px;
+    border-radius: 2px;
+    text-align: left;
+    font-size: 11px;
+    font-family: Roboto;
+    font-weight: 200;
+    background-color: #333;
+    color: white;
 
     .TooltipArrow {
         --tooltip-background-color: ${({ style }) => style?.backgroundColor};

diff --git a/packages/apsara-ui/src/Tooltip/Tooltip.tsx b/packages/apsara-ui/src/Tooltip/Tooltip.tsx
@@ -1,40 +1,43 @@
 import React, { HTMLAttributes } from "react";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
-import { TooltipContentWrapper } from "./Tooltip.styles";
 
-type RenderFunction = () => React.ReactNode;
+import { TooltipContent } from "./Tooltip.styles";
 
 export type TooltipPlacement = "left" | "right" | "top" | "bottom";
 
 export type TooltipProps = {
-    title?: React.ReactNode | RenderFunction | string;
+    title?: React.ReactNode;
     placement?: TooltipPlacement;
     style?: React.CSSProperties;
     defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    delayDuration?: number;
+    avoidCollisions?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
 const Tooltip = ({
     title = "",
     placement = "right",
-    style = { backgroundColor: "#333", color: "white" },
+    delayDuration = 100,
+    style,
     children,
-    defaultOpen = false,
+    defaultOpen,
+    open,
+    onOpenChange,
+    avoidCollisions,
     ...props
 }: TooltipProps) => {
     return (
-        <RadixTooltip.Provider delayDuration={100}>
-            <RadixTooltip.Root defaultOpen={defaultOpen}>
+        <RadixTooltip.Provider delayDuration={delayDuration}>
+            <RadixTooltip.Root defaultOpen={defaultOpen} open={open} onOpenChange={onOpenChange}>
                 <RadixTooltip.Trigger asChild>
                     <span>{children}</span>
                 </RadixTooltip.Trigger>
-                <RadixTooltip.Portal>
-                    <TooltipContentWrapper style={style}>
-                        <RadixTooltip.Content className="TooltipContent" sideOffset={5} side={placement} {...props}>
-                            {title}
-                            <RadixTooltip.Arrow className="TooltipArrow" />
-                        </RadixTooltip.Content>
-                    </TooltipContentWrapper>
-                </RadixTooltip.Portal>
+                <TooltipContent className="TooltipContent" sideOffset={5} side={placement} style={style} avoidCollisions={avoidCollisions} {...props}>
+                    {title}
+                    <RadixTooltip.Arrow className="TooltipArrow" />
+                </TooltipContent>
             </RadixTooltip.Root>
         </RadixTooltip.Provider>
     );