Add support for customization with MUI theme to main views components and buttons

packages/ra-ui-materialui/src/button/BulkDeleteButton.spec.tsx

@@ -1,52 +1,14 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import expect from 'expect';
-import { deepmerge } from '@mui/utils';
-import { ThemeOptions } from '@mui/material';
-import { ListContextProvider, testDataProvider } from 'ra-core';
 
-import { AdminContext } from '../AdminContext';
-import { defaultLightTheme } from '../theme';
-import { BulkDeleteButton } from './BulkDeleteButton';
+import { Themed } from './BulkDeleteButton.stories';
 
 describe('<BulkDeleteButton />', () => {
-    const dataProvider = testDataProvider({
-        deleteMany: async () => ({ data: [{ id: 123 }] as any }),
-    });
-
-    it('should be customized by a theme', () => {
-        render(
-            <AdminContext
-                dataProvider={dataProvider}
-                theme={deepmerge(defaultLightTheme, {
-                    components: {
-                        RaBulkDeleteButton: {
-                            defaultProps: {
-                                label: 'Bulk Delete',
-                                className: 'custom-class',
-                                'data-testid': 'themed-button',
-                            },
-                        },
-                    },
-                } as ThemeOptions)}
-            >
-                <ListContextProvider
-                    value={
-                        {
-                            selectedIds: [123],
-                            onUnselectItems: () => {},
-                        } as any
-                    }
-                >
-                    <BulkDeleteButton
-                        resource="books"
-                        mutationMode="pessimistic"
-                    />
-                </ListContextProvider>
-            </AdminContext>
-        );
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
 
-        const button = screen.getByTestId('themed-button');
+        const button = await screen.findByTestId('themed');
         expect(button.textContent).toBe('Bulk Delete');
         expect(button.classList).toContain('custom-class');
     });

packages/ra-ui-materialui/src/button/BulkDeleteButton.stories.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { ThemeOptions } from '@mui/material';
+import { deepmerge } from '@mui/utils';
+import { Resource } from 'ra-core';
+import polyglotI18nProvider from 'ra-i18n-polyglot';
+import englishMessages from 'ra-language-english';
+import fakeRestDataProvider from 'ra-data-fakerest';
+
+import { AdminContext } from '../AdminContext';
+import { BulkDeleteButton } from './BulkDeleteButton';
+import { defaultLightTheme } from '../theme';
+import { Datagrid, List } from '../list';
+import { NumberField, TextField } from '../field';
+import { AdminUI } from '../AdminUI';
+
+export default { title: 'ra-ui-materialui/button/BulkDeleteButton' };
+
+const i18nProvider = polyglotI18nProvider(
+    () => englishMessages,
+    'en' // Default locale
+);
+
+const dataProvider = fakeRestDataProvider({
+    books: [
+        {
+            id: 1,
+            title: 'War and Peace',
+            author: 'Leo Tolstoy',
+            reads: 23,
+        },
+        {
+            id: 2,
+            title: 'Pride and Predjudice',
+            author: 'Jane Austen',
+            reads: 854,
+        },
+        {
+            id: 3,
+            title: 'The Picture of Dorian Gray',
+            author: 'Oscar Wilde',
+            reads: 126,
+        },
+        {
+            id: 4,
+            title: 'Le Petit Prince',
+            author: 'Antoine de Saint-Exupéry',
+            reads: 86,
+        },
+        {
+            id: 5,
+            title: "Alice's Adventures in Wonderland",
+            author: 'Lewis Carroll',
+            reads: 125,
+        },
+        {
+            id: 6,
+            title: 'Madame Bovary',
+            author: 'Gustave Flaubert',
+            reads: 452,
+        },
+        {
+            id: 7,
+            title: 'The Lord of the Rings',
+            author: 'J. R. R. Tolkien',
+            reads: 267,
+        },
+        {
+            id: 8,
+            title: "Harry Potter and the Philosopher's Stone",
+            author: 'J. K. Rowling',
+            reads: 1294,
+        },
+        {
+            id: 9,
+            title: 'The Alchemist',
+            author: 'Paulo Coelho',
+            reads: 23,
+        },
+        {
+            id: 10,
+            title: 'A Catcher in the Rye',
+            author: 'J. D. Salinger',
+            reads: 209,
+        },
+        {
+            id: 11,
+            title: 'Ulysses',
+            author: 'James Joyce',
+            reads: 12,
+        },
+    ],
+    authors: [],
+});
+
+const Wrapper = ({ children, ...props }) => {
+    return (
+        <AdminContext
+            dataProvider={dataProvider}
+            i18nProvider={i18nProvider}
+            {...props}
+        >
+            <AdminUI>
+                <Resource
+                    name="books"
+                    list={() => (
+                        <List>
+                            <Datagrid bulkActionButtons={children}>
+                                <TextField source="id" />
+                                <TextField source="title" />
+                                <TextField source="author" />
+                                <NumberField source="reads" />
+                            </Datagrid>
+                        </List>
+                    )}
+                />
+            </AdminUI>
+        </AdminContext>
+    );
+};
+
+export const Basic = () => {
+    return (
+        <Wrapper>
+            <BulkDeleteButton />
+        </Wrapper>
+    );
+};
+
+export const Themed = () => {
+    return (
+        <Wrapper
+            theme={deepmerge(defaultLightTheme, {
+                components: {
+                    RaBulkDeleteButton: {
+                        defaultProps: {
+                            label: 'Bulk Delete',
+                            mutationMode: 'optimistic',
+                            className: 'custom-class',
+                            'data-testid': 'themed',
+                        },
+                    },
+                },
+            } as ThemeOptions)}
+        >
+            <BulkDeleteButton />
+        </Wrapper>
+    );
+};

packages/ra-ui-materialui/src/button/BulkExportButton.spec.tsx

@@ -6,10 +6,10 @@ import {
     testDataProvider,
     ListContextProvider,
 } from 'ra-core';
-import { createTheme, ThemeProvider, ThemeOptions } from '@mui/material/styles';
-import { deepmerge } from '@mui/utils';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 import { BulkExportButton } from './BulkExportButton';
+import { Themed } from './BulkExportButton.stories';
 
 const theme = createTheme();
 
@@ -48,36 +48,10 @@ describe('<BulkExportButton />', () => {
         });
     });
 
-    it('should be customized by a theme', () => {
-        render(
-            <CoreAdminContext dataProvider={dataProvider}>
-                <ThemeProvider
-                    theme={deepmerge(theme, {
-                        components: {
-                            RaBulkExportButton: {
-                                defaultProps: {
-                                    label: 'Bulk Export',
-                                    className: 'custom-class',
-                                    'data-testid': 'themed-button',
-                                },
-                            },
-                        },
-                    } as ThemeOptions)}
-                >
-                    <ListContextProvider
-                        value={{ selectedIds: ['selectedId'] }}
-                    >
-                        <BulkExportButton
-                            resource="test"
-                            exporter={exporter}
-                            meta={{ pass: 'meta' }}
-                        />
-                    </ListContextProvider>
-                </ThemeProvider>
-            </CoreAdminContext>
-        );
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
 
-        const button = screen.getByTestId('themed-button');
+        const button = await screen.findByTestId('themed');
         expect(button.textContent).toBe('Bulk Export');
         expect(button.classList).toContain('custom-class');
     });