New popover positioning service + updated EuiToolTip (#924)

* Initial popover service logic, mostly tested

* tested and corrected the popup placement algorithm

* Fix cross-axis positioning, update EuiToolTip to use new positioning service

* tweaks for & after browser testing

* jsdoc tweak/fix

* changelog

* Find best fit for popover content instead of forcing 100% fit

* Dynamically positioned arrows

* added comments to code

* Reducing size of tooltip arrow

* Group related variables in getPopoverScreenCoordinates into discrete steps:
1) Find original cross-axis position.
2) Apply shift to cross-axis position, if necessary.
3) Find primary axis position.

* Fix positionSubstitues typo.

* Split getPopoverScreenCoordinates into getCrossAxisPosition and getPrimaryAxisPosition helper functions.

* Define iterationPositions first, and then traverse them.

* Format comments and parameters to wrap.

* Remove unnecessary minimumSpace parameter.

* Update popover tests in response to PR feedback

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.54`.
+- Added `getPopoverScreenCoordinates` service function for positioining popover/tooltip content, updated `EuiToolTip` to use it ([#924](https://github.com/elastic/eui/pull/924))
 
 ## [`0.0.54`](https://github.com/elastic/eui/tree/v0.0.54)
 

src-docs/webpack.config.js

@@ -58,7 +58,7 @@ module.exports = {
 
   devServer: {
     contentBase: 'src-docs/build',
-    host: 'localhost',
+    host: '0.0.0.0',
     port: 8030,
     disableHostCheck: true
   }

src/components/tool_tip/_tool_tip.scss

@@ -1,3 +1,7 @@
+/*
+ * 1. Shift arrow 1px more than half it's size to account for border radius
+ */
+
 .euiToolTip {
   @include euiBottomShadow;
   @include euiFontSizeS();
@@ -12,46 +16,45 @@
   animation: euiToolTipTop $euiAnimSpeedSlow ease-out $euiAnimSpeedNormal forwards;
   z-index: $euiZLevel9;
 
-  &::before {
+  // Custom sizing
+  $arrowSize: $euiSizeM;
+  $arrowPlusSize: (($arrowSize/2) + 1px) * -1; /* 1 */
+  $arrowMinusSize: (($arrowSize/2) - 1px) * -1; /* 1 */
+
+  .euiToolTip__arrow {
     content: "";
     position: absolute;
-    bottom: -$euiSize/2;
-    left: 50%;
-    transform: translateX(-50%) rotateZ(45deg);
     transform-origin: center;
+    border-radius: 2px;
     background-color: tintOrShade($euiColorFullShade, 25%, 90%);
-    width: $euiSize;
-    height: $euiSize;
+    width: $arrowSize;
+    height: $arrowSize;
+
+    transform: translateY($arrowPlusSize) rotateZ(45deg); /* 1 */
   }
 
   // Positions the arrow and animates in from the same side.
   &.euiToolTip--right {
     animation-name: euiToolTipRight;
 
-    &:before {
-      bottom: 50%;
-      left: -$euiSize/2;
-      transform: translateY(50%) rotateZ(45deg);
+    .euiToolTip__arrow {
+      transform: translateX($arrowMinusSize) rotateZ(45deg); /* 1 */
     }
   }
 
   &.euiToolTip--bottom {
     animation-name: euiToolTipBottom;
 
-    &:before {
-      bottom: auto;
-      top: -$euiSize/2;
+    .euiToolTip__arrow {
+      transform: translateY($arrowMinusSize) rotateZ(45deg); /* 1 */
     }
   }
 
   &.euiToolTip--left {
     animation-name: euiToolTipLeft;
 
-    &:before {
-      bottom: 50%;
-      left: auto;
-      right: -$euiSize/2;
-      transform: translateY(50%) rotateZ(45deg);
+    .euiToolTip__arrow {
+      transform: translateX($arrowPlusSize) rotateZ(45deg); /* 1 */
     }
   }
 

src/components/tool_tip/tool_tip.js

@@ -8,7 +8,7 @@ import classNames from 'classnames';
 
 import { EuiPortal } from '../portal';
 import { EuiToolTipPopover } from './tool_tip_popover';
-import { calculatePopoverPosition } from '../../services';
+import { findPopoverPosition } from '../../services';
 
 import makeId from '../form/form_row/make_id';
 
@@ -30,29 +30,43 @@ export class EuiToolTip extends Component {
       hasFocus: false,
       calculatedPosition: this.props.position,
       toolTipStyles: {},
+      arrowStyles: {},
       id: this.props.id || makeId(),
     };
   }
 
+  setPopoverRef = ref => {
+    this.popover = ref;
+  }
+
   showToolTip = () => {
     this.setState({ visible: true });
   };
 
-  positionToolTip = (toolTipBounds) => {
-    const anchorBounds = this.anchor.getBoundingClientRect();
+  positionToolTip = () => {
     const requestedPosition = this.props.position;
 
-    const { position, left, top } = calculatePopoverPosition(anchorBounds, toolTipBounds, requestedPosition);
+    const { position, left, top, arrow } = findPopoverPosition({
+      anchor: this.anchor,
+      popover: this.popover,
+      position: requestedPosition,
+      offset: 16, // offset popover 16px from the anchor
+      arrowConfig: {
+        arrowWidth: 14,
+        arrowBuffer: 4
+      }
+    });
 
     const toolTipStyles = {
-      top: top + window.scrollY,
+      top,
       left,
     };
 
     this.setState({
       visible: true,
       calculatedPosition: position,
       toolTipStyles,
+      arrowStyles: arrow,
     });
   };
 
@@ -94,6 +108,8 @@ export class EuiToolTip extends Component {
       ...rest
     } = this.props;
 
+    const { arrowStyles, id, toolTipStyles, visible } = this.state;
+
     const classes = classNames(
       'euiToolTip',
       positionsToClassNameMap[this.state.calculatedPosition],
@@ -106,18 +122,20 @@ export class EuiToolTip extends Component {
     );
 
     let tooltip;
-    if (this.state.visible) {
+    if (visible) {
       tooltip = (
         <EuiPortal>
           <EuiToolTipPopover
             className={classes}
-            style={this.state.toolTipStyles}
+            style={toolTipStyles}
             positionToolTip={this.positionToolTip}
+            popoverRef={this.setPopoverRef}
             title={title}
-            id={this.state.id}
+            id={id}
             role="tooltip"
             {...rest}
           >
+            <div style={arrowStyles} className="euiToolTip__arrow"/>
             {content}
           </EuiToolTipPopover>
         </EuiPortal>

src/components/tool_tip/tool_tip_popover.js

@@ -10,6 +10,7 @@ export class EuiToolTipPopover extends Component {
     className: PropTypes.string,
     title: PropTypes.node,
     positionToolTip: PropTypes.func.isRequired,
+    popoverRef: PropTypes.func,
   }
 
   updateDimensions = () => {
@@ -21,6 +22,13 @@ export class EuiToolTipPopover extends Component {
     });
   };
 
+  setPopoverRef = ref => {
+    this.popover = ref;
+    if (this.props.popoverRef) {
+      this.props.popoverRef(ref);
+    }
+  }
+
   componentDidMount() {
     document.body.classList.add('euiBody-hasPortalContent');
 
@@ -39,6 +47,7 @@ export class EuiToolTipPopover extends Component {
       title,
       className,
       positionToolTip, // eslint-disable-line no-unused-vars
+      popoverRef, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
 
@@ -57,7 +66,7 @@ export class EuiToolTipPopover extends Component {
     return (
       <div
         className={classes}
-        ref={popover => this.popover = popover}
+        ref={this.setPopoverRef}
         {...rest}
       >
         {optionalTitle}

src/services/index.js

@@ -60,4 +60,5 @@ export {
 
 export {
   calculatePopoverPosition,
+  findPopoverPosition,
 } from './popover';

src/services/popover/index.d.ts

@@ -1,3 +1,5 @@
+import { EuiPopoverPosition } from "@elastic/eui";
+
 declare module '@elastic/eui' {
   type EuiToolTipPosition = 'top' | 'right' | 'bottom' | 'left';
 
@@ -26,4 +28,27 @@ declare module '@elastic/eui' {
     height: number;
     position: EuiToolTipPosition;
   };
+
+  type EuiPopoverPosition =
+    'topLeft' | 'topCenter' | 'topRight' |
+    'rightTop' | 'rightCenter' | 'rightBottom' |
+    'bottomLeft' | 'bottomCenter' | 'bottomRight' |
+    'leftTop' | 'leftCenter' | 'leftBottom';
+
+  type FindPopoverPositionArgs = {
+    anchor: HTMLElement | JSX.Element,
+    popover: HTMLElement | JSX.Element,
+    position: string,
+    buffer?: number,
+    offset?: number,
+    container?: HTMLElement
+  }
+  export const findPopoverPosition: (
+    args: FindPopoverPositionArgs
+  ) => {
+    position: EuiToolTipPosition,
+    relativePosition: EuiPopoverPosition,
+    top: number,
+    left: number
+  };
 }

src/services/popover/index.js

@@ -1 +1,2 @@
 export { calculatePopoverPosition } from './calculate_popover_position';
+export { findPopoverPosition } from './popover_positioning';