fix: change the popup target element to the inline style

shervinchen · May 22, 2024 · 609e6b1 · 609e6b1
1 parent 857c681
commit 609e6b1
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/packages/Popover/Popover.tsx b/packages/Popover/Popover.tsx
@@ -61,6 +61,7 @@ const Popover: FC<PropsWithChildren<PopoverProps>> = ({
         aria-controls={popoverId}
         ref={ref}
         onClick={handleClick}
+        className="raw-popover-target"
         {...restProps}
       >
         {children}
@@ -97,6 +98,9 @@ const Popover: FC<PropsWithChildren<PopoverProps>> = ({
           padding: 8px 12px;
           transition: opacity 0.05s ease;
         }
+        .raw-popover-target {
+          display: inline-flex;
+        }
       `}</style>
     </>
   );

diff --git a/packages/Popover/__tests__/__snapshots__/Popover.test.tsx.snap b/packages/Popover/__tests__/__snapshots__/Popover.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Popover should match the snapshot 1`] = `
     aria-controls=":r0:"
     aria-expanded="false"
     aria-haspopup="dialog"
-    class="jsx-1622253041 "
+    class="jsx-752255633 raw-popover-target"
     data-testid="popoverTarget"
   >
     Click me

diff --git a/packages/Tooltip/Tooltip.tsx b/packages/Tooltip/Tooltip.tsx
@@ -38,6 +38,7 @@ const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
         ref={ref}
         onMouseEnter={() => handleMouseEnterOrLeave(true)}
         onMouseLeave={() => handleMouseEnterOrLeave(false)}
+        className="raw-tooltip-target"
         {...restProps}
       >
         {children}
@@ -72,6 +73,9 @@ const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
           padding: 8px 12px;
           transition: opacity 0.05s ease;
         }
+        .raw-tooltip-target {
+          display: inline-flex;
+        }
       `}</style>
     </>
   );

diff --git a/packages/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap b/packages/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Tooltip should match the snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-describedby=":r0:"
-    class="jsx-838803725 "
+    class="jsx-1795543492 raw-tooltip-target"
     data-testid="tooltipTarget"
   >
     Hover me