VizTooltip: Improved sizing (#93762)

Co-authored-by: Staton Hysell <staton.hysell@grafana.com>

packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx

@@ -59,7 +59,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     display: 'flex',
     flexDirection: 'column',
     flex: 1,
-    gap: 4,
+    gap: 2,
     borderTop: `1px solid ${theme.colors.border.medium}`,
     padding: theme.spacing(1),
   }),

packages/grafana-ui/src/components/VizTooltip/VizTooltipHeader.tsx

@@ -36,5 +36,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
     flexDirection: 'column',
     flex: 1,
     padding: theme.spacing(1),
+    lineHeight: 1,
   }),
 });

packages/grafana-ui/src/components/VizTooltip/VizTooltipWrapper.tsx

@@ -0,0 +1,24 @@
+import { css, cx } from '@emotion/css';
+import React, { HTMLAttributes } from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { useStyles2 } from '../../themes';
+
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export const VizTooltipWrapper = ({ children, className }: Props) => {
+  const styles = useStyles2(getStyles);
+
+  return <div className={cx(styles.wrapper, className)}>{children}</div>;
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  wrapper: css({
+    display: 'flex',
+    flexDirection: 'column',
+    fontSize: theme.typography.bodySmall.fontSize,
+  }),
+});

packages/grafana-ui/src/components/uPlot/plugins/CloseButton.tsx

@@ -24,6 +24,6 @@ const getStyles = (theme: GrafanaTheme2) =>
   css({
     position: 'absolute',
     margin: '0px',
-    right: theme.spacing(1),
-    top: theme.spacing(1.25),
+    right: 5,
+    top: 6,
   });

public/app/plugins/panel/canvas/components/CanvasTooltip.tsx

@@ -175,6 +175,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     boxShadow: theme.shadows.z2,
     userSelect: 'text',
     padding: 0,
+    fontSize: theme.typography.bodySmall.fontSize,
   }),
   pinned: css({
     boxShadow: theme.shadows.z3,

public/app/plugins/panel/heatmap/HeatmapTooltip.tsx

@@ -12,7 +12,7 @@ import {
   PanelData,
 } from '@grafana/data';
 import { HeatmapCellLayout } from '@grafana/schema';
-import { TooltipDisplayMode, useStyles2, useTheme2 } from '@grafana/ui';
+import { TooltipDisplayMode, useTheme2 } from '@grafana/ui';
 import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
 import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
 import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
@@ -22,8 +22,8 @@ import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import { isHeatmapCellsDense, readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap';
 import { DataHoverView } from 'app/features/visualization/data-hover/DataHoverView';
 
+import { VizTooltipWrapper } from '../../../../../packages/grafana-ui/src/components/VizTooltip/VizTooltipWrapper';
 import { getDataLinks } from '../status-history/utils';
-import { getStyles } from '../timeseries/TimeSeriesTooltip';
 import { isTooltipScrollable } from '../timeseries/utils';
 
 import { HeatmapData } from './fields';
@@ -360,10 +360,8 @@ const HeatmapHoverCell = ({
     }
   }
 
-  const styles = useStyles2(getStyles);
-
   return (
-    <div className={styles.wrapper}>
+    <VizTooltipWrapper>
       <VizTooltipHeader item={headerItem} isPinned={isPinned} />
       <VizTooltipContent
         items={contentItems}
@@ -378,6 +376,6 @@ const HeatmapHoverCell = ({
         ))}
       </VizTooltipContent>
       {footer}
-    </div>
+    </VizTooltipWrapper>
   );
 };

public/app/plugins/panel/histogram/HistogramTooltip.tsx

@@ -1,15 +1,14 @@
-import { css } from '@emotion/css';
 import { ReactNode, useMemo } from 'react';
 
 import { DataFrame, formattedValueToString } from '@grafana/data';
 import { SortOrder, TooltipDisplayMode } from '@grafana/schema/dist/esm/common/common.gen';
-import { useStyles2 } from '@grafana/ui';
 import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
 import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
 import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
 import { VizTooltipItem } from '@grafana/ui/src/components/VizTooltip/types';
 import { getContentItems } from '@grafana/ui/src/components/VizTooltip/utils';
 
+import { VizTooltipWrapper } from '../../../../../packages/grafana-ui/src/components/VizTooltip/VizTooltipWrapper';
 import { getDataLinks } from '../status-history/utils';
 import { isTooltipScrollable } from '../timeseries/utils';
 
@@ -39,8 +38,6 @@ export const HistogramTooltip = ({
   isPinned,
   maxHeight,
 }: HistogramTooltipProps) => {
-  const styles = useStyles2(getStyles);
-
   const xMinField = series.fields[0];
   const xMaxField = series.fields[1];
 
@@ -74,7 +71,7 @@ export const HistogramTooltip = ({
   }
 
   return (
-    <div className={styles.wrapper}>
+    <VizTooltipWrapper>
       {headerItem != null && <VizTooltipHeader item={headerItem} isPinned={isPinned} />}
       <VizTooltipContent
         items={contentItems}
@@ -83,13 +80,6 @@ export const HistogramTooltip = ({
         maxHeight={maxHeight}
       />
       {footer}
-    </div>
+    </VizTooltipWrapper>
   );
 };
-
-export const getStyles = () => ({
-  wrapper: css({
-    display: 'flex',
-    flexDirection: 'column',
-  }),
-});

public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 import { FieldType, TimeRange } from '@grafana/data';
 import { SortOrder } from '@grafana/schema/dist/esm/common/common.gen';
-import { TooltipDisplayMode, useStyles2 } from '@grafana/ui';
+import { TooltipDisplayMode } from '@grafana/ui';
 import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
 import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
 import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
@@ -10,8 +10,9 @@ import { VizTooltipItem } from '@grafana/ui/src/components/VizTooltip/types';
 import { getContentItems } from '@grafana/ui/src/components/VizTooltip/utils';
 import { findNextStateIndex, fmtDuration } from 'app/core/components/TimelineChart/utils';
 
+import { VizTooltipWrapper } from '../../../../../packages/grafana-ui/src/components/VizTooltip/VizTooltipWrapper';
 import { getDataLinks } from '../status-history/utils';
-import { TimeSeriesTooltipProps, getStyles } from '../timeseries/TimeSeriesTooltip';
+import { TimeSeriesTooltipProps } from '../timeseries/TimeSeriesTooltip';
 import { isTooltipScrollable } from '../timeseries/utils';
 
 interface StateTimelineTooltip2Props extends TimeSeriesTooltipProps {
@@ -31,8 +32,6 @@ export const StateTimelineTooltip2 = ({
   withDuration,
   maxHeight,
 }: StateTimelineTooltip2Props) => {
-  const styles = useStyles2(getStyles);
-
   const xField = series.fields[0];
 
   const dataIdx = seriesIdx != null ? dataIdxs[seriesIdx] : dataIdxs.find((idx) => idx != null);
@@ -81,7 +80,7 @@ export const StateTimelineTooltip2 = ({
   };
 
   return (
-    <div className={styles.wrapper}>
+    <VizTooltipWrapper>
       <VizTooltipHeader item={headerItem} isPinned={isPinned} />
       <VizTooltipContent
         items={contentItems}
@@ -90,6 +89,6 @@ export const StateTimelineTooltip2 = ({
         maxHeight={maxHeight}
       />
       {footer}
-    </div>
+    </VizTooltipWrapper>
   );
 };

public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx

@@ -3,13 +3,13 @@ import { ReactNode } from 'react';
 
 import { DataFrame, Field, FieldType, formattedValueToString } from '@grafana/data';
 import { SortOrder, TooltipDisplayMode } from '@grafana/schema/dist/esm/common/common.gen';
-import { useStyles2 } from '@grafana/ui';
 import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
 import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
 import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
 import { VizTooltipItem } from '@grafana/ui/src/components/VizTooltip/types';
 import { getContentItems } from '@grafana/ui/src/components/VizTooltip/utils';
 
+import { VizTooltipWrapper } from '../../../../../packages/grafana-ui/src/components/VizTooltip/VizTooltipWrapper';
 import { getDataLinks } from '../status-history/utils';
 import { fmt } from '../xychart/utils';
 
@@ -49,8 +49,6 @@ export const TimeSeriesTooltip = ({
   annotate,
   maxHeight,
 }: TimeSeriesTooltipProps) => {
-  const styles = useStyles2(getStyles);
-
   const xField = series.fields[0];
   const xVal = formattedValueToString(xField.display!(xField.values[dataIdxs[0]!]));
 
@@ -91,7 +89,7 @@ export const TimeSeriesTooltip = ({
       };
 
   return (
-    <div className={styles.wrapper}>
+    <VizTooltipWrapper>
       {headerItem != null && <VizTooltipHeader item={headerItem} isPinned={isPinned} />}
       <VizTooltipContent
         items={contentItems}
@@ -100,7 +98,7 @@ export const TimeSeriesTooltip = ({
         maxHeight={maxHeight}
       />
       {footer}
-    </div>
+    </VizTooltipWrapper>
   );
 };
 

public/app/plugins/panel/xychart/XYChartTooltip.tsx

@@ -2,14 +2,13 @@ import { ReactNode } from 'react';
 
 import { DataFrame, Field, getFieldDisplayName } from '@grafana/data';
 import { alpha } from '@grafana/data/src/themes/colorManipulator';
-import { useStyles2 } from '@grafana/ui';
 import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
 import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
 import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
 import { ColorIndicator, VizTooltipItem } from '@grafana/ui/src/components/VizTooltip/types';
 
+import { VizTooltipWrapper } from '../../../../../packages/grafana-ui/src/components/VizTooltip/VizTooltipWrapper';
 import { getDataLinks } from '../status-history/utils';
-import { getStyles } from '../timeseries/TimeSeriesTooltip';
 
 import { Options } from './panelcfg.gen';
 import { ScatterSeries } from './types';
@@ -26,8 +25,6 @@ export interface Props {
 }
 
 export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, allSeries, dismiss, options, isPinned }: Props) => {
-  const styles = useStyles2(getStyles);
-
   const rowIndex = dataIdxs.find((idx) => idx !== null);
   // @todo: remove -1 when uPlot v2 arrive
   // context: first value in dataIdxs always null and represent X series
@@ -92,10 +89,10 @@ export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, allSeries, dismiss,
   }
 
   return (
-    <div className={styles.wrapper}>
+    <VizTooltipWrapper>
       <VizTooltipHeader item={headerItem} isPinned={isPinned} />
       <VizTooltipContent items={contentItems} isPinned={isPinned} />
       {footer}
-    </div>
+    </VizTooltipWrapper>
   );
 };

public/app/plugins/panel/xychart/v2/XYChartTooltip.tsx

@@ -2,14 +2,13 @@ import { ReactNode } from 'react';
 
 import { DataFrame } from '@grafana/data';
 import { alpha } from '@grafana/data/src/themes/colorManipulator';
-import { useStyles2 } from '@grafana/ui';
 import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
 import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
 import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
 import { ColorIndicator, VizTooltipItem } from '@grafana/ui/src/components/VizTooltip/types';
 
+import { VizTooltipWrapper } from '../../../../../../packages/grafana-ui/src/components/VizTooltip/VizTooltipWrapper';
 import { getDataLinks } from '../../status-history/utils';
-import { getStyles } from '../../timeseries/TimeSeriesTooltip';
 
 import { XYSeries } from './types2';
 import { fmt } from './utils';
@@ -32,8 +31,6 @@ function stripSeriesName(fieldName: string, seriesName: string) {
 }
 
 export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, xySeries, dismiss, isPinned }: Props) => {
-  const styles = useStyles2(getStyles);
-
   const rowIndex = dataIdxs.find((idx) => idx !== null)!;
 
   const series = xySeries[seriesIdx! - 1];
@@ -102,10 +99,10 @@ export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, xySeries, dismiss, i
   }
 
   return (
-    <div className={styles.wrapper}>
+    <VizTooltipWrapper>
       <VizTooltipHeader item={headerItem} isPinned={isPinned} />
       <VizTooltipContent items={contentItems} isPinned={isPinned} />
       {footer}
-    </div>
+    </VizTooltipWrapper>
   );
 };