Dashboards: PanelChrome - remove untitled placeholder and add border when panel is transparent (#73150)

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

@@ -48,7 +48,6 @@ export function HoverWidget({ menu, title, dragClass, children, offset = -32, on
           <Icon name="expand-arrows" className={styles.draggableIcon} />
         </div>
       )}
-      {!title && <h6 className={cx(styles.untitled, { [styles.draggable]: !!dragClass }, dragClass)}>Untitled</h6>}
       {children}
       {menu && (
         <PanelMenu
@@ -103,12 +102,6 @@ function getStyles(theme: GrafanaTheme2) {
         background: theme.colors.secondary.main,
       },
     }),
-    untitled: css({
-      color: theme.colors.text.disabled,
-      fontStyle: 'italic',
-      padding: theme.spacing(0, 1),
-      marginBottom: 0,
-    }),
     draggableIcon: css({
       transform: 'rotate(45deg)',
       color: theme.colors.text.secondary,

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

@@ -122,6 +122,7 @@ export function PanelChrome({
 
   // hover menu is only shown on hover when not on touch devices
   const showOnHoverClass = 'show-on-hover';
+  const isPanelTransparent = displayMode === 'transparent';
 
   const headerHeight = getHeaderHeight(theme, hasHeader);
   const { contentStyle, innerWidth, innerHeight } = getContentStyle(
@@ -139,11 +140,6 @@ export function PanelChrome({
   };
 
   const containerStyles: CSSProperties = { width, height: isOpen ? height : headerHeight };
-  if (displayMode === 'transparent') {
-    containerStyles.backgroundColor = 'transparent';
-    containerStyles.border = 'none';
-  }
-
   const [ref, { width: loadingBarWidth }] = useMeasure<HTMLDivElement>();
 
   /** Old property name now maps to actions */
@@ -214,8 +210,13 @@ export function PanelChrome({
 
   return (
     // tabIndex={0} is needed for keyboard accessibility in the plot area
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    <div
-    <div className={styles.container} style={containerStyles} data-testid={testid} tabIndex={0} ref={ref}>
+      className={cx(styles.container, { [styles.transparentContainer]: isPanelTransparent })}
+      style={containerStyles}
+      data-testid={testid}
+      tabIndex={0} //eslint-disable-line jsx-a11y/no-noninteractive-tabindex
+      ref={ref}
+    >
       <div className={styles.loadingBarContainer}>
         {loadingState === LoadingState.Loading ? (
           <LoadingBar width={loadingBarWidth} ariaLabel="Panel loading bar" />
@@ -361,6 +362,15 @@ const getStyles = (theme: GrafanaTheme2) => {
         },
       },
     }),
+    transparentContainer: css({
+      label: 'panel-transparent-container',
+      backgroundColor: 'transparent',
+      border: '1px solid transparent',
+      boxSizing: 'border-box',
+      '&:hover': {
+        border: `1px solid ${borderColor}`,
+      },
+    }),
     loadingBarContainer: css({
       label: 'panel-loading-bar-container',
       position: 'absolute',