feat(@air/zephyr): upgrade radix tooltip

AirLabsTeam · Nov 2, 2022 · 8363be0 · 8363be0
1 parent 7978a89
commit 8363be0
Show file tree

Hide file tree

Showing 3 changed files with 214 additions and 243 deletions.
diff --git a/packages/zephyr/package.json b/packages/zephyr/package.json
@@ -59,7 +59,7 @@
   },
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^0.1.4",
-    "@radix-ui/react-tooltip": "^0.1.6",
+    "@radix-ui/react-tooltip": "^1.0.2",
     "@radix-ui/react-visually-hidden": "^1.0.1",
     "@reach/alert-dialog": "^0.11.2",
     "@reach/auto-id": "^0.18.0",

diff --git a/packages/zephyr/src/Tooltip.tsx b/packages/zephyr/src/Tooltip.tsx
@@ -150,64 +150,63 @@ export const Tooltip = ({
 
   return (
     <RadixTooltip.Root delayDuration={500} {...manualControlProps}>
-      {/**
-       * asChild renders the resulting Trigger as a fragment instead of a button
-       *  */}
       <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
 
-      <RadixTooltip.Content
-        side={side}
-        sideOffset={sideOffset}
-        align={align}
-        alignOffset={alignOffset}
-        collisionTolerance={collisionTolerance}
-        avoidCollisions={avoidCollisions}
-      >
-        <Box
-          aria-label={ariaLabel}
-          data-testid={testID}
-          tx={{
-            bg: 'black',
-            color: 'white',
-            px: 10,
-            py: 5,
-            minHeight: 36,
-            borderColor: 'transparent',
-            borderWidth: 2,
-            borderStyle: 'solid',
-            borderRadius: 4,
-            zIndex: baseZIndex + 1,
-            ...(containerStyles as any),
-          }}
+      <RadixTooltip.Portal>
+        <RadixTooltip.Content
+          side={side}
+          sideOffset={sideOffset}
+          align={align}
+          alignOffset={alignOffset}
+          collisionTolerance={collisionTolerance}
+          avoidCollisions={avoidCollisions}
         >
-          <Text
-            variant="text-ui-14"
+          <Box
+            aria-label={ariaLabel}
+            data-testid={testID}
             tx={{
-              color: 'currentColor',
-              fontWeight: 'medium',
-              ...(textContentStyles as any),
+              bg: 'black',
+              color: 'white',
+              px: 10,
+              py: 5,
+              minHeight: 36,
+              borderColor: 'transparent',
+              borderWidth: 2,
+              borderStyle: 'solid',
+              borderRadius: 4,
+              zIndex: baseZIndex + 1,
+              ...(containerStyles as any),
             }}
           >
-            {label}
-          </Text>
-
-          {withArrow && (
-            <RadixTooltip.Arrow width={10} height={7} offset={arrowOffset}>
-              <Box
-                tx={{
-                  zIndex: baseZIndex + 1,
-                  strokeLinejoin: 'round',
-                  strokeLinecap: 'round',
-                  stroke: 'black',
-                  strokeWidth: 1,
-                  ...triangleOffsetMapping['base'][side],
-                  ...(arrowStyles as any),
-                }}
-              />
-            </RadixTooltip.Arrow>
-          )}
-        </Box>
-      </RadixTooltip.Content>
+            <Text
+              variant="text-ui-14"
+              tx={{
+                color: 'currentColor',
+                fontWeight: 'medium',
+                ...(textContentStyles as any),
+              }}
+            >
+              {label}
+            </Text>
+
+            {withArrow && (
+              <RadixTooltip.Arrow width={10} height={7} offset={arrowOffset}>
+                <Box
+                  tx={{
+                    zIndex: baseZIndex + 1,
+                    strokeLinejoin: 'round',
+                    strokeLinecap: 'round',
+                    stroke: 'black',
+                    strokeWidth: 1,
+                    ...triangleOffsetMapping['base'][side],
+                    ...(arrowStyles as any),
+                  }}
+                />
+              </RadixTooltip.Arrow>
+            )}
+          </Box>
+        </RadixTooltip.Content>
+      </RadixTooltip.Portal>
     </RadixTooltip.Root>
   );
 };