PanelChrome: Hover header fixes (#113908)

* PanelChrome: Hover header fixes

* More fixes

* fixes

* Fix test

* restore hoverHeaderOffset feature

* Fixes

packages/grafana-ui/src/components/PanelChrome/HoverWidget.tsx

@@ -37,7 +37,11 @@ export function HoverWidget({ menu, title, dragClass, children, offset = -32, on
   }
 
   return (
-    <div className={cx(styles.container, 'show-on-hover')} style={{ top: offset }} data-testid={selectors.container}>
+    <div
+      className={cx(styles.container, 'show-on-hover')}
+      style={{ top: offset === 0 ? -1 : offset }}
+      data-testid={selectors.container}
+    >
       {dragClass && (
         <div
           className={cx(styles.square, styles.draggable, dragClass)}
@@ -73,15 +77,18 @@ function getStyles(theme: GrafanaTheme2) {
       display: 'flex',
       position: 'absolute',
       zIndex: 1,
-      right: 0,
+      right: -1,
+      top: -1,
       boxSizing: 'content-box',
       alignItems: 'center',
       background: theme.colors.background.secondary,
       color: theme.colors.text.primary,
       border: `1px solid ${theme.colors.border.weak}`,
-      borderRadius: theme.shape.radius.default,
+      borderBottomLeftRadius: theme.shape.radius.default,
       height: theme.spacing(4),
       boxShadow: theme.shadows.z1,
+      gap: theme.spacing(1),
+      padding: theme.spacing(0, 1),
     }),
     square: css({
       display: 'flex',
@@ -101,9 +108,6 @@ function getStyles(theme: GrafanaTheme2) {
       // Background and border are overriden when topnav toggle is disabled
       background: 'inherit',
       border: 'none',
-      '&:hover': {
-        background: theme.colors.secondary.main,
-      },
     }),
     draggableIcon: css({
       transform: 'rotate(45deg)',

packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx

@@ -293,10 +293,13 @@ export function PanelChrome({
         </div>
       )}
 
-      <div className={cx(styles.titleItems, dragClassCancel)} data-testid="title-items-container">
-        <PanelDescription description={description} className={dragClassCancel} />
-        {titleItems}
-      </div>
+      {(titleItems || description) && (
+        <div className={cx(styles.titleItems, dragClassCancel)} data-testid="title-items-container">
+          <PanelDescription description={description} className={dragClassCancel} />
+          {titleItems}
+        </div>
+      )}
+
       {loadingState === LoadingState.Streaming && (
         <Tooltip
           content={
@@ -323,12 +326,15 @@ export function PanelChrome({
           </Tooltip>
         </DelayRender>
       )}
-      <div className={styles.rightAligned}>
-        {actions && <div className={styles.rightActions}>{itemsRenderer(actions, (item) => item)}</div>}
-      </div>
+      {!hoverHeader && <div className={styles.flexGrow} />}
+      {actions && itemsRenderer(actions, (item) => item)}
     </>
   );
 
+  // Ignores streaming and loading (cancel query) states for simplicity
+  // If you need to cancel streaming / loading panels set a title
+  const hasHeaderContent = title || description || titleItems || menu || dragClass || actions;
+
   return (
     // tabIndex={0} is needed for keyboard accessibility in the plot area
     <section
@@ -358,15 +364,17 @@ export function PanelChrome({
 
       {hoverHeader && (
         <>
-          <HoverWidget
-            menu={menu}
-            title={typeof title === 'string' ? title : undefined}
-            offset={hoverHeaderOffset}
-            dragClass={dragClass}
-            onOpenMenu={onOpenMenu}
-          >
-            {headerContent}
-          </HoverWidget>
+          {hasHeaderContent && (
+            <HoverWidget
+              menu={menu}
+              title={typeof title === 'string' ? title : undefined}
+              dragClass={dragClass}
+              offset={hoverHeaderOffset}
+              onOpenMenu={onOpenMenu}
+            >
+              {headerContent}
+            </HoverWidget>
+          )}
 
           {statusMessage && (
             <div className={styles.errorContainerFloating}>
@@ -607,16 +615,6 @@ const getStyles = (theme: GrafanaTheme2) => {
       top: 0,
       zIndex: 1,
     }),
-    rightActions: css({
-      display: 'flex',
-      gap: theme.spacing(1),
-    }),
-    rightAligned: css({
-      label: 'right-aligned-container',
-      marginLeft: 'auto',
-      display: 'flex',
-      alignItems: 'center',
-    }),
     titleItems: css({
       display: 'flex',
       height: '100%',
@@ -631,5 +629,8 @@ const getStyles = (theme: GrafanaTheme2) => {
       padding: 0,
       maxWidth: '100%',
     }),
+    flexGrow: css({
+      flexGrow: 1,
+    }),
   };
 };

packages/grafana-ui/src/components/PanelChrome/TitleItem.tsx

@@ -81,7 +81,7 @@ const getStyles = (theme: GrafanaTheme2) => {
 
     '&:hover ': {
       boxShadow: `${theme.shadows.z1}`,
-      background: `${theme.colors.background.secondary}`,
+      background: theme.colors.secondary.shade,
       color: `${theme.colors.text.primary}`,
     },
   });