fix: use forwardRef for tooltip component

traefik · Jan 7, 2025 · 8b4a072 · 8b4a072
1 parent bec2646
commit 8b4a072
Show file tree

Hide file tree

Showing 4 changed files with 232 additions and 38 deletions.
diff --git a/components/Tooltip/Tooltip.stories.tsx b/components/Tooltip/Tooltip.stories.tsx
@@ -3,6 +3,7 @@ import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
+import { Bubble as BubbleComponent } from '../Bubble';
 import { Container } from '../Container';
 import { Flex } from '../Flex';
 import { Text } from '../Text';
@@ -75,4 +76,10 @@ NodeContent.argTypes = {
   },
 };
 
+export const Bubble: StoryFn<typeof TooltipForStory> = (args) => (
+  <TooltipForStory {...args} content="This is a green bubble">
+    <BubbleComponent variant="green" size="large" />
+  </TooltipForStory>
+);
+
 export default Component;
diff --git a/components/Tooltip/Tooltip.tsx b/components/Tooltip/Tooltip.tsx
@@ -33,10 +33,21 @@ const ArrowBox = styled(Box, {
   color: '$tooltipContentBg',
 });
 
-export const TooltipContent = ({ css, multiline, children, ...props }: Partial<TooltipProps>) => {
+export const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof Content>,
+  Partial<TooltipProps>
+>(({ css, multiline, children, ...props }, forwardedRef) => {
   const isContentString = React.useMemo(() => typeof children === 'string', [children]);
   return (
-    <Content css={css} side="top" align="center" sideOffset={5} {...props} multiline={multiline}>
+    <Content
+      css={css}
+      side="top"
+      align="center"
+      sideOffset={5}
+      {...props}
+      multiline={multiline}
+      ref={forwardedRef}
+    >
       {isContentString ? (
         <Text
           size="1"
@@ -63,29 +74,23 @@ export const TooltipContent = ({ css, multiline, children, ...props }: Partial<T
       </ArrowBox>
     </Content>
   );
-};
+});
 
-export function Tooltip({
-  children,
-  content,
-  open,
-  defaultOpen,
-  onOpenChange,
-  multiline,
-  css,
-  ...props
-}: TooltipProps) {
-  return (
+export const Tooltip = React.forwardRef<React.ElementRef<typeof Content>, TooltipProps>(
+  (
+    { children, content, open, defaultOpen, onOpenChange, multiline, css, ...props },
+    forwardedRef,
+  ) => (
     <TooltipPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
       <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
       <TooltipPrimitive.Portal>
-        <TooltipContent css={css} multiline={multiline} {...props}>
+        <TooltipContent css={css} multiline={multiline} ref={forwardedRef} {...props}>
           {content}
         </TooltipContent>
       </TooltipPrimitive.Portal>
     </TooltipPrimitive.Root>
-  );
-}
+  ),
+);
 
 export const TooltipRoot = TooltipPrimitive.Root;
 export const TooltipTrigger = TooltipPrimitive.Trigger;

diff --git a/package.json b/package.json
@@ -81,7 +81,7 @@
     "@radix-ui/react-tabs": "^1.0.1",
     "@radix-ui/react-toggle": "^1.0.1",
     "@radix-ui/react-toggle-group": "^1.0.1",
-    "@radix-ui/react-tooltip": "^1.0.7",
+    "@radix-ui/react-tooltip": "^1.1.6",
     "@radix-ui/react-use-layout-effect": "^1.0.0",
     "@radix-ui/react-visually-hidden": "^1.0.1",
     "@rehookify/datepicker": "^6.6.7",