fix(ui): Bring back tooltip arrows (#82241)

getsentry · Dec 17, 2024 · 63fc159 · 63fc159
1 parent 578f2af
commit 63fc159
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/static/app/components/tooltip.spec.tsx b/static/app/components/tooltip.spec.tsx
@@ -25,12 +25,23 @@ describe('Tooltip', function () {
     jest.clearAllMocks();
   });
 
-  it('renders', function () {
+  it('renders', async function () {
     render(
       <Tooltip delay={0} title="test">
         <span>My Button</span>
       </Tooltip>
     );
+
+    await userEvent.hover(screen.getByText('My Button'));
+    expect(screen.getByText('test')).toBeInTheDocument();
+
+    // Check that the arrow svg is rendered
+    expect(document.querySelector('svg')).toBeInTheDocument();
+
+    await userEvent.unhover(screen.getByText('My Button'));
+    await waitFor(() => {
+      expect(screen.queryByText('test')).not.toBeInTheDocument();
+    });
   });
 
   it('updates title', async function () {

diff --git a/static/app/components/tooltip.tsx b/static/app/components/tooltip.tsx
@@ -1,6 +1,5 @@
 import {createContext, Fragment, useContext, useEffect} from 'react';
 import {createPortal} from 'react-dom';
-import isPropValid from '@emotion/is-prop-valid';
 import type {SerializedStyles} from '@emotion/react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
@@ -92,9 +91,9 @@ function Tooltip({
   );
 }
 
-const TooltipContent = styled(Overlay, {shouldForwardProp: isPropValid})<{
-  maxWidth?: number;
-}>`
+const TooltipContent = styled(Overlay, {
+  shouldForwardProp: prop => prop !== 'maxWidth',
+})<{maxWidth?: number}>`
   padding: ${space(1)} ${space(1.5)};
   overflow-wrap: break-word;
   max-width: ${p => p.maxWidth ?? 225}px;