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
equinor · Aug 27, 2020 · cd922f2 · cd922f2
1 parent 40514c7
commit cd922f2
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}`)
   })