Tooltip: New styles (#76964)

.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"]
     ],

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 (
     <HorizontalGroup justify-content="space-between" spacing="lg" wrap>
       <div className={styles.wrapper}>
-        <span className={styles.label}>{headerLabel.label}</span>
-        <Tooltip content={headerLabel.value ? headerLabel.value.toString() : ''}>
-          <span className={styles.value}>{headerLabel.value}</span>
+        <span className={styles.label}>{label}</span>
+        {color && (
+          <span
+            style={{ backgroundColor: color }}
+            className={cx(styles.colorIndicator, getColorIndicatorClass(colorIndicator!, styles))}
+          />
+        )}
+        <Tooltip content={value ? value.toString() : ''}>
+          <span className={styles.labelValue}>{value}</span>
         </Tooltip>
       </div>
     </HorizontalGroup>
@@ -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,
+  }),
 });

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`,

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),
   }),
 });

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),
   }),
 });

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 (
-    <IconButton
-      aria-label={ariaLabel ?? 'Close'}
-      className={styles}
-      name="times"
-      onClick={onClick}
-      style={style}
-      tooltip="Close"
-    />
+    <IconButton aria-label={ariaLabel ?? 'Close'} className={styles} name="times" onClick={onClick} style={style} />
   );
 };
 
 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),
   });

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(
       <div className={styles.tooltipWrapper} style={style} ref={domRef}>
-        {isPinned && <CloseButton onClick={dismiss} style={{ top: '16px' }} />}
+        {isPinned && <CloseButton onClick={dismiss} />}
         {contents}
       </div>,
       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',