From cd922f20805e0316ff214576f45a25d4459a5b2e Mon Sep 17 00:00:00 2001
From: Frida Erdal <31915755+pomfrida@users.noreply.github.com>
Date: Tue, 25 Aug 2020 09:37:54 +0200
Subject: [PATCH] Popover and tooltip consistensy (#488)

* Popover and tooltip examples in tables

* Popover display: inline-flex fixes alignment issues in tables

* Same fix for Tooltip

* Tests updated after change

* Removed unused code

* Removed test table story
---
 .../stories/Tooltip.stories.jsx                |  2 +-
 libraries/core-react/src/Popover/Popover.jsx   |  2 +-
 .../core-react/src/Popover/Popover.test.jsx    |  2 +-
 .../core-react/src/Popover/PopoverItem.jsx     |  2 +-
 libraries/core-react/src/Tooltip/Tooltip.jsx   | 18 +++++++++---------
 .../core-react/src/Tooltip/Tooltip.test.jsx    |  2 +-
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/apps/storybook-react/stories/Tooltip.stories.jsx b/apps/storybook-react/stories/Tooltip.stories.jsx
index 654e21ad84..b0816ca7ad 100644
--- a/apps/storybook-react/stories/Tooltip.stories.jsx
+++ b/apps/storybook-react/stories/Tooltip.stories.jsx
@@ -8,7 +8,7 @@ import {
   Icon,
   Avatar,
   Chip,
-  TextField, //
+  TextField,
   Search,
 } from '@equinor/eds-core-react'
 import catImg from '../images/cat.jpg'
diff --git a/libraries/core-react/src/Popover/Popover.jsx b/libraries/core-react/src/Popover/Popover.jsx
index fd780454b0..50fa2c2133 100644
--- a/libraries/core-react/src/Popover/Popover.jsx
+++ b/libraries/core-react/src/Popover/Popover.jsx
@@ -6,7 +6,7 @@ import { PopoverItem } from './PopoverItem'
 
 const Container = styled.div`
   position: relative;
-  display: flex;
+  display: inline-flex;
   justify-content: center;
 `
 
diff --git a/libraries/core-react/src/Popover/Popover.test.jsx b/libraries/core-react/src/Popover/Popover.test.jsx
index 2519aab02b..fa8c60ddd6 100644
--- a/libraries/core-react/src/Popover/Popover.test.jsx
+++ b/libraries/core-react/src/Popover/Popover.test.jsx
@@ -49,7 +49,7 @@ describe('Popover', () => {
     const { container } = render(<SimplePopover open placement="topRight" />)
     const popoverWrapper = container.lastElementChild
     const popover = popoverWrapper.lastChild
-    expect(popoverWrapper).toHaveStyleRule('display', 'flex')
+    expect(popoverWrapper).toHaveStyleRule('display', 'inline-flex')
     expect(popover).toHaveStyleRule('top', `${topRight.popoverTop}`)
     expect(popover).toHaveStyleRule('right', `${topRight.popoverRight}`)
   })
diff --git a/libraries/core-react/src/Popover/PopoverItem.jsx b/libraries/core-react/src/Popover/PopoverItem.jsx
index c97effc218..f1b81c2456 100644
--- a/libraries/core-react/src/Popover/PopoverItem.jsx
+++ b/libraries/core-react/src/Popover/PopoverItem.jsx
@@ -17,9 +17,9 @@ const StyledPopoverWrapper = styled.div`
       transform: ${transform};
     `}
   width: max-content;
+  align-self: center;
   position: absolute;
   z-index: 500;
-  align-self: center;
   flex-shrink: 0;
   ::after {
     content: '';
diff --git a/libraries/core-react/src/Tooltip/Tooltip.jsx b/libraries/core-react/src/Tooltip/Tooltip.jsx
index d3d252e3d3..430155e39b 100644
--- a/libraries/core-react/src/Tooltip/Tooltip.jsx
+++ b/libraries/core-react/src/Tooltip/Tooltip.jsx
@@ -7,14 +7,10 @@ import { tooltip as tokens } from './Tooltip.tokens'
 
 const Wrapper = styled.div`
   position: relative;
-  display: flex;
+  display: inline-flex;
   justify-content: center;
 `
 
-const Anchor = styled.div`
-  margin-right: auto;
-`
-
 const StyledTooltipWrapper = styled.div`
   ${({ top, bottom, right, left, transform }) =>
     css`
@@ -25,6 +21,7 @@ const StyledTooltipWrapper = styled.div`
       transform: ${transform};
     `}
   position: absolute;
+  align-self: center;
   z-index: 500;
   white-space: nowrap;
   ::after {
@@ -95,8 +92,7 @@ export const Tooltip = forwardRef(function Tooltip(
 
   return (
     <Wrapper {...props}>
-      <Anchor
-        tabIndex={0}
+      <div
         onMouseOver={handleOpen}
         onMouseEnter={handleOpen}
         onPointerEnter={handleOpen}
@@ -107,9 +103,13 @@ export const Tooltip = forwardRef(function Tooltip(
         onFocus={handleOpen}
       >
         {children}
-      </Anchor>
+      </div>
       {openState && (
-        <StyledTooltipWrapper role="tooltip" {...wrapperProps}>
+        <StyledTooltipWrapper
+          style={{ justifySelf: 'center' }}
+          role="tooltip"
+          {...wrapperProps}
+        >
           <StyledTooltip>
             <TooltipArrow
               {...arrowProps}
diff --git a/libraries/core-react/src/Tooltip/Tooltip.test.jsx b/libraries/core-react/src/Tooltip/Tooltip.test.jsx
index 00d1b27f96..cf6ee5641f 100644
--- a/libraries/core-react/src/Tooltip/Tooltip.test.jsx
+++ b/libraries/core-react/src/Tooltip/Tooltip.test.jsx
@@ -29,7 +29,7 @@ describe('Tooltip', () => {
     const tooltipWrapper = container.firstChild
     const tooltip = screen.getByRole('tooltip')
 
-    expect(tooltipWrapper).toHaveStyleRule('display', 'flex')
+    expect(tooltipWrapper).toHaveStyleRule('display', 'inline-flex')
     expect(tooltip).toHaveStyleRule('top', `${topRight.tooltipTop}`)
     expect(tooltip).toHaveStyleRule('right', `${topRight.tooltipRight}`)
   })