From c605cbd7b92311b76f05ed1d6fab0651eeeae0cb Mon Sep 17 00:00:00 2001
From: Bree Hall <briannajdhall@gmail.com>
Date: Sat, 5 Nov 2022 20:59:45 -0400
Subject: [PATCH] Removed update to search_marker_tooltip that removed the
 euiTooltip styles and replaced then with Emotion styling. Added EuiTooltip
 Sass styles for the component to rely on to test for a styling bug that is
 causing the tooltip and the tooltip arrow to be out of sync with each other.

---
 .../components/eui/tooltip/_mixins.scss       |  36 +++++
 .../components/eui/tooltip/tooltip.scss       | 127 ++++++++++++++++++
 .../log_minimap/search_marker_tooltip.tsx     |  20 +--
 3 files changed, 170 insertions(+), 13 deletions(-)
 create mode 100644 x-pack/plugins/infra/public/components/eui/tooltip/_mixins.scss
 create mode 100644 x-pack/plugins/infra/public/components/eui/tooltip/tooltip.scss

diff --git a/x-pack/plugins/infra/public/components/eui/tooltip/_mixins.scss b/x-pack/plugins/infra/public/components/eui/tooltip/_mixins.scss
new file mode 100644
index 0000000000000..e24409193181b
--- /dev/null
+++ b/x-pack/plugins/infra/public/components/eui/tooltip/_mixins.scss
@@ -0,0 +1,36 @@
+
+$euiTooltipBackgroundColor: tintOrShade($euiColorFullShade, 25%, 100%) !default;
+$euiTooltipBorderColor: tintOrShade($euiColorFullShade, 35%, 80%) !default;
+
+$euiTooltipAnimations: (
+  top: euiToolTipTop,
+  left: euiToolTipBottom,
+  bottom: euiToolTipLeft,
+  right: euiToolTipRight,
+) !default;
+
+@mixin euiToolTipStyle($size: null) {
+    @include euiBottomShadow($color: $euiColorInk);
+    border-radius: $euiBorderRadius;
+    background-color: $euiTooltipBackgroundColor;
+    color: $euiColorGhost;
+    z-index: $euiZLevel9;
+    max-width: 256px;
+    overflow-wrap: break-word;
+    padding: $euiSizeS;
+  
+    .euiHorizontalRule {
+      background-color: $euiTooltipBorderColor;
+    }
+  }
+  
+  @mixin euiToolTipTitle {
+    font-weight: $euiFontWeightBold;
+    border-bottom: solid $euiBorderWidthThin $euiTooltipBorderColor;
+    padding-bottom: $euiSizeXS;
+    margin-bottom: $euiSizeXS;
+  }
+  
+  @mixin euiToolTipAnimation($side: 'top') {
+    animation: #{map-get($euiTooltipAnimations, $side)} $euiAnimSpeedSlow ease-out 0s forwards;
+  }
\ No newline at end of file
diff --git a/x-pack/plugins/infra/public/components/eui/tooltip/tooltip.scss b/x-pack/plugins/infra/public/components/eui/tooltip/tooltip.scss
new file mode 100644
index 0000000000000..9371e5b963490
--- /dev/null
+++ b/x-pack/plugins/infra/public/components/eui/tooltip/tooltip.scss
@@ -0,0 +1,127 @@
+
+@import './mixins.scss';
+
+/*
+ * 1. Shift arrow 1px more than half its size to account for border radius
+ */
+
+ .euiToolTip {
+    @include euiToolTipStyle;
+    @include euiToolTipAnimation('top');
+    position: absolute;
+    opacity: 0;
+  
+    // Custom sizing
+    $arrowSize: $euiSizeM;
+    $arrowPlusSize: (($arrowSize/2) + 1px) * -1; /* 1 */
+    $arrowMinusSize: (($arrowSize/2) - 1px) * -1; /* 1 */
+  
+    .euiToolTip__arrow {
+      content: '';
+      position: absolute;
+      transform-origin: center;
+      border-radius: 2px;
+      background-color: $euiTooltipBackgroundColor;
+      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;
+  
+      .euiToolTip__arrow {
+        transform: translateX($arrowMinusSize) rotateZ(45deg); /* 1 */
+      }
+    }
+  
+    &.euiToolTip--bottom {
+      animation-name: euiToolTipBottom;
+  
+      .euiToolTip__arrow {
+        transform: translateY($arrowMinusSize) rotateZ(45deg); /* 1 */
+      }
+    }
+  
+    &.euiToolTip--left {
+      animation-name: euiToolTipLeft;
+  
+      .euiToolTip__arrow {
+        transform: translateX($arrowPlusSize) rotateZ(45deg); /* 1 */
+      }
+    }
+  
+    .euiToolTip__title {
+      @include euiToolTipTitle;
+    }
+  }
+  
+  .euiToolTipAnchor {
+    display: inline-block;
+  
+    // disabled elements don't fire mouse events which means leaving a disabled element
+    // wouldn't trigger the onMouseOut and hide the tooltip; disabling pointer events
+    // on disabled elements means any mouse events remain handled by parent elements
+    // https://jakearchibald.com/2017/events-and-disabled-form-fields/
+    *[disabled] {
+      pointer-events: none;
+    }
+  
+    &.euiToolTipAnchor--displayBlock {
+      display: block;
+    }
+  }
+  
+  // Keyframes to animate in the tooltip.
+  @keyframes euiToolTipTop {
+    0% {
+      opacity: 0;
+      transform: translateY(-$euiSize);
+    }
+  
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  @keyframes euiToolTipBottom {
+    0% {
+      opacity: 0;
+      transform: translateY($euiSize);
+    }
+  
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  @keyframes euiToolTipLeft {
+    0% {
+      opacity: 0;
+      transform: translateX(-$euiSize);
+    }
+  
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  @keyframes euiToolTipRight {
+    0% {
+      opacity: 0;
+      transform: translateX($euiSize);
+    }
+  
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+
+  
diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/search_marker_tooltip.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/search_marker_tooltip.tsx
index 428690202abe3..9788993053561 100644
--- a/x-pack/plugins/infra/public/components/logging/log_minimap/search_marker_tooltip.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_minimap/search_marker_tooltip.tsx
@@ -5,9 +5,9 @@
  * 2.0.
  */
 
-import { calculatePopoverPosition, EuiPortal, withEuiTheme, WithEuiThemeProps } from '@elastic/eui';
-// @ts-expect-error style types not defined
-import { euiToolTipStyles } from '@elastic/eui/lib/components/tool_tip/tool_tip.styles';
+import '../../eui/tooltip/tooltip.scss';
+
+import { calculatePopoverPosition, EuiPortal } from '@elastic/eui';
 import * as React from 'react';
 
 import { AutoSizer } from '../../auto_sizer';
@@ -16,15 +16,11 @@ const POPOVER_ARROW_SIZE = 12; // px, to position it later
 
 interface SearchMarkerTooltipProps {
   markerPosition: ClientRect;
-  children: React.ReactNode;
 }
 
-export class _SearchMarkerTooltip extends React.PureComponent<
-  SearchMarkerTooltipProps & WithEuiThemeProps
-> {
+export class SearchMarkerTooltip extends React.PureComponent<SearchMarkerTooltipProps, {}> {
   public render() {
-    const { children, markerPosition, theme } = this.props;
-    const styles = euiToolTipStyles(theme);
+    const { children, markerPosition } = this.props;
 
     return (
       <EuiPortal>
@@ -43,7 +39,7 @@ export class _SearchMarkerTooltip extends React.PureComponent<
 
               return (
                 <div
-                  css={[styles.euiToolTip, styles.left]}
+                  className="euiToolTip euiToolTip--left euiToolTipPopover"
                   style={{
                     left,
                     top,
@@ -51,7 +47,7 @@ export class _SearchMarkerTooltip extends React.PureComponent<
                   ref={measureRef}
                 >
                   <div
-                    css={[styles.euiToolTip__arrow]} // TODO: Add styles.arrowPositions.left in next Kibana EUI upgrade
+                    className="euiToolTip__arrow"
                     style={{ left: width || 0, top: (height || 0) / 2 - POPOVER_ARROW_SIZE / 2 }}
                   />
                   <div>{children}</div>
@@ -64,5 +60,3 @@ export class _SearchMarkerTooltip extends React.PureComponent<
     );
   }
 }
-
-export const SearchMarkerTooltip = withEuiTheme<SearchMarkerTooltipProps>(_SearchMarkerTooltip);