mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
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.
This commit is contained in:
Bree Hall
parent
37b1922169
commit
c605cbd7b9
3 changed files with 170 additions and 13 deletions
|
|
@ -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
x-pack/plugins/infra/public/components/eui/tooltip/tooltip.scss
Normal file
127
x-pack/plugins/infra/public/components/eui/tooltip/tooltip.scss
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue