Fix app theming (#1888)

mui · Apr 13, 2023 · 4b498b2 · 4b498b2
1 parent f712fd4
commit 4b498b2
Show file tree

Hide file tree

Showing 12 changed files with 108 additions and 108 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -7,4 +7,4 @@
 
 /examples/*/toolpad.yml
 
-/test/integration/**/toolpad.yml
+/test/integration/*/fixture*/
diff --git a/packages/toolpad-app/pages/_app.tsx b/packages/toolpad-app/pages/_app.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react';
 import Head from 'next/head';
 import App, { AppContext, AppProps, NextWebVitalsMetric } from 'next/app';
-import CssBaseline from '@mui/material/CssBaseline';
 import { CacheProvider, EmotionCache } from '@emotion/react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { LicenseInfo } from '@mui/x-data-grid-pro';
 import { useRouter } from 'next/router';
-import { ThemeProvider } from '../src/ThemeContext';
 import createEmotionCache from '../src/createEmotionCache';
 import { MUI_X_PRO_LICENSE } from '../src/constants';
 import { queryClient } from '../src/api';
@@ -56,11 +54,7 @@ export default function MyApp(props: MyAppProps) {
  <link rel="icon" type="image/png" sizes="16x16" href={favicon16.src} />
  </Head>
  <QueryClientProvider client={queryClient}>
- <ThemeProvider>
- {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
- <CssBaseline />
- <Component {...pageProps} />
- </ThemeProvider>
+ <Component {...pageProps} />
  </QueryClientProvider>
  </CacheProvider>
  );

diff --git a/packages/toolpad-app/src/ThemeContext.tsx b/packages/toolpad-app/src/ThemeContext.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react';
-import Head from 'next/head';
-import { PaletteMode } from '@mui/material';
+import { PaletteMode, ScopedCssBaseline } from '@mui/material';
 import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { getDesignTokens, getThemedComponents, getMetaThemeColor } from './theme';
+import { getDesignTokens, getThemedComponents } from './theme';
 import useLocalStorageState from './utils/useLocalStorageState';
 
 interface ThemeProviderProps {
@@ -50,15 +49,7 @@ export function ThemeProvider({ children }: ThemeProviderProps) {
 
  return (
  <MuiThemeProvider theme={theme}>
- <Head>
- {/* PWA primary color */}
- <meta
- name="theme-color"
- content={getMetaThemeColor(paletteMode)}
- media={`(prefers-color-scheme: ${paletteMode})`}
- />
- </Head>
- {children}
+ <ScopedCssBaseline enableColorScheme>{children}</ScopedCssBaseline>
  </MuiThemeProvider>
  );
 }
diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx
@@ -1260,13 +1260,13 @@ export default function ToolpadApp({
  }, [loadComponents, state]);
 
  return (
- <AppRoot ref={rootRef}>
- <NoSsr>
-  {components ? (
-  <ComponentsContextProvider value={components}>
-  <DomContextProvider value={dom}>
-  <AppThemeProvider dom={dom}>
-  <CssBaseline enableColorScheme />
+ <AppThemeProvider dom={dom}>
+ <CssBaseline enableColorScheme />
+ <AppRoot ref={rootRef}>
+ <NoSsr>
+ {components ? (
+ <ComponentsContextProvider value={components}>
+ <DomContextProvider value={dom}>
  <ErrorBoundary FallbackComponent={AppError}>
  <ResetNodeErrorsKeyProvider value={resetNodeErrorsKey}>
  <React.Suspense fallback={<AppLoading />}>
@@ -1283,14 +1283,14 @@ export default function ToolpadApp({
  </React.Suspense>
  </ResetNodeErrorsKeyProvider>
  </ErrorBoundary>
- </AppThemeProvider>
- </DomContextProvider>
- </ComponentsContextProvider>
- ) : (
- <AppLoading />
- )}
- </NoSsr>
- <EditorOverlay id={HTML_ID_EDITOR_OVERLAY} />
- </AppRoot>
+ </DomContextProvider>
+ </ComponentsContextProvider>
+ ) : (
+  <AppLoading />
+ )}
+ </NoSsr>
+  <EditorOverlay id={HTML_ID_EDITOR_OVERLAY} />
+ </AppRoot>
+ </AppThemeProvider>
  );
 }
diff --git a/packages/toolpad-app/src/toolpad/Toolpad.tsx b/packages/toolpad-app/src/toolpad/Toolpad.tsx
@@ -1,10 +1,13 @@
-import { CircularProgress, Box, styled } from '@mui/material';
+import { CircularProgress, Box, styled, CssBaseline } from '@mui/material';
 import * as React from 'react';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Head from 'next/head';
 import NoSsr from '../components/NoSsr';
 import AppEditor from './AppEditor';
 import ErrorAlert from './AppEditor/PageEditor/ErrorAlert';
+import { ThemeProvider, usePaletteMode } from '../ThemeContext';
+import { getMetaThemeColor } from '../theme';
 
 const Centered = styled('div')({
  height: '100%',
@@ -42,20 +45,33 @@ export interface ToolpadProps {
 }
 
 export default function Toolpad({ basename }: ToolpadProps) {
+ const paletteMode = usePaletteMode();
  return (
  <NoSsr>
- {/* Container that allows children to size to it with height: 100% */}
- <Box sx={{ height: '1px', minHeight: '100vh' }}>
- <ErrorBoundary fallbackRender={ErrorFallback}>
- <React.Suspense fallback={<FullPageLoader />}>
- <BrowserRouter basename={basename}>
- <Routes>
- <Route path="/*" element={<AppEditor />} />
- </Routes>
- </BrowserRouter>
- </React.Suspense>
- </ErrorBoundary>
- </Box>
+ <ThemeProvider>
+ <Head>
+ {/* PWA primary color */}
+ <meta
+ name="theme-color"
+ content={getMetaThemeColor(paletteMode)}
+ media={`(prefers-color-scheme: ${paletteMode})`}
+ />
+ </Head>
+ {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+ <CssBaseline />
+ {/* Container that allows children to size to it with height: 100% */}
+ <Box sx={{ height: '1px', minHeight: '100vh' }}>
+ <ErrorBoundary fallbackRender={ErrorFallback}>
+ <React.Suspense fallback={<FullPageLoader />}>
+ <BrowserRouter basename={basename}>
+ <Routes>
+ <Route path="/*" element={<AppEditor />} />
+ </Routes>
+ </BrowserRouter>
+ </React.Suspense>
+ </ErrorBoundary>
+ </Box>
+ </ThemeProvider>
  </NoSsr>
  );
 }
diff --git a/test/integration/theme/fixture/toolpad.yml b/test/integration/theme/fixture/toolpad.yml
diff --git a/test/integration/theme/fixture/toolpad/.gitignore b/test/integration/theme/fixture/toolpad/.gitignore
@@ -0,0 +1 @@
+.generated
diff --git a/test/integration/theme/fixture/toolpad/components/Test.tsx b/test/integration/theme/fixture/toolpad/components/Test.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+import { Typography } from "@mui/material";
+import { createComponent } from "@mui/toolpad/browser";
+
+export interface TestProps {
+ msg: string;
+}
+
+function Test({ msg }: TestProps) {
+ return <Typography>{msg}</Typography>;
+}
+
+export default createComponent(Test, {
+ argTypes: {
+ msg: {
+ typeDef: { type: "string", default: "Hello world!" },
+ },
+ },
+});
diff --git a/test/integration/theme/fixture/toolpad/pages/Page1/page.yml b/test/integration/theme/fixture/toolpad/pages/Page1/page.yml
@@ -0,0 +1,16 @@
+apiVersion: v1
+kind: page
+spec:
+ id: m31v9c7
+ title: Page 1
+ content:
+ - component: PageRow
+ name: pageRow
+ children:
+ - component: Button
+ name: button
+ - component: PageRow
+ name: pageRow1
+ children:
+ - component: codeComponent.Test
+ name: codeComponent_Test
diff --git a/test/integration/theme/index.spec.ts b/test/integration/theme/index.spec.ts
@@ -22,6 +22,8 @@ test('can change between light and dark themes', async ({ page }) => {
 
  await expect(canvasBodyLocator).toHaveCSS('background-color', 'rgb(255, 255, 255)');
 
+ await editorModel.themeEditor.getByRole('button', { name: 'Add theme' }).click();
+
  await editorModel.themeEditor.getByRole('button', { name: 'Dark' }).click();
  await expect(canvasBodyLocator).toHaveCSS('background-color', 'rgb(18, 18, 18)');
 

diff --git a/test/integration/theme/prod.spec.ts b/test/integration/theme/prod.spec.ts
@@ -0,0 +1,20 @@
+import * as path from 'path';
+import { test, expect } from '../../playwright/localTest';
+
+test.use({
+ colorScheme: 'dark',
+ localAppConfig: {
+ template: path.resolve(__dirname, './fixture'),
+ cmd: 'start',
+ },
+});
+
+test('Uses correct theme background with preferred color scheme', async ({ page }) => {
+ await page.goto('/prod/pages/m31v9c7');
+ await page.getByText('Hello world!').waitFor();
+ const body = await page.waitForSelector('body');
+ const color = await body.evaluate((el) =>
+ window.getComputedStyle(el).getPropertyValue('background-color'),
+ );
+ expect(color).toBe('rgb(255, 255, 255)');
+});
diff --git a/test/models/shared.ts b/test/models/shared.ts
@@ -10,6 +10,4 @@ export async function gotoIfNotCurrent(
  if (pathname !== expectedPath) {
  await page.goto(expectedPath, opts);
  }
-
- await page.waitForURL((url) => url.pathname === expectedPath);
 }