From 8effa165dd86be581d1ad4f68485d091f3610a13 Mon Sep 17 00:00:00 2001 From: Ihor Yeromin Date: Fri, 27 Oct 2023 17:22:48 +0300 Subject: [PATCH] Tooltip: New styles (#76964) --- .betterer.results | 3 -- .../src/components/VizTooltip/HeaderLabel.tsx | 53 +++++++++++++++++-- .../VizTooltip/VizTooltipContent.tsx | 2 +- .../VizTooltip/VizTooltipFooter.tsx | 7 +-- .../VizTooltip/VizTooltipHeader.tsx | 2 +- .../components/uPlot/plugins/CloseButton.tsx | 14 ++--- .../uPlot/plugins/TooltipPlugin2.tsx | 4 +- 7 files changed, 61 insertions(+), 24 deletions(-) diff --git a/.betterer.results b/.betterer.results index 196906a6074..658ec507d17 100644 --- a/.betterer.results +++ b/.betterer.results @@ -1025,9 +1025,6 @@ exports[`better eslint`] = { [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "1"] ], - "packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/uPlot/types.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], diff --git a/packages/grafana-ui/src/components/VizTooltip/HeaderLabel.tsx b/packages/grafana-ui/src/components/VizTooltip/HeaderLabel.tsx index 9303073f222..a7341409a15 100644 --- a/packages/grafana-ui/src/components/VizTooltip/HeaderLabel.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/HeaderLabel.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/css'; +import { css, cx } from '@emotion/css'; import React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; @@ -7,6 +7,7 @@ import { HorizontalGroup, Tooltip } from '..'; import { useStyles2 } from '../../themes'; import { LabelValue } from './types'; +import { getColorIndicatorClass } from './utils'; interface Props { headerLabel: LabelValue; @@ -15,12 +16,20 @@ interface Props { export const HeaderLabel = ({ headerLabel }: Props) => { const styles = useStyles2(getStyles); + const { label, value, color, colorIndicator } = headerLabel; + return (
- {headerLabel.label} - - {headerLabel.value} + {label} + {color && ( + + )} + + {value}
@@ -28,18 +37,35 @@ export const HeaderLabel = ({ headerLabel }: Props) => { }; const getStyles = (theme: GrafanaTheme2) => ({ + hgContainer: css({ + flexGrow: 1, + }), + colorIndicator: css({ + marginRight: theme.spacing(0.5), + }), label: css({ color: theme.colors.text.secondary, paddingRight: theme.spacing(0.5), fontWeight: 400, }), value: css({ + width: '12px', + height: '12px', + borderRadius: theme.shape.radius.default, + }), + series: css({ + width: '14px', + height: '4px', + borderRadius: theme.shape.radius.pill, + }), + labelValue: css({ fontWeight: 500, lineHeight: '18px', alignSelf: 'center', }), wrapper: css({ display: 'flex', + alignItems: 'center', flexDirection: 'row', textOverflow: 'ellipsis', overflow: 'hidden', @@ -47,4 +73,23 @@ const getStyles = (theme: GrafanaTheme2) => ({ width: '250px', maskImage: 'linear-gradient(90deg, rgba(0, 0, 0, 1) 80%, transparent)', }), + hexagon: css({}), + pie_1_4: css({}), + pie_2_4: css({}), + pie_3_4: css({}), + marker_sm: css({ + width: '4px', + height: '4px', + borderRadius: theme.shape.radius.circle, + }), + marker_md: css({ + width: '8px', + height: '8px', + borderRadius: theme.shape.radius.circle, + }), + marker_lg: css({ + width: '12px', + height: '12px', + borderRadius: theme.shape.radius.circle, + }), }); diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx index 6cedcfa9744..5df6a2f58da 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx @@ -39,7 +39,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ flex: 1, gap: 4, borderTop: `1px solid ${theme.colors.border.medium}`, - padding: `${theme.spacing(1)} 0`, + padding: theme.spacing(1), }), customContentPadding: css({ padding: `${theme.spacing(1)} 0`, diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipFooter.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipFooter.tsx index 490d62bf582..9bbbf862b50 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipFooter.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipFooter.tsx @@ -49,17 +49,18 @@ const getStyles = (theme: GrafanaTheme2) => ({ display: 'flex', flexDirection: 'column', flex: 1, + padding: theme.spacing(0), }), dataLinks: css({ - height: 40, overflowX: 'auto', overflowY: 'hidden', whiteSpace: 'nowrap', - borderTop: `1px solid ${theme.colors.border.medium}`, maskImage: 'linear-gradient(90deg, rgba(0, 0, 0, 1) 80%, transparent)', + borderTop: `1px solid ${theme.colors.border.medium}`, + padding: theme.spacing(1), }), addAnnotations: css({ borderTop: `1px solid ${theme.colors.border.medium}`, - paddingTop: theme.spacing(1), + padding: theme.spacing(1), }), }); diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipHeader.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipHeader.tsx index fe7233f551d..0cfb21a8981 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipHeader.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipHeader.tsx @@ -37,6 +37,6 @@ const getStyles = (theme: GrafanaTheme2) => ({ display: 'flex', flexDirection: 'column', flex: 1, - paddingBottom: theme.spacing(1), + padding: theme.spacing(1), }), }); diff --git a/packages/grafana-ui/src/components/uPlot/plugins/CloseButton.tsx b/packages/grafana-ui/src/components/uPlot/plugins/CloseButton.tsx index e1ddfa2dd89..6fab4b71c21 100644 --- a/packages/grafana-ui/src/components/uPlot/plugins/CloseButton.tsx +++ b/packages/grafana-ui/src/components/uPlot/plugins/CloseButton.tsx @@ -16,20 +16,14 @@ type Props = { export const CloseButton = ({ onClick, 'aria-label': ariaLabel, style }: Props) => { const styles = useStyles2(getStyles); return ( - + ); }; const getStyles = (theme: GrafanaTheme2) => css({ position: 'absolute', - right: theme.spacing(0.5), - top: theme.spacing(1), + margin: '0px', + right: theme.spacing(1), + top: theme.spacing(1.25), }); diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx index 9699817e6c1..51b3a1cda48 100644 --- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx +++ b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx @@ -128,6 +128,7 @@ export const TooltipPlugin2 = ({ config, render }: TooltipPlugin2Props) => { // in some ways this is similar to ClickOutsideWrapper.tsx const downEventOutside = (e: Event) => { + // eslint-disable-next-line @typescript-eslint/consistent-type-assertions let isOutside = (e.target as HTMLDivElement).closest(`.${styles.tooltipWrapper}`) !== domRef.current; if (isOutside) { @@ -284,7 +285,7 @@ export const TooltipPlugin2 = ({ config, render }: TooltipPlugin2Props) => { if (plot && isHovering) { return createPortal(
- {isPinned && } + {isPinned && } {contents}
, plot.over @@ -299,7 +300,6 @@ const getStyles = (theme: GrafanaTheme2) => ({ top: 0, left: 0, zIndex: theme.zIndex.tooltip, - padding: '8px', whiteSpace: 'pre', borderRadius: theme.shape.radius.default, position: 'absolute',