PanelChrome: Adds display mode to support transparent option (#62647)

* PanelChrome: Add transparent displayMode

* Remove comment

* Fixes to storybook and new example

* no background on TitleItem

---------

Co-authored-by: polinaboneva <polina.boneva@grafana.com>

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

@@ -9,7 +9,7 @@ import { PanelChrome, PanelChromeProps } from '@grafana/ui';
 
 import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';
+import { HorizontalGroup } from '../Layout/Layout';
 import { Menu } from '../Menu/Menu';
 
 const meta: ComponentMeta<typeof PanelChrome> = {
@@ -91,8 +91,8 @@ export const Examples = () => {
 
   return (
     <DashboardStoryCanvas>
-      <HorizontalGroup spacing="md" align="flex-start">
-        <VerticalGroup spacing="md">
+      <div>
+        <HorizontalGroup spacing="md" align="flex-start" wrap>
           {renderPanel('Has statusMessage', {
             title: 'Default title',
             statusMessage: 'Error text',
@@ -116,8 +116,7 @@ export const Examples = () => {
             title: 'Default title',
             loadingState: LoadingState.Loading,
           })}
-        </VerticalGroup>
-        <VerticalGroup spacing="md">
+
           {renderPanel('Default panel: no non-required props')}
           {renderPanel('No padding', {
             padding: 'none',
@@ -131,8 +130,7 @@ export const Examples = () => {
           {renderPanel('No title, loading loadingState', {
             loadingState: LoadingState.Loading,
           })}
-        </VerticalGroup>
-        <VerticalGroup spacing="md">
+
           {renderPanel('Error status, menu', {
             title: 'Default title',
             menu,
@@ -155,16 +153,11 @@ export const Examples = () => {
             menu,
             loadingState: LoadingState.Streaming,
           })}
-
           {renderPanel('loadingState is Loading, menu', {
             title: 'Default title',
             menu,
             loadingState: LoadingState.Loading,
           })}
-        </VerticalGroup>
-      </HorizontalGroup>
-      <HorizontalGroup spacing="md" align="flex-start">
-        <VerticalGroup spacing="md">
           {renderPanel('Deprecated error indicator', {
             title: 'Default title',
             leftItems: [
@@ -186,8 +179,6 @@ export const Examples = () => {
               />,
             ],
           })}
-        </VerticalGroup>
-        <VerticalGroup spacing="md">
           {renderPanel('Deprecated error indicator, menu', {
             title: 'Default title',
             menu,
@@ -199,8 +190,14 @@ export const Examples = () => {
               />,
             ],
           })}
-        </VerticalGroup>
-      </HorizontalGroup>
+          {renderPanel('Display mode = transparent', {
+            title: 'Default title',
+            displayMode: 'transparent',
+            menu,
+            leftItems: [],
+          })}
+        </HorizontalGroup>
+      </div>
     </DashboardStoryCanvas>
   );
 };

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

@@ -51,6 +51,7 @@ export interface PanelChromeProps {
    * of showing/interacting with the panel's state
    */
   leftItems?: ReactNode[];
+  displayMode?: 'default' | 'transparent';
 }
 
 /**
@@ -68,6 +69,7 @@ export function PanelChrome({
   padding = 'md',
   title = '',
   description = '',
+  displayMode = 'default',
   titleItems = [],
   menu,
   dragClass,
@@ -105,6 +107,11 @@ export function PanelChrome({
   const containerStyles: CSSProperties = { width, height };
   const ariaLabel = title ? selectors.components.Panels.Panel.containerByTitle(title) : 'Panel';
 
+  if (displayMode === 'transparent') {
+    containerStyles.backgroundColor = 'transparent';
+    containerStyles.border = 'none';
+  }
+
   return (
     <div className={styles.container} style={containerStyles} aria-label={ariaLabel}>
       <div className={styles.loadingBarContainer}>
@@ -151,7 +158,7 @@ export function PanelChrome({
             </Dropdown>
           )}
 
-          {leftItems && <div className={styles.items}>{itemsRenderer(leftItems, (item) => item)}</div>}
+          {leftItems && <div className={styles.leftItems}>{itemsRenderer(leftItems, (item) => item)}</div>}
         </div>
 
         {statusMessage && (
@@ -207,7 +214,7 @@ const getContentStyle = (
 };
 
 const getStyles = (theme: GrafanaTheme2) => {
-  const { background, borderColor } = theme.components.panel;
+  const { background, borderColor, padding } = theme.components.panel;
 
   return {
     container: css({
@@ -248,7 +255,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       label: 'panel-header',
       display: 'flex',
       alignItems: 'center',
-      padding: theme.spacing(0, 0, 0, 1),
+      padding: theme.spacing(0, 0, 0, padding),
     }),
     streaming: css({
       label: 'panel-streaming',
@@ -288,6 +295,10 @@ const getStyles = (theme: GrafanaTheme2) => {
       left: '50%',
       transform: 'translateX(-50%)',
     }),
+    leftItems: css({
+      display: 'flex',
+      paddingRight: theme.spacing(padding),
+    }),
     rightAligned: css({
       label: 'right-aligned-container',
       marginLeft: 'auto',

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

@@ -50,7 +50,6 @@ const getStyles = (theme: GrafanaTheme2) => {
     item: css({
       color: `${theme.colors.text.secondary}`,
       label: 'panel-header-item',
-      backgroundColor: `${theme.colors.background.primary}`,
       cursor: 'auto',
       border: 'none',
       borderRadius: `${theme.shape.borderRadius()}`,

public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx

@@ -679,6 +679,7 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
           dragClass={dragClass}
           dragClassCancel="grid-drag-cancel"
           padding={padding}
+          displayMode={transparent ? 'transparent' : 'default'}
         >
           {(innerWidth, innerHeight) => (
             <>