StateTimeline: Fix color display in tooltip (#112878)

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

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

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,