root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 249 Packages Projects Releases Wiki Activity

VizTooltips: Add wrapper shadow (#80164)

This commit is contained in:
Adela Almasan 2024-01-08 13:36:48 -06:00 committed by GitHub
parent 49af992661
commit 26f54a2fc7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
View File

@ -1,4 +1,4 @@
import { css } from '@emotion/css'; import { css, cx } from '@emotion/css';
import React, { useLayoutEffect, useRef, useReducer, CSSProperties } from 'react'; import React, { useLayoutEffect, useRef, useReducer, CSSProperties } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import uPlot from 'uplot'; import uPlot from 'uplot';
@ -425,7 +425,7 @@ export const TooltipPlugin2 = ({ config, hoverMode, render, clientZoom = false,
if (plot && isHovering) { if (plot && isHovering) {
return createPortal( return createPortal(
<div className={styles.tooltipWrapper} style={style} ref={domRef}> <div className={cx(styles.tooltipWrapper, isPinned && styles.pinned)} style={style} ref={domRef}>
{isPinned && <CloseButton onClick={dismiss} />} {isPinned && <CloseButton onClick={dismiss} />}
{contents} {contents}
</div>, </div>,
@ -446,7 +446,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
position: 'absolute', position: 'absolute',
background: theme.colors.background.primary, background: theme.colors.background.primary,
border: `1px solid ${theme.colors.border.weak}`, border: `1px solid ${theme.colors.border.weak}`,
boxShadow: `0 4px 8px ${theme.colors.background.primary}`, boxShadow: theme.shadows.z2,
userSelect: 'text', userSelect: 'text',
}), }),
pinned: css({
boxShadow: theme.shadows.z3,
}),
}); });