💄 Tooltip: implement [popover] (#3575)

* 💄 Tooltip: implement [popover] * 📸 Update snapshot * 📝 Update stories * update snapshot
equinor · Aug 6, 2024 · 0a01dd8 · 0a01dd8
1 parent 2bd8e94
commit 0a01dd8
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 20 deletions.
diff --git a/packages/eds-core-react/src/components/Dialog/Dialog.stories.tsx b/packages/eds-core-react/src/components/Dialog/Dialog.stories.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useArgs } from '@storybook/preview-api'
-import { Dialog, DialogProps, Button, Radio, Typography } from '../..'
+import { Dialog, DialogProps, Button, Radio, Typography, Tooltip } from '../..'
 import styled from 'styled-components'
 import { StoryFn, Meta } from '@storybook/react'
 import { Stack } from './../../../.storybook/components'
@@ -121,7 +121,9 @@ export const Dismissable: StoryFn<DialogProps> = () => {
         </Dialog.CustomContent>
         <Dialog.Actions>
           <Wrapper>
-            <Button onClick={handleClose}>OK</Button>
+            <Tooltip title="A tooltip inside dialog" placement="top">
+              <Button onClick={handleClose}>OK</Button>
+            </Tooltip>
             <Button variant="ghost" onClick={handleClose}>
               Cancel
             </Button>

diff --git a/packages/eds-core-react/src/components/Tooltip/Tooltip.stories.tsx b/packages/eds-core-react/src/components/Tooltip/Tooltip.stories.tsx
@@ -160,10 +160,10 @@ export const TooltipOnButton: StoryFn<TooltipProps> = () => (
     <Tooltip title="This is what a tooltip looks like">
       <Button>Hover me</Button>
     </Tooltip>
-    <Tooltip title="This tooltip only shows for people using firefox and using mouse. Don't do this!">
+    <Tooltip title="This tooltip only shows for people using mouse. Don't do this!">
       <Button disabled>Disabled button</Button>
     </Tooltip>
-    <Tooltip title="Tooltip works in all browsers and with keyboard navigation when using aria-disabled">
+    <Tooltip title="Tooltip works with keyboard navigation when using aria-disabled">
       <Button aria-disabled>Aria-disabled button</Button>
     </Tooltip>
   </>

diff --git a/packages/eds-core-react/src/components/Tooltip/Tooltip.tsx b/packages/eds-core-react/src/components/Tooltip/Tooltip.tsx
@@ -14,7 +14,7 @@ import {
   typographyTemplate,
   bordersTemplate,
   mergeRefs,
-  useIsInDialog,
+  useIsomorphicLayoutEffect,
 } from '@equinor/eds-utils'
 import { tooltip as tokens } from './Tooltip.tokens'
 import {
@@ -30,18 +30,19 @@ import {
   useFocus,
   useRole,
   useDismiss,
-  FloatingPortal,
 } from '@floating-ui/react'
 
-const StyledTooltip = styled.div`
+const StyledTooltip = styled('div').withConfig({
+  shouldForwardProp: () => true, //workaround to avoid warning until popover gets added to react types
+})<{ popover: string }>`
+  inset: unset;
+  border: 0;
+  overflow: visible;
   ${typographyTemplate(tokens.typography)}
   ${spacingsTemplate(tokens.spacings)}
   ${bordersTemplate(tokens.border)}
-
   background: ${tokens.background};
-  z-index: 1500;
   white-space: nowrap;
-
   &::before {
     content: '; Has tooltip: ';
     clip-path: inset(50%);
@@ -52,6 +53,9 @@ const StyledTooltip = styled.div`
     padding: 0;
     position: absolute;
   }
+  &::backdrop {
+    background-color: transparent;
+  }
 `
 
 const ArrowWrapper = styled.div`
@@ -171,11 +175,15 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       }),
     })
 
-    //temporary fix for tooltip inside dialog. Should be replaced by popover api when it is ready
-    const inDialog = useIsInDialog(refs.domReference.current)
+    useIsomorphicLayoutEffect(() => {
+      if (shouldOpen && open) {
+        refs.floating.current?.showPopover()
+      }
+    }, [open, shouldOpen, refs.floating])
 
     const TooltipEl = (
       <StyledTooltip
+        popover="manual"
         {...rest}
         {...getFloatingProps({
           ref: tooltipRef,
@@ -198,13 +206,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
 
     return (
       <>
-        {inDialog ? (
-          <>{shouldOpen && open && TooltipEl}</>
-        ) : (
-          <FloatingPortal id="eds-tooltip-container">
-            {shouldOpen && open && TooltipEl}
-          </FloatingPortal>
-        )}
+        {shouldOpen && open && TooltipEl}
         {updatedChildren}
       </>
     )

diff --git a/packages/eds-core-react/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/packages/eds-core-react/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -2,6 +2,9 @@
 
 exports[`Tooltip Matches snapshot 1`] = `
 .c0 {
+  inset: unset;
+  border: 0;
+  overflow: visible;
   margin: 0;
   color: var(--eds_text__static_icons__primary_white, rgba(255, 255, 255, 1));
   font-family: Equinor;
@@ -15,7 +18,6 @@ exports[`Tooltip Matches snapshot 1`] = `
   padding-bottom: 8px;
   border-radius: 4px;
   background: var(--eds_ui_background__overlay, rgba(0, 0, 0, 0.8));
-  z-index: 1500;
   white-space: nowrap;
 }
 
@@ -30,6 +32,10 @@ exports[`Tooltip Matches snapshot 1`] = `
   position: absolute;
 }
 
+.c0::backdrop {
+  background-color: transparent;
+}
+
 .c1 {
   position: absolute;
   width: 6px;
@@ -47,6 +53,7 @@ exports[`Tooltip Matches snapshot 1`] = `
 <div
   class="c0"
   id=":r0:"
+  popover="manual"
   role="tooltip"
   style="position: absolute; top: 14px; left: 8px;"
   tabindex="-1"