Remove useless instance of ToggleThemeButton

Author: fzaninotto

packages/ra-ui-materialui/src/layout/Menu.stories.tsx

@@ -2,33 +2,14 @@ import * as React from 'react';
 
 import { Resource, testDataProvider } from 'ra-core';
 import { defaultTheme, Admin } from 'react-admin';
-import { AppBar, Typography, Box } from '@mui/material';
-import { createTheme } from '@mui/material/styles';
-import { ToggleThemeButton } from '../button';
-import { Layout, Menu, SidebarToggleButton, Title } from '.';
+import { Typography, ThemeOptions } from '@mui/material';
+import { Layout, Menu, Title } from '.';
 
 export default { title: 'ra-ui-materialui/layout/Menu' };
 
 const resources = ['Posts', 'Comments', 'Tags', 'Users', 'Orders', 'Reviews'];
 
-const DemoAppBar = () => {
-    const darkTheme = createTheme({
-        palette: { mode: 'dark' },
-    });
-    return (
-        <AppBar elevation={1} sx={{ flexDirection: 'row', flexWrap: 'nowrap' }}>
-            <Box sx={{ flex: '1 1 100%' }}>
-                <SidebarToggleButton />
-            </Box>
-            <Box sx={{ flex: '0 0 auto' }}>
-                <ToggleThemeButton
-                    lightTheme={defaultTheme}
-                    darkTheme={darkTheme}
-                />
-            </Box>
-        </AppBar>
-    );
-};
+const darkTheme: ThemeOptions = { ...defaultTheme, palette: { mode: 'dark' } };
 
 const DemoList = ({ name }) => (
     <>
@@ -38,47 +19,43 @@ const DemoList = ({ name }) => (
 );
 
 export const Default = () => {
-    const DefaultLayout = props => (
-        <Layout {...props} menu={MenuDefault} appBar={DemoAppBar} />
-    );
-    const MenuDefault = () => {
-        return <Menu hasDashboard={true} dense={false} />;
-    };
+    const MenuDefault = () => <Menu hasDashboard={true} dense={false} />;
+    const DefaultLayout = props => <Layout {...props} menu={MenuDefault} />;
 
     return (
-        <Admin dataProvider={testDataProvider()} layout={DefaultLayout}>
-            {resources.map((resource, index) => {
-                return (
-                    <Resource
-                        name={resource}
-                        key={`resource_${index}`}
-                        list={<DemoList name={resource} />}
-                    />
-                );
-            })}
+        <Admin
+            dataProvider={testDataProvider()}
+            layout={DefaultLayout}
+            darkTheme={darkTheme}
+        >
+            {resources.map((resource, index) => (
+                <Resource
+                    name={resource}
+                    key={`resource_${index}`}
+                    list={<DemoList name={resource} />}
+                />
+            ))}
         </Admin>
     );
 };
 
 export const Dense = () => {
-    const LayoutDense = props => (
-        <Layout {...props} menu={MenuDense} appBar={DemoAppBar} />
-    );
-    const MenuDense = props => {
-        return <Menu {...props} hasDashboard={true} dense={true} />;
-    };
+    const MenuDense = props => <Menu hasDashboard={true} dense={true} />;
+    const LayoutDense = props => <Layout {...props} menu={MenuDense} />;
 
     return (
-        <Admin dataProvider={testDataProvider()} layout={LayoutDense}>
-            {resources.map((resource, index) => {
-                return (
-                    <Resource
-                        name={resource}
-                        key={`resource_${index}`}
-                        list={<DemoList name={resource} />}
-                    />
-                );
-            })}
+        <Admin
+            dataProvider={testDataProvider()}
+            layout={LayoutDense}
+            darkTheme={darkTheme}
+        >
+            {resources.map((resource, index) => (
+                <Resource
+                    name={resource}
+                    key={`resource_${index}`}
+                    list={<DemoList name={resource} />}
+                />
+            ))}
         </Admin>
     );
 };

packages/ra-ui-materialui/src/list/filter/SavedQueriesList.stories.tsx

@@ -3,15 +3,11 @@ import merge from 'lodash/merge';
 
 import {
     Admin,
-    AppBar,
     defaultTheme,
-    Layout,
-    LayoutProps,
     Resource,
     Datagrid,
     List,
     TextField,
-    TitlePortal,
     NumberField,
     DateField,
     FilterList,
@@ -26,7 +22,6 @@ import frenchMessages from 'ra-language-french';
 import { createMemoryHistory } from 'history';
 
 import { SavedQueriesList } from './SavedQueriesList';
-import { LocalesMenuButton, ToggleThemeButton } from '../../button';
 import { RaThemeOptions } from '../..';
 import fakeRestProvider from 'ra-data-fakerest';
 
@@ -185,8 +180,13 @@ const i18nProvider = polyglotI18nProvider(
         locale === 'fr'
             ? merge(frenchMessages, frenchAppMessages)
             : englishMessages,
-    'en' // Default locale
+    'en', // Default locale
+    [
+        { locale: 'en', name: 'English' },
+        { locale: 'fr', name: 'Français' },
+    ]
 );
+
 const darkTheme: RaThemeOptions = {
     ...defaultTheme,
     palette: {
@@ -200,29 +200,12 @@ const darkTheme: RaThemeOptions = {
     },
 };
 
-const MyAppBar = () => (
-    <AppBar>
-        <TitlePortal />
-        <ToggleThemeButton lightTheme={defaultTheme} darkTheme={darkTheme} />
-        <LocalesMenuButton
-            languages={[
-                { locale: 'en', name: 'English' },
-                { locale: 'fr', name: 'Français' },
-            ]}
-        />
-    </AppBar>
-);
-
-const MyLayout = (props: LayoutProps) => (
-    <Layout {...props} appBar={MyAppBar} />
-);
-
 export const WithThemeAndLocale = () => (
     <Admin
         history={createMemoryHistory()}
         i18nProvider={i18nProvider}
         dataProvider={dataProvider}
-        layout={MyLayout}
+        darkTheme={darkTheme}
     >
         <Resource name="songs" list={SongList} />
     </Admin>