Page: Background prop to support canvas background for standard layout pages (#111174)

* Page canvas

* Working

* remove isOnCanvas prop on card, leave for different PR

* Update

* remove leftover

* Remvoe Card changes

* Fix

* Update

packages/grafana-runtime/src/components/PluginPage.tsx

@@ -19,8 +19,11 @@ export interface PluginPageProps {
   pageNav?: NavModelItem;
   children: React.ReactNode;
   layout?: PageLayoutType;
+  /** Background color of the page */
+  background?: PluginPageBackground;
 }
 
+export type PluginPageBackground = 'primary' | 'canvas';
 export type PluginPageType = React.ComponentType<PluginPageProps>;
 
 export let PluginPage: PluginPageType = ({ children }) => {

packages/grafana-runtime/src/index.ts

@@ -37,7 +37,7 @@ export {
   getRunRequest,
 } from './services/QueryRunner';
 export { PluginPage } from './components/PluginPage';
-export type { PluginPageType, PluginPageProps } from './components/PluginPage';
+export type { PluginPageType, PluginPageProps, PluginPageBackground } from './components/PluginPage';
 export {
   DataSourcePicker,
   type DataSourcePickerProps,

public/app/core/components/Page/Page.tsx

@@ -27,6 +27,7 @@ export const Page: PageType = ({
   info,
   layout = PageLayoutType.Standard,
   onSetScrollRef,
+  background,
   ...otherProps
 }) => {
   const styles = useStyles2(getStyles);
@@ -49,8 +50,10 @@ export const Page: PageType = ({
     }
   }, [navModel, pageNav, chrome, layout]);
 
+  const isPrimaryBg = (background ?? getDefaultBackgroundForLayout(layout)) === 'primary';
+
   return (
-    <div className={cx(styles.wrapper, className)} {...otherProps}>
+    <div className={cx(styles.wrapper, isPrimaryBg && styles.wrapperPrimary, className)} {...otherProps}>
       {layout === PageLayoutType.Standard && (
         <NativeScrollbar
           // This id is used by the image renderer to scroll through the dashboard
@@ -101,18 +104,18 @@ const getStyles = (theme: GrafanaTheme2) => {
       position: 'relative',
       container: 'page / inline-size',
     }),
+    wrapperPrimary: css({
+      label: 'page-wrapper-primary',
+      background: theme.colors.background.primary,
+    }),
     pageContent: css({
       label: 'page-content',
       flexGrow: 1,
     }),
-    primaryBg: css({
-      background: theme.colors.background.primary,
-    }),
     pageInner: css({
       label: 'page-inner',
       padding: theme.spacing(2),
       borderBottom: 'none',
-      background: theme.colors.background.primary,
       display: 'flex',
       flexDirection: 'column',
       flexGrow: 1,
@@ -132,3 +135,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
   };
 };
+
+function getDefaultBackgroundForLayout(layout: PageLayoutType) {
+  return layout === PageLayoutType.Standard ? 'primary' : 'canvas';
+}

public/app/core/components/Page/PluginPage.tsx

@@ -5,7 +5,16 @@ import { PluginPageContext } from 'app/features/plugins/components/PluginPageCon
 
 import { Page } from './Page';
 
-export function PluginPage({ actions, children, info, pageNav, layout, renderTitle, subTitle }: PluginPageProps) {
+export function PluginPage({
+  actions,
+  children,
+  info,
+  pageNav,
+  layout,
+  renderTitle,
+  subTitle,
+  background,
+}: PluginPageProps) {
   const context = useContext(PluginPageContext);
 
   return (
@@ -17,6 +26,7 @@ export function PluginPage({ actions, children, info, pageNav, layout, renderTit
       renderTitle={renderTitle}
       info={info}
       subTitle={subTitle}
+      background={background}
     >
       <Page.Contents>{children}</Page.Contents>
     </Page>

public/app/core/components/Page/types.ts

@@ -2,6 +2,7 @@ import { FC, HTMLAttributes } from 'react';
 import * as React from 'react';
 
 import { NavModel, NavModelItem, PageLayoutType } from '@grafana/data';
+import { PluginPageBackground } from '@grafana/runtime';
 
 import { ScrollRefElement } from '../NativeScrollbar';
 
@@ -12,6 +13,8 @@ export interface PageProps extends HTMLAttributes<HTMLDivElement> {
   navId?: string;
   navModel?: NavModel;
   pageNav?: NavModelItem;
+  /** Determines the background color of the page. Defaults to primary. */
+  background?: PluginPageBackground;
   /** Can be used to place info inline with the heading */
   info?: PageInfoItem[];
   /** Can be used to place actions inline with the heading */