From 027eeb99e1e95ebc1593831689198e8487db19d0 Mon Sep 17 00:00:00 2001
From: Paul Marbach <paul.marbach@grafana.com>
Date: Fri, 24 Oct 2025 08:40:56 -0400
Subject: [PATCH] StateTimeline: Fix color display in tooltip (#112878)

---
 .../src/components/VizLegend/SeriesIcon.tsx   |  9 ++++--
 .../VizTooltip/VizTooltipColorIndicator.tsx   | 28 ++++++++-----------
 .../components/VizTooltip/VizTooltipRow.tsx   |  7 ++---
 3 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx b/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx
index b6c3dfae3e3..8fb63f23eac 100644
--- a/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx
@@ -11,10 +11,11 @@ export interface Props extends React.HTMLAttributes<HTMLDivElement> {
   color?: string;
   gradient?: string;
   lineStyle?: LineStyle;
+  noMargin?: boolean;
 }
 
 export const SeriesIcon = React.memo(
-  React.forwardRef<HTMLDivElement, Props>(({ color, className, gradient, lineStyle, ...restProps }, ref) => {
+  React.forwardRef<HTMLDivElement, Props>(({ color, className, gradient, lineStyle, noMargin, ...restProps }, ref) => {
     const theme = useTheme2();
     const styles = useStyles2(getStyles);
 
@@ -59,7 +60,7 @@ export const SeriesIcon = React.memo(
       <div
         data-testid="series-icon"
         ref={ref}
-        className={cx(className, styles.forcedColors, styles.container)}
+        className={cx(className, styles.forcedColors, styles.container, noMargin ? null : styles.margin)}
         style={customStyle}
         {...restProps}
       />
@@ -68,8 +69,10 @@ export const SeriesIcon = React.memo(
 );
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  container: css({
+  margin: css({
     marginRight: '8px',
+  }),
+  container: css({
     display: 'inline-block',
     width: '14px',
     height: '4px',
diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipColorIndicator.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipColorIndicator.tsx
index 789b50cba2a..2aac9839a2e 100644
--- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipColorIndicator.tsx
+++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipColorIndicator.tsx
@@ -33,31 +33,23 @@ export const VizTooltipColorIndicator = ({
 }: Props) => {
   const styles = useStyles2(getStyles);
 
-  if (isHollow) {
+  if (colorIndicator === ColorIndicator.series && !isHollow) {
     return (
-      <div
-        style={{ border: `1px solid ${color}` }}
+      <SeriesIcon
+        color={color}
+        lineStyle={lineStyle}
+        noMargin
         className={cx(
           position === ColorIndicatorPosition.Leading ? styles.leading : styles.trailing,
-          getColorIndicatorClass(colorIndicator, styles)
+          styles.seriesIndicator
         )}
       />
     );
   }
 
-  if (colorIndicator === ColorIndicator.series) {
-    return (
-      <SeriesIcon
-        color={color}
-        lineStyle={lineStyle}
-        className={position === ColorIndicatorPosition.Leading ? styles.leading : styles.trailing}
-      />
-    );
-  }
-
   return (
-    <span
-      style={{ backgroundColor: color }}
+    <div
+      style={isHollow ? { border: `1px solid ${color}` } : { backgroundColor: color }}
       className={cx(
         position === ColorIndicatorPosition.Leading ? styles.leading : styles.trailing,
         getColorIndicatorClass(colorIndicator, styles)
@@ -74,6 +66,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
   trailing: css({
     marginLeft: theme.spacing(0.5),
   }),
+  seriesIndicator: css({
+    position: 'relative',
+    top: -2, // half the height of the color indicator, since the top is aligned with flex center.
+  }),
   series: css({
     width: '14px',
     height: '4px',
diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
index 157264c4df6..22426f6fbf0 100644
--- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
+++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
@@ -225,7 +225,7 @@ const getStyles = (theme: GrafanaTheme2, justify = 'start', marginRight?: string
     maxWidth: '100%',
     alignItems: 'start',
     justifyContent: justify,
-    columnGap: '6px',
+    columnGap: theme.spacing(0.75),
   }),
   label: css({ display: 'inline' }),
   value: css({
@@ -235,10 +235,7 @@ const getStyles = (theme: GrafanaTheme2, justify = 'start', marginRight?: string
   }),
   colorWrapper: css({
     alignSelf: 'center',
-    position: 'relative',
     flexShrink: 0,
-    top: -2, // half the height of the color indicator, since the top is aligned with flex center.
-    marginRight: '-6px', // account for the built-in column-gap in relation to the color indicator's margin
   }),
   labelWrapper: css({
     flexGrow: 1,
@@ -248,6 +245,8 @@ const getStyles = (theme: GrafanaTheme2, justify = 'start', marginRight?: string
     fontWeight: 400,
   }),
   valueWrapper: css({
+    display: 'flex',
+    alignItems: 'center',
     flexShrink: 0,
     alignSelf: 'center',
     marginRight,