Skip to content
This repository has been archived by the owner on Mar 31, 2024. It is now read-only.

Commit

Permalink
Removed update to search_marker_tooltip that removed the euiTooltip s…
Browse files Browse the repository at this point in the history
…tyles 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.
  • Loading branch information
breehall committed Nov 6, 2022
1 parent 37b1922 commit c605cbd
Show file tree
Hide file tree
Showing 3 changed files with 170 additions and 13 deletions.
36 changes: 36 additions & 0 deletions x-pack/plugins/infra/public/components/eui/tooltip/_mixins.scss
Original file line number Diff line number Diff line change
@@ -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;
}
127 changes: 127 additions & 0 deletions x-pack/plugins/infra/public/components/eui/tooltip/tooltip.scss
Original file line number Diff line number Diff line change
@@ -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);
}
}



Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
Expand All @@ -43,15 +39,15 @@ export class _SearchMarkerTooltip extends React.PureComponent<

return (
<div
css={[styles.euiToolTip, styles.left]}
className="euiToolTip euiToolTip--left euiToolTipPopover"
style={{
left,
top,
}}
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>
Expand All @@ -64,5 +60,3 @@ export class _SearchMarkerTooltip extends React.PureComponent<
);
}
}

export const SearchMarkerTooltip = withEuiTheme<SearchMarkerTooltipProps>(_SearchMarkerTooltip);

0 comments on commit c605cbd

Please sign in to comment.