From b03ba63b215dddf2f5b899931b70999bb475ba04 Mon Sep 17 00:00:00 2001 From: adrien guernier Date: Tue, 28 Nov 2023 18:11:54 +0100 Subject: [PATCH 01/22] doc: introduce documentation (wip) --- docs/Admin.md | 34 +++++++++++++++++++++++++++++++--- docs/AppTheme.md | 23 ++++++++++++++++------- docs/ToggleThemeButton.md | 25 ++++++++++++++++++++----- 3 files changed, 67 insertions(+), 15 deletions(-) diff --git a/docs/Admin.md b/docs/Admin.md index d77fa00494b..4e0858541d9 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -145,11 +145,12 @@ Here are all the props accepted by the component: | `basename` | Optional | `string` | - | The base path for all URLs | | `catchAll` | Optional | `Component` | `NotFound` | The fallback component for unknown routes | | `dashboard` | Optional | `Component` | - | The content of the dashboard page | -| `darkTheme` | Optional | `object` | - | The dark theme configuration | +| `darkTheme` | Optional | `object` | `defaultDarkTheme` (the default built-in dark theme) | The dark theme configuration | | `defaultTheme` | Optional | `boolean` | `false` | Flag to default to the light theme | | `disableTelemetry` | Optional | `boolean` | `false` | Set to `true` to disable telemetry collection | | `i18nProvider` | Optional | `I18NProvider` | - | The internationalization provider for translations | | `layout` | Optional | `Component` | `Layout` | The content of the layout | +| `lightTheme` | Optional | `object` | `defaultLightTheme` (the default built-in light theme) | The light theme configuration | | `loginPage` | Optional | `Component` | `LoginPage` | The content of the login page | | `notification` | Optional | `Component` | `Notification` | The notification component | | `queryClient` | Optional | `QueryClient` | - | The react-query client | @@ -433,7 +434,7 @@ const App = () => ( ## `darkTheme` -If you want to support both light and dark mode, you can provide a `darkTheme` in addition to the `theme` prop. The app will use the `darkTheme` by default for users who prefer the dark mode at the OS level, and users will be able to switch from light to dark mode using a new app bar button leveraging [the `` component](./ToggleThemeButton.md). +React-admin provides a [built-in dark theme by default](./AppTheme.md#default). The app will use the `darkTheme` by default for users who prefer the dark mode at the OS level, and users will be able to switch from light to dark mode using an app bar button leveraging [the `` component](./ToggleThemeButton.md). If you want to override it, you can provide your custom `darkTheme` in addition to the `theme` prop. +React-admin provides a [built-in dark theme by default](#default), the default application theme depends on the user's system settings. If the user has chosen a dark mode in their OS, react-admin will use the dark theme. Otherwise, it will use the light theme. -React-admin's `` component accepts a `darkTheme` prop in addition to the `theme` prop. +In addition, users can switch from one theme to the other using [the `` component](./ToggleThemeButton.md), which appears in the AppBar as soon as you define a `darkTheme` prop. -```jsx -import { Admin, defaultTheme } from 'react-admin'; +You can override the dark theme by setting the ``'s `darkTheme` prop with your own theme: -const lightTheme = defaultTheme; -const darkTheme = { ...defaultTheme, palette: { mode: 'dark' } }; +```tsx +import { Admin, defaultDarkTheme, defaultLightTheme } from 'react-admin'; + +const lightTheme = defaultLightTheme; +const darkTheme = { ...defaultDarkTheme, palette: { mode: 'dark' } }; const App = () => ( ( ); ``` -With this setup, the default application theme depends on the user's system settings. If the user has chosen a dark mode in their OS, react-admin will use the dark theme. Otherwise, it will use the light theme. +**Tip**: If you don't need the default dark theme, you can set the ``'s `darkTheme` prop to `null`: -In addition, users can switch from one theme to the other using [the `` component](./ToggleThemeButton.md), which appears in the AppBar as soon as you define a `darkTheme` prop. +```tsx +const App = () => ( + + // ... + +); +``` ## Built-In Themes diff --git a/docs/ToggleThemeButton.md b/docs/ToggleThemeButton.md index 48128034f1d..70ea5a4757d 100644 --- a/docs/ToggleThemeButton.md +++ b/docs/ToggleThemeButton.md @@ -13,7 +13,7 @@ The `` component lets users switch from light to dark mode, a Your browser does not support the video tag. -It is enabled by default in the `` as soon as you define a dark theme via [the `` prop](./Admin.md#darktheme). +It is enabled by default in the `` as soon React-admin provides a [built-in dark theme by default](./AppTheme.md#default). ## Usage @@ -52,10 +52,23 @@ const App = () => ( ## Removing The Button From The AppBar -The `` appears by default in the `` if the `` prop is defined. If you want to remove it, you need to set a custom [`` prop](./AppBar.md#toolbar): +The `` appears by default in the ``. If you want to remove it, you have two solutions: -```jsx -// in src/MyAppBar.js +- you can set the `` `darkTheme` prop to `null`: + +```tsx +// in src/App.tsx +const App = () => ( + + // ... + +); +``` + +- or you can set a custom [`` prop](./AppBar.md#toolbar): + +```tsx +// in src/MyAppBar.tsx import { AppBar, LocalesMenuButton, RefreshIconButton } from 'react-admin'; export const MyAppBar = () => ( @@ -71,7 +84,9 @@ export const MyAppBar = () => ( ## Creating A Dark Theme -For this button to work, you must provide a dark theme to the `` component. The `darkTheme` should be a JSON object that follows the [Material UI theme specification](https://material-ui.com/customization/theming/). +For this button to work, you must provide a dark theme to the `` component. React-admin provides a [built-in dark theme by default](./AppTheme.md#default), but you can override it according to your needs. + +The `darkTheme` should be a JSON object that follows the [Material UI theme specification](https://material-ui.com/customization/theming/). You can create such a theme from scratch: From 360bba89d626be39fff726f59b80e62e7d8f2f1a Mon Sep 17 00:00:00 2001 From: adrien guernier Date: Tue, 28 Nov 2023 18:11:16 +0100 Subject: [PATCH 02/22] add the default darktheme in --- .../ra-ui-materialui/src/AdminContext.tsx | 10 +- .../src/theme/defaultTheme.stories.tsx | 3 - .../src/theme/themePriority.stories.tsx | 162 ++++++++++++++++++ 3 files changed, 170 insertions(+), 5 deletions(-) create mode 100644 packages/ra-ui-materialui/src/theme/themePriority.stories.tsx diff --git a/packages/ra-ui-materialui/src/AdminContext.tsx b/packages/ra-ui-materialui/src/AdminContext.tsx index ac9ae91764a..b498a9293fc 100644 --- a/packages/ra-ui-materialui/src/AdminContext.tsx +++ b/packages/ra-ui-materialui/src/AdminContext.tsx @@ -6,6 +6,7 @@ import { ThemesContext, RaThemeOptions, defaultLightTheme, + defaultDarkTheme, } from './theme'; export const AdminContext = (props: AdminContextProps) => { @@ -22,7 +23,12 @@ export const AdminContext = (props: AdminContextProps) => { @@ -80,7 +86,7 @@ export interface AdminContextProps extends CoreAdminContextProps { * * ); */ - darkTheme?: RaThemeOptions; + darkTheme?: RaThemeOptions | null; /** * The default theme to use when the user hasn't chosen a theme yet. diff --git a/packages/ra-ui-materialui/src/theme/defaultTheme.stories.tsx b/packages/ra-ui-materialui/src/theme/defaultTheme.stories.tsx index e0ceefc9338..db5f90b98c9 100644 --- a/packages/ra-ui-materialui/src/theme/defaultTheme.stories.tsx +++ b/packages/ra-ui-materialui/src/theme/defaultTheme.stories.tsx @@ -8,7 +8,6 @@ import { AdminContext } from '../AdminContext'; import { AdminUI } from '../AdminUI'; import { ListGuesser } from '../list'; import { EditGuesser } from '../detail'; -import { defaultLightTheme, defaultDarkTheme } from './defaultTheme'; import { testData } from './testData'; export default { @@ -18,8 +17,6 @@ export default { export const Default = () => ( englishTranslations, 'en')} > diff --git a/packages/ra-ui-materialui/src/theme/themePriority.stories.tsx b/packages/ra-ui-materialui/src/theme/themePriority.stories.tsx new file mode 100644 index 00000000000..b1f7e2e623e --- /dev/null +++ b/packages/ra-ui-materialui/src/theme/themePriority.stories.tsx @@ -0,0 +1,162 @@ +import * as React from 'react'; +import { Resource } from 'ra-core'; +import fakerestDataProvider from 'ra-data-fakerest'; +import englishTranslations from 'ra-language-english'; +import polyglotI18nProvider from 'ra-i18n-polyglot'; + +import { AdminContext } from '../AdminContext'; +import { AdminUI } from '../AdminUI'; +import { ListGuesser } from '../list'; +import { EditGuesser } from '../detail'; +import { testData } from './testData'; +import { nanoDarkTheme, nanoLightTheme } from './nanoTheme'; +import { radiantDarkTheme } from './radiantTheme'; + +export default { + title: 'ra-ui-materialui/theme/Priority', +}; + +export const DefaultLightAndDarkTheme = () => ( + englishTranslations, 'en')} + > + + + + + + +); + +export const DisableDarkTheme = () => ( + englishTranslations, 'en')} + darkTheme={null} + > + + + + + + +); + +export const CustomMasterThemeAndNoDarkTheme = () => ( + englishTranslations, 'en')} + theme={nanoLightTheme} + > + + + + + + +); + +export const CustomMasterThemeAndCustomDarkTheme = () => ( + englishTranslations, 'en')} + theme={nanoLightTheme} + darkTheme={radiantDarkTheme} + > + + + + + + +); + +export const DefaultLighThemeAndCustomDarkTheme = () => ( + englishTranslations, 'en')} + darkTheme={nanoDarkTheme} + > + + + + + + +); From a62a03f674f605b95be1d83c281c2408cd269cc7 Mon Sep 17 00:00:00 2001 From: adrien guernier Date: Wed, 29 Nov 2023 11:09:40 +0100 Subject: [PATCH 03/22] add a story to demonstrate a custome light and dark theme --- .../src/theme/themePriority.stories.tsx | 32 ++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/packages/ra-ui-materialui/src/theme/themePriority.stories.tsx b/packages/ra-ui-materialui/src/theme/themePriority.stories.tsx index b1f7e2e623e..e09074fe78e 100644 --- a/packages/ra-ui-materialui/src/theme/themePriority.stories.tsx +++ b/packages/ra-ui-materialui/src/theme/themePriority.stories.tsx @@ -10,7 +10,7 @@ import { ListGuesser } from '../list'; import { EditGuesser } from '../detail'; import { testData } from './testData'; import { nanoDarkTheme, nanoLightTheme } from './nanoTheme'; -import { radiantDarkTheme } from './radiantTheme'; +import { radiantDarkTheme, radiantLightTheme } from './radiantTheme'; export default { title: 'ra-ui-materialui/theme/Priority', @@ -160,3 +160,33 @@ export const DefaultLighThemeAndCustomDarkTheme = () => ( ); + +export const CustomLighThemeAndCustomDarkTheme = () => ( + englishTranslations, 'en')} + lightTheme={radiantLightTheme} + darkTheme={nanoDarkTheme} + > + + + + + + +); From 7c8ef33ff6ed714cd9ea18f1f4c25959395abec6 Mon Sep 17 00:00:00 2001 From: adrien guernier Date: Wed, 29 Nov 2023 11:09:57 +0100 Subject: [PATCH 04/22] add JSdoc to explain priority --- packages/ra-ui-materialui/src/AdminContext.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/ra-ui-materialui/src/AdminContext.tsx b/packages/ra-ui-materialui/src/AdminContext.tsx index b498a9293fc..b5fa598079c 100644 --- a/packages/ra-ui-materialui/src/AdminContext.tsx +++ b/packages/ra-ui-materialui/src/AdminContext.tsx @@ -41,6 +41,8 @@ export const AdminContext = (props: AdminContextProps) => { export interface AdminContextProps extends CoreAdminContextProps { /** * The material-UI theme to customize the UI + * If not provided, the default light and dark theme and are used + * If provided, the lightTheme and darkTheme prop are ignored except if they are themeselves provided * * @see https://marmelab.com/react-admin/Admin.html#theme * @example @@ -62,6 +64,7 @@ export interface AdminContextProps extends CoreAdminContextProps { /** * The material-UI theme to customize the UI. Prefer the theme prop. + * If not provided, the default light theme is used. * * @see https://marmelab.com/react-admin/Admin.html#theme */ @@ -69,6 +72,8 @@ export interface AdminContextProps extends CoreAdminContextProps { /** * The material-UI theme to apply to the UI when the dark mode is activated. + * If not provided, the default dark theme is used. + * If set to null, the dark mode is disabled. * * @see https://marmelab.com/react-admin/Admin.html#darktheme * @example From 735395fa3636171d38516629499f153702aac6a7 Mon Sep 17 00:00:00 2001 From: adrien guernier Date: Wed, 29 Nov 2023 11:43:29 +0100 Subject: [PATCH 05/22] JSdoc precisions about theme priorities --- packages/ra-ui-materialui/src/AdminContext.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/ra-ui-materialui/src/AdminContext.tsx b/packages/ra-ui-materialui/src/AdminContext.tsx index b5fa598079c..5cdd2fd1164 100644 --- a/packages/ra-ui-materialui/src/AdminContext.tsx +++ b/packages/ra-ui-materialui/src/AdminContext.tsx @@ -42,7 +42,8 @@ export interface AdminContextProps extends CoreAdminContextProps { /** * The material-UI theme to customize the UI * If not provided, the default light and dark theme and are used - * If provided, the lightTheme and darkTheme prop are ignored except if they are themeselves provided + * If provided the the lightTheme prop is ignored + * If provided and darkTheme prop is not, darkTheme is ignored * * @see https://marmelab.com/react-admin/Admin.html#theme * @example From 5dbd8eb9c01d02dd668f2ad5be388e49e4b26824 Mon Sep 17 00:00:00 2001 From: adrien guernier Date: Wed, 29 Nov 2023 11:43:53 +0100 Subject: [PATCH 06/22] doc: enhance documentation about darktheme --- docs/Admin.md | 46 ++++++++++++++++++++++++++++++++++++++-------- docs/AppBar.md | 2 +- 2 files changed, 39 insertions(+), 9 deletions(-) diff --git a/docs/Admin.md b/docs/Admin.md index 4e0858541d9..33fd7b3541c 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -434,29 +434,48 @@ const App = () => ( ## `darkTheme` -React-admin provides a [built-in dark theme by default](./AppTheme.md#default). The app will use the `darkTheme` by default for users who prefer the dark mode at the OS level, and users will be able to switch from light to dark mode using an app bar button leveraging [the `` component](./ToggleThemeButton.md). If you want to override it, you can provide your custom `darkTheme` in addition to the `theme` prop. +React-admin provides a [built-in dark theme by default](./AppTheme.md#default). The app will use the `darkTheme` by default for users who prefer the dark mode at the OS level, and users will be able to switch from light to dark mode using an app bar button leveraging [the `` component](./ToggleThemeButton.md). +If you want to override it, you can provide your custom `darkTheme` in addition to the `theme` prop: + ```tsx import { Admin } from 'react-admin'; import { dataProvider } from './dataProvider'; -import { darkTheme, lightTheme } from './themes'; +import { myDarkTheme } from './themes'; const App = () => ( + ... + +); +``` + +If you want to remove the user's ability to switch to dark theme, you can set `darkTheme` to `null`, therefore the `` component won't be shown: + +```tsx +import { Admin } from 'react-admin'; +import { dataProvider } from './dataProvider'; + +const App = () => ( + ... ); ``` +If the `theme` prop is provided and the `darkTheme` prop is not, the dark theme is disabled. + **Tip**: To disable OS preference detection and always use one theme by default, see the [`defaultTheme`](#defaulttheme) prop. ## `defaultTheme` @@ -603,29 +622,32 @@ Finally, you can also pass a custom component as the `layout` prop. It must cont ## `lightTheme` -React-admin provides a [built-in light theme by default](./AppTheme.md#default). The app will use the `lightTheme` by default for users who prefer the light mode at the OS / browser level, and users will be able to switch from light to dark mode using an app bar button leveraging [the `` component](./ToggleThemeButton.md). If you want to override it, you can provide your custom `lightTheme` in addition to the `theme` prop. +React-admin provides a [built-in light theme by default](./AppTheme.md#default). The app will use the `lightTheme` by default for users who prefer the light mode at the OS / browser level, and users will be able to switch from light to dark mode using an app bar button leveraging [the `` component](./ToggleThemeButton.md) if the `darkTheme` prop is provided or leaved by default. +If you want to override it, you can provide your custom `lightTheme`: + ```tsx import { Admin } from 'react-admin'; import { dataProvider } from './dataProvider'; -import { darkTheme, lightTheme } from './themes'; +import { mylightTheme } from './themes'; const App = () => ( ... ); ``` +If the `theme` prop is provided, the `lightTheme` prop is ignored. + **Tip**: To disable OS preference detection and always use one theme by default, see the [`defaultTheme`](#defaulttheme) prop. ## `loginPage` @@ -873,6 +895,14 @@ You can also [write your own theme](./AppTheme.md#writing-a-custom-theme) to fit React-admin provides a [built-in dark theme by default](./AppTheme.md#default). If you want to override it, check out [the `` prop](#darktheme). +### Theme Priorities + +The following priorities are applied depending on whether the `theme` prop is provided or not: + +- if `theme` is not provided, the default light and dark theme and are used; +- if `theme` is not provided the `lightTheme` prop is ignored; +- if `theme` is provided and `darkTheme` prop is not, `darkTheme` is ignored and disabled; + ## `title` On error pages, the header of an admin app uses 'React Admin' as the main app title. Use the `title` to customize it. diff --git a/docs/AppBar.md b/docs/AppBar.md index 117dcd0db50..bff511fd76f 100644 --- a/docs/AppBar.md +++ b/docs/AppBar.md @@ -18,7 +18,7 @@ By default, the `` component displays: - a hamburger icon to toggle the sidebar width, - the page title, - a button to change locales (if the application uses [i18n](./Translation.md)), -- a button to change the theme (if the application uses a [dark theme](./Admin.md#darktheme)), +- a button to change the theme (if the [dark theme](./Admin.md#darktheme) is not disabled), - a loading indicator, - a button to display the user menu. From ad6f74de83a21e01a0365c3726169555f214c53d Mon Sep 17 00:00:00 2001 From: adrien guernier Date: Wed, 29 Nov 2023 12:05:27 +0100 Subject: [PATCH 07/22] fix a typo --- docs/Admin.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Admin.md b/docs/Admin.md index 33fd7b3541c..b69512d2ee2 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -899,7 +899,7 @@ React-admin provides a [built-in dark theme by default](./AppTheme.md#default). The following priorities are applied depending on whether the `theme` prop is provided or not: -- if `theme` is not provided, the default light and dark theme and are used; +- if `theme` is not provided, the default light and dark theme are used; - if `theme` is not provided the `lightTheme` prop is ignored; - if `theme` is provided and `darkTheme` prop is not, `darkTheme` is ignored and disabled; From d1441cf7ee3bcc3cbdac448442a152cf04394147 Mon Sep 17 00:00:00 2001 From: adrien guernier Date: Wed, 29 Nov 2023 12:06:57 +0100 Subject: [PATCH 08/22] doc: add a section to upgrade guide about default dark theme --- docs/Upgrade.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/docs/Upgrade.md b/docs/Upgrade.md index a9fefcf3694..b42818c9b28 100644 --- a/docs/Upgrade.md +++ b/docs/Upgrade.md @@ -18,6 +18,24 @@ If you previously relied on the fact that the rows were not clickable by default ``` +## A `darkTheme` is now provided by default + +If not themes are configured in the `` component prop, React-admin enable the [dark mode feature](https://marmelab.com/react-admin/AppTheme.html#light-and-dark-themes) by default. + +If you don't need the dark mode feature, you need to explicitly disable it: +```diff +- ++ + ... + +``` + +To best manage the `theme` prop, here are the priorities applied depending on whether the `theme` prop is provided or not: + +- if `theme` is not provided, the [default light and dark theme](https://marmelab.com/react-admin/AppTheme.html#default) are used; +- if `theme` is not provided the `lightTheme` prop is ignored (no change from before); +- if `theme` is provided and `darkTheme` prop is not, `darkTheme` is ignored and disabled; + ## Upgrading to v4 If you are on react-admin v3, follow the [Upgrading to v4](https://marmelab.com/react-admin/doc/4.16/Upgrade.html) guide before upgrading to v5. \ No newline at end of file From a535fd391cdd85fd5ecec5bc042c7665b07b3118 Mon Sep 17 00:00:00 2001 From: adrien guernier Date: Wed, 29 Nov 2023 14:15:07 +0100 Subject: [PATCH 09/22] apply reviews --- docs/Admin.md | 10 +++++----- docs/AppTheme.md | 2 +- docs/ToggleThemeButton.md | 4 ++-- docs/Upgrade.md | 8 ++++---- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/Admin.md b/docs/Admin.md index b69512d2ee2..6bcdf7ef32f 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -434,14 +434,14 @@ const App = () => ( ## `darkTheme` -React-admin provides a [built-in dark theme by default](./AppTheme.md#default). The app will use the `darkTheme` by default for users who prefer the dark mode at the OS level, and users will be able to switch from light to dark mode using an app bar button leveraging [the `` component](./ToggleThemeButton.md). +React-admin provides a [built-in dark theme](./AppTheme.md#default). The app will use the `darkTheme` by default for users who prefer the dark mode at the OS level, and users will be able to switch from light to dark mode using [the `` component](./ToggleThemeButton.md). -If you want to override it, you can provide your custom `darkTheme` in addition to the `theme` prop: +If you want to override it, you can provide your own `darkTheme` in addition to the `theme` prop: ```tsx import { Admin } from 'react-admin'; @@ -622,14 +622,14 @@ Finally, you can also pass a custom component as the `layout` prop. It must cont ## `lightTheme` -React-admin provides a [built-in light theme by default](./AppTheme.md#default). The app will use the `lightTheme` by default for users who prefer the light mode at the OS / browser level, and users will be able to switch from light to dark mode using an app bar button leveraging [the `` component](./ToggleThemeButton.md) if the `darkTheme` prop is provided or leaved by default. +React-admin provides a [built-in light theme](./AppTheme.md#default). The app will use the `lightTheme` by default for users who prefer the light mode at the OS / browser level, and users will be able to switch from light to dark mode using [the `` component](./ToggleThemeButton.md) if the `darkTheme` prop is provided or leaved by default. -If you want to override it, you can provide your custom `lightTheme`: +If you want to override it, you can provide your own `lightTheme`: ```tsx import { Admin } from 'react-admin'; @@ -900,7 +900,7 @@ React-admin provides a [built-in dark theme by default](./AppTheme.md#default). The following priorities are applied depending on whether the `theme` prop is provided or not: - if `theme` is not provided, the default light and dark theme are used; -- if `theme` is not provided the `lightTheme` prop is ignored; +- if `theme` is provided the `lightTheme` prop is ignored; - if `theme` is provided and `darkTheme` prop is not, `darkTheme` is ignored and disabled; ## `title` diff --git a/docs/AppTheme.md b/docs/AppTheme.md index 9bdc4709713..cb3ef3ec006 100644 --- a/docs/AppTheme.md +++ b/docs/AppTheme.md @@ -62,7 +62,7 @@ It's a common practice to support both a light theme and a dark theme in an appl React-admin provides a [built-in dark theme by default](#default), the default application theme depends on the user's system settings. If the user has chosen a dark mode in their OS, react-admin will use the dark theme. Otherwise, it will use the light theme. -In addition, users can switch from one theme to the other using [the `` component](./ToggleThemeButton.md), which appears in the AppBar as soon as you define a `darkTheme` prop. +In addition, users can switch from one theme to the other using [the `` component](./ToggleThemeButton.md), that appears in the AppBar as soon as you define a `darkTheme` prop. You can override the dark theme by setting the ``'s `darkTheme` prop with your own theme: diff --git a/docs/ToggleThemeButton.md b/docs/ToggleThemeButton.md index 70ea5a4757d..b906247fe62 100644 --- a/docs/ToggleThemeButton.md +++ b/docs/ToggleThemeButton.md @@ -13,7 +13,7 @@ The `` component lets users switch from light to dark mode, a Your browser does not support the video tag. -It is enabled by default in the `` as soon React-admin provides a [built-in dark theme by default](./AppTheme.md#default). +It is enabled by default in the `` as React-admin provides a [built-in dark theme](./AppTheme.md#default). ## Usage @@ -84,7 +84,7 @@ export const MyAppBar = () => ( ## Creating A Dark Theme -For this button to work, you must provide a dark theme to the `` component. React-admin provides a [built-in dark theme by default](./AppTheme.md#default), but you can override it according to your needs. +For this button to work, you must provide a dark theme to the `` component. React-admin provides a [built-in dark theme](./AppTheme.md#default), but you can override it according to your needs. The `darkTheme` should be a JSON object that follows the [Material UI theme specification](https://material-ui.com/customization/theming/). diff --git a/docs/Upgrade.md b/docs/Upgrade.md index b42818c9b28..b13f45d28e1 100644 --- a/docs/Upgrade.md +++ b/docs/Upgrade.md @@ -20,9 +20,9 @@ If you previously relied on the fact that the rows were not clickable by default ## A `darkTheme` is now provided by default -If not themes are configured in the `` component prop, React-admin enable the [dark mode feature](https://marmelab.com/react-admin/AppTheme.html#light-and-dark-themes) by default. +If themes are not configured using the `` component props, React-admin enables the [dark mode feature](https://marmelab.com/react-admin/AppTheme.html#light-and-dark-themes). -If you don't need the dark mode feature, you need to explicitly disable it: +If you don't need the dark mode feature, you'll have to explicitly disable it: ```diff - + @@ -30,10 +30,10 @@ If you don't need the dark mode feature, you need to explicitly disable it: ``` -To best manage the `theme` prop, here are the priorities applied depending on whether the `theme` prop is provided or not: +Here are the priorities applied depending on whether the `theme` prop is provided or not: - if `theme` is not provided, the [default light and dark theme](https://marmelab.com/react-admin/AppTheme.html#default) are used; -- if `theme` is not provided the `lightTheme` prop is ignored (no change from before); +- if `theme` is provided the `lightTheme` prop is ignored (no change from before); - if `theme` is provided and `darkTheme` prop is not, `darkTheme` is ignored and disabled; ## Upgrading to v4 From 690448cb4e6a16bc5dc446fedeee63b5cde0f4f2 Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Wed, 29 Nov 2023 17:49:49 +0100 Subject: [PATCH 10/22] Fix props table --- docs/Admin.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/Admin.md b/docs/Admin.md index 6bcdf7ef32f..b153cb98e7b 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -145,12 +145,12 @@ Here are all the props accepted by the component: | `basename` | Optional | `string` | - | The base path for all URLs | | `catchAll` | Optional | `Component` | `NotFound` | The fallback component for unknown routes | | `dashboard` | Optional | `Component` | - | The content of the dashboard page | -| `darkTheme` | Optional | `object` | `defaultDarkTheme` (the default built-in dark theme) | The dark theme configuration | +| `darkTheme` | Optional | `object` | `default DarkTheme` (the default built-in dark theme) | The dark theme configuration | | `defaultTheme` | Optional | `boolean` | `false` | Flag to default to the light theme | | `disableTelemetry` | Optional | `boolean` | `false` | Set to `true` to disable telemetry collection | | `i18nProvider` | Optional | `I18NProvider` | - | The internationalization provider for translations | | `layout` | Optional | `Component` | `Layout` | The content of the layout | -| `lightTheme` | Optional | `object` | `defaultLightTheme` (the default built-in light theme) | The light theme configuration | +| `lightTheme` | Optional | `object` | `default LightTheme` (the default built-in light theme) | The light theme configuration | | `loginPage` | Optional | `Component` | `LoginPage` | The content of the login page | | `notification` | Optional | `Component` | `Notification` | The notification component | | `queryClient` | Optional | `QueryClient` | - | The react-query client | From 73f31b5261521147e4f520a479cb0c87e0e50c3e Mon Sep 17 00:00:00 2001 From: adrien guernier Date: Mon, 4 Dec 2023 09:57:48 +0100 Subject: [PATCH 11/22] remove confusing lightTheme documentation --- docs/Admin.md | 31 ------------------------------- 1 file changed, 31 deletions(-) diff --git a/docs/Admin.md b/docs/Admin.md index 6bcdf7ef32f..492b1e8d271 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -150,7 +150,6 @@ Here are all the props accepted by the component: | `disableTelemetry` | Optional | `boolean` | `false` | Set to `true` to disable telemetry collection | | `i18nProvider` | Optional | `I18NProvider` | - | The internationalization provider for translations | | `layout` | Optional | `Component` | `Layout` | The content of the layout | -| `lightTheme` | Optional | `object` | `defaultLightTheme` (the default built-in light theme) | The light theme configuration | | `loginPage` | Optional | `Component` | `LoginPage` | The content of the login page | | `notification` | Optional | `Component` | `Notification` | The notification component | | `queryClient` | Optional | `QueryClient` | - | The react-query client | @@ -620,36 +619,6 @@ Refer to each layout component documentation to understand the props it accepts. Finally, you can also pass a custom component as the `layout` prop. It must contain a `{children}` placeholder, where react-admin will render the page content. Check [the custom layout documentation](./Layout.md#writing-a-layout-from-scratch) for examples, and use the [default ``](https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/layout/Layout.tsx) as a starting point. -## `lightTheme` - -React-admin provides a [built-in light theme](./AppTheme.md#default). The app will use the `lightTheme` by default for users who prefer the light mode at the OS / browser level, and users will be able to switch from light to dark mode using [the `` component](./ToggleThemeButton.md) if the `darkTheme` prop is provided or leaved by default. - - - -If you want to override it, you can provide your own `lightTheme`: - -```tsx -import { Admin } from 'react-admin'; -import { dataProvider } from './dataProvider'; -import { mylightTheme } from './themes'; - -const App = () => ( - - ... - -); -``` - -If the `theme` prop is provided, the `lightTheme` prop is ignored. - -**Tip**: To disable OS preference detection and always use one theme by default, see the [`defaultTheme`](#defaulttheme) prop. - ## `loginPage` If you want to customize the Login page, or switch to another authentication strategy than a username/password form, pass a component of your own as the `loginPage` prop. React-admin will display this component whenever the `/login` route is called. From 5b6a0fded5a09daa0d5a13c8eab72963b402ff39 Mon Sep 17 00:00:00 2001 From: adrien guernier Date: Mon, 4 Dec 2023 09:59:28 +0100 Subject: [PATCH 12/22] doc: default value for the theme to defaultLightTheme --- docs/Admin.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Admin.md b/docs/Admin.md index 492b1e8d271..981746a86f0 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -156,7 +156,7 @@ Here are all the props accepted by the component: | `ready` | Optional | `Component` | `Ready` | The content of the ready page | | `requireAuth` | Optional | `boolean` | `false` | Flag to require authentication for all routes | | `store` | Optional | `Store` | - | The Store for managing user preferences | -| `theme` | Optional | `object` | - | The main (light) theme configuration | +| `theme` | Optional | `object` | `defaultLightTheme` (the default built-in light theme) | The main (light) theme configuration | | `title` | Optional | `string` | - | The error page title | From 3a7b3cceaa5a94ffbde62ecbb9f055a483be080c Mon Sep 17 00:00:00 2001 From: adrien guernier Date: Mon, 4 Dec 2023 10:01:12 +0100 Subject: [PATCH 13/22] doc: correct sentence --- docs/AppBar.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/AppBar.md b/docs/AppBar.md index bff511fd76f..6d34cdbabeb 100644 --- a/docs/AppBar.md +++ b/docs/AppBar.md @@ -18,7 +18,7 @@ By default, the `` component displays: - a hamburger icon to toggle the sidebar width, - the page title, - a button to change locales (if the application uses [i18n](./Translation.md)), -- a button to change the theme (if the [dark theme](./Admin.md#darktheme) is not disabled), +- a button to change the theme (unless the [dark theme](./Admin.md#darktheme) is disabled), - a loading indicator, - a button to display the user menu. From f713d260b748ae864b83a6222de53b688b095653 Mon Sep 17 00:00:00 2001 From: adrien guernier Date: Mon, 4 Dec 2023 10:08:25 +0100 Subject: [PATCH 14/22] improve upgrade guide for default dark theme --- docs/Upgrade.md | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/docs/Upgrade.md b/docs/Upgrade.md index b13f45d28e1..d2adea8f81c 100644 --- a/docs/Upgrade.md +++ b/docs/Upgrade.md @@ -18,11 +18,12 @@ If you previously relied on the fact that the rows were not clickable by default ``` -## A `darkTheme` is now provided by default +## Dark Theme Is Available By Default -If themes are not configured using the `` component props, React-admin enables the [dark mode feature](https://marmelab.com/react-admin/AppTheme.html#light-and-dark-themes). +In addition to the light theme, React-admin v5 includes a [dark theme](https://marmelab.com/react-admin/AppTheme.html#light-and-dark-themes), renders a theme switcher in the app bar, and chooses the default theme based on the user OS preferences. If you don't need the dark mode feature, you'll have to explicitly disable it: + ```diff - + @@ -30,11 +31,14 @@ If you don't need the dark mode feature, you'll have to explicitly disable it: ``` -Here are the priorities applied depending on whether the `theme` prop is provided or not: +If the `theme` prop is defined but not the `darkTheme` prop, theme switcher button in the app bar isn't displayed: -- if `theme` is not provided, the [default light and dark theme](https://marmelab.com/react-admin/AppTheme.html#default) are used; -- if `theme` is provided the `lightTheme` prop is ignored (no change from before); -- if `theme` is provided and `darkTheme` prop is not, `darkTheme` is ignored and disabled; +```diff +- ++ + ... + +``` ## Upgrading to v4 From fb00163e9981ad6a1a74e9d4af26e051833d2027 Mon Sep 17 00:00:00 2001 From: adrien guernier Date: Mon, 4 Dec 2023 10:09:20 +0100 Subject: [PATCH 15/22] remove JSDoc --- packages/ra-ui-materialui/src/AdminContext.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/ra-ui-materialui/src/AdminContext.tsx b/packages/ra-ui-materialui/src/AdminContext.tsx index 5cdd2fd1164..2a3eea79f1a 100644 --- a/packages/ra-ui-materialui/src/AdminContext.tsx +++ b/packages/ra-ui-materialui/src/AdminContext.tsx @@ -41,9 +41,6 @@ export const AdminContext = (props: AdminContextProps) => { export interface AdminContextProps extends CoreAdminContextProps { /** * The material-UI theme to customize the UI - * If not provided, the default light and dark theme and are used - * If provided the the lightTheme prop is ignored - * If provided and darkTheme prop is not, darkTheme is ignored * * @see https://marmelab.com/react-admin/Admin.html#theme * @example From 6de99739b239778fa6d5a32cceb9c91ef78c4e66 Mon Sep 17 00:00:00 2001 From: adrien guernier Date: Mon, 4 Dec 2023 10:10:09 +0100 Subject: [PATCH 16/22] doc: remove them priorities --- docs/Admin.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/docs/Admin.md b/docs/Admin.md index 981746a86f0..e1c579f3cdc 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -864,14 +864,6 @@ You can also [write your own theme](./AppTheme.md#writing-a-custom-theme) to fit React-admin provides a [built-in dark theme by default](./AppTheme.md#default). If you want to override it, check out [the `` prop](#darktheme). -### Theme Priorities - -The following priorities are applied depending on whether the `theme` prop is provided or not: - -- if `theme` is not provided, the default light and dark theme are used; -- if `theme` is provided the `lightTheme` prop is ignored; -- if `theme` is provided and `darkTheme` prop is not, `darkTheme` is ignored and disabled; - ## `title` On error pages, the header of an admin app uses 'React Admin' as the main app title. Use the `title` to customize it. From 67a6ed6c50c247fe1c1a13efefb10982321e59a0 Mon Sep 17 00:00:00 2001 From: adrien guernier Date: Mon, 4 Dec 2023 10:26:54 +0100 Subject: [PATCH 17/22] remove useless darkTheme usage in stories --- .../src/button/ToggleThemeButton.stories.tsx | 7 +------ .../ra-ui-materialui/src/layout/Menu.stories.tsx | 7 +------ .../src/list/filter/SavedQueriesList.stories.tsx | 16 ---------------- 3 files changed, 2 insertions(+), 28 deletions(-) diff --git a/packages/ra-ui-materialui/src/button/ToggleThemeButton.stories.tsx b/packages/ra-ui-materialui/src/button/ToggleThemeButton.stories.tsx index cf7f0434118..15de1e9a419 100644 --- a/packages/ra-ui-materialui/src/button/ToggleThemeButton.stories.tsx +++ b/packages/ra-ui-materialui/src/button/ToggleThemeButton.stories.tsx @@ -97,12 +97,7 @@ const BookList = () => ( ); export const Basic = () => ( - + ); diff --git a/packages/ra-ui-materialui/src/layout/Menu.stories.tsx b/packages/ra-ui-materialui/src/layout/Menu.stories.tsx index 6f95cd03a80..225e681491a 100644 --- a/packages/ra-ui-materialui/src/layout/Menu.stories.tsx +++ b/packages/ra-ui-materialui/src/layout/Menu.stories.tsx @@ -1,10 +1,9 @@ import * as React from 'react'; import { Resource, CustomRoutes, testDataProvider, memoryStore } from 'ra-core'; -import { defaultTheme, Admin, useSidebarState } from 'react-admin'; +import { Admin, useSidebarState } from 'react-admin'; import { Typography, Skeleton, - ThemeOptions, MenuItem, ListItemText, ListItemIcon, @@ -30,8 +29,6 @@ export default { title: 'ra-ui-materialui/layout/Menu' }; const resources = ['Posts', 'Comments', 'Tags', 'Users', 'Orders', 'Reviews']; -const darkTheme: ThemeOptions = { ...defaultTheme, palette: { mode: 'dark' } }; - const DemoList = ({ name }) => ( <> @@ -48,7 +45,6 @@ export const Default = () => { store={memoryStore()} dataProvider={testDataProvider()} layout={DefaultLayout} - darkTheme={darkTheme} > {resources.map((resource, index) => ( <Resource @@ -70,7 +66,6 @@ export const Dense = () => { store={memoryStore()} dataProvider={testDataProvider()} layout={LayoutDense} - darkTheme={darkTheme} > {resources.map((resource, index) => ( <Resource diff --git a/packages/ra-ui-materialui/src/list/filter/SavedQueriesList.stories.tsx b/packages/ra-ui-materialui/src/list/filter/SavedQueriesList.stories.tsx index e3d5d4d16c6..9dc628a5bb4 100644 --- a/packages/ra-ui-materialui/src/list/filter/SavedQueriesList.stories.tsx +++ b/packages/ra-ui-materialui/src/list/filter/SavedQueriesList.stories.tsx @@ -3,7 +3,6 @@ import merge from 'lodash/merge'; import { Admin, - defaultTheme, Resource, Datagrid, List, @@ -23,7 +22,6 @@ import frenchMessages from 'ra-language-french'; import { createMemoryHistory } from 'history'; import { SavedQueriesList } from './SavedQueriesList'; -import { RaThemeOptions } from '../..'; import fakeRestProvider from 'ra-data-fakerest'; export default { title: 'ra-ui-materialui/list/filter/SavedQueriesList' }; @@ -188,26 +186,12 @@ const i18nProvider = polyglotI18nProvider( ] ); -const darkTheme: RaThemeOptions = { - ...defaultTheme, - palette: { - secondary: { - light: '#5f5fc4', - main: '#283593', - dark: '#001064', - contrastText: '#fff', - }, - mode: 'dark', - }, -}; - export const WithThemeAndLocale = () => ( <Admin store={memoryStore()} history={createMemoryHistory()} i18nProvider={i18nProvider} dataProvider={dataProvider} - darkTheme={darkTheme} > <Resource name="songs" list={SongList} /> </Admin> From 017ea11aa7843a865ded472417659e881d246c49 Mon Sep 17 00:00:00 2001 From: adrien guernier <adrien@marmelab.com> Date: Mon, 4 Dec 2023 10:27:15 +0100 Subject: [PATCH 18/22] update AdminContext spec --- .../src/AdminContext.spec.tsx | 23 +++++-------------- 1 file changed, 6 insertions(+), 17 deletions(-) diff --git a/packages/ra-ui-materialui/src/AdminContext.spec.tsx b/packages/ra-ui-materialui/src/AdminContext.spec.tsx index bbfea0f82fe..2032a110d20 100644 --- a/packages/ra-ui-materialui/src/AdminContext.spec.tsx +++ b/packages/ra-ui-materialui/src/AdminContext.spec.tsx @@ -1,22 +1,19 @@ import * as React from 'react'; import { render, screen } from '@testing-library/react'; -import { Typography, ThemeOptions } from '@mui/material'; +import { Typography } from '@mui/material'; import expect from 'expect'; import { memoryStore } from 'ra-core'; import { AdminContext } from './AdminContext'; import { ThemeTestWrapper } from './layout/ThemeTestWrapper'; -const lightTheme: ThemeOptions = {}; -const darkTheme: ThemeOptions = { palette: { mode: 'dark' } }; - const LIGHT_MODE_TEXT_COLOR = 'rgb(25, 118, 210)'; // text is dark blue in light mode const DARK_MODE_TEXT_COLOR = 'rgb(144, 202, 249)'; // text is light blue in dark mode describe('AdminContext', () => { it('should default to light theme', () => { render( - <AdminContext theme={lightTheme} darkTheme={darkTheme}> + <AdminContext> <Typography color="primary">Test</Typography> </AdminContext> ); @@ -26,7 +23,7 @@ describe('AdminContext', () => { it('should default to dark theme when the browser detects a dark mode preference', () => { render( <ThemeTestWrapper mode="dark"> - <AdminContext theme={lightTheme} darkTheme={darkTheme}> + <AdminContext> <Typography color="primary">Test</Typography> </AdminContext> </ThemeTestWrapper> @@ -37,7 +34,7 @@ describe('AdminContext', () => { it('should default to light theme when the browser detects a dark mode preference', () => { render( <ThemeTestWrapper mode="light"> - <AdminContext theme={lightTheme} darkTheme={darkTheme}> + <AdminContext> <Typography color="primary">Test</Typography> </AdminContext> </ThemeTestWrapper> @@ -47,11 +44,7 @@ describe('AdminContext', () => { }); it('should default to dark theme when user preference is dark', () => { render( - <AdminContext - theme={lightTheme} - darkTheme={darkTheme} - store={memoryStore({ theme: 'dark' })} - > + <AdminContext store={memoryStore({ theme: 'dark' })}> <Typography color="primary">Test</Typography> </AdminContext> ); @@ -61,11 +54,7 @@ describe('AdminContext', () => { it('should default to light theme when user preference is light', () => { render( <ThemeTestWrapper mode="dark"> - <AdminContext - theme={lightTheme} - darkTheme={darkTheme} - store={memoryStore({ theme: 'light' })} - > + <AdminContext store={memoryStore({ theme: 'light' })}> <Typography color="primary">Test</Typography> </AdminContext> </ThemeTestWrapper> From 787399512f72a2d6433371eaf713048e41d17f0a Mon Sep 17 00:00:00 2001 From: adrien guernier <adrien@marmelab.com> Date: Mon, 4 Dec 2023 10:33:36 +0100 Subject: [PATCH 19/22] add a spec to test main theme priority --- packages/ra-ui-materialui/src/AdminContext.spec.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/ra-ui-materialui/src/AdminContext.spec.tsx b/packages/ra-ui-materialui/src/AdminContext.spec.tsx index 2032a110d20..d632c0ead6e 100644 --- a/packages/ra-ui-materialui/src/AdminContext.spec.tsx +++ b/packages/ra-ui-materialui/src/AdminContext.spec.tsx @@ -6,6 +6,7 @@ import { memoryStore } from 'ra-core'; import { AdminContext } from './AdminContext'; import { ThemeTestWrapper } from './layout/ThemeTestWrapper'; +import { defaultLightTheme } from './theme'; const LIGHT_MODE_TEXT_COLOR = 'rgb(25, 118, 210)'; // text is dark blue in light mode const DARK_MODE_TEXT_COLOR = 'rgb(144, 202, 249)'; // text is light blue in dark mode @@ -62,4 +63,15 @@ describe('AdminContext', () => { const text = screen.getByText('Test'); expect(getComputedStyle(text).color).toBe(LIGHT_MODE_TEXT_COLOR); }); + it('should only use main theme even the browser detects a dark mode preference', () => { + render( + <ThemeTestWrapper mode="dark"> + <AdminContext theme={defaultLightTheme}> + <Typography color="primary">Test</Typography> + </AdminContext> + </ThemeTestWrapper> + ); + const text = screen.getByText('Test'); + expect(getComputedStyle(text).color).toBe(LIGHT_MODE_TEXT_COLOR); + }); }); From ab9b129ebf428ea1e8995576a4fdf36fdcc7ed35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Zaninotto?= <fzaninotto@gmail.com> Date: Mon, 4 Dec 2023 11:40:48 +0100 Subject: [PATCH 20/22] Small edit --- docs/Admin.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/Admin.md b/docs/Admin.md index 49ffc8335b3..ccb1ecd036c 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -145,7 +145,7 @@ Here are all the props accepted by the component: | `basename` | Optional | `string` | - | The base path for all URLs | | `catchAll` | Optional | `Component` | `NotFound` | The fallback component for unknown routes | | `dashboard` | Optional | `Component` | - | The content of the dashboard page | -| `darkTheme` | Optional | `object` | `default DarkTheme` (the default built-in dark theme) | The dark theme configuration | +| `darkTheme` | Optional | `object` | `default DarkTheme` | The dark theme configuration | | `defaultTheme` | Optional | `boolean` | `false` | Flag to default to the light theme | | `disableTelemetry` | Optional | `boolean` | `false` | Set to `true` to disable telemetry collection | | `i18nProvider` | Optional | `I18NProvider` | - | The internationalization provider for translations | @@ -156,7 +156,7 @@ Here are all the props accepted by the component: | `ready` | Optional | `Component` | `Ready` | The content of the ready page | | `requireAuth` | Optional | `boolean` | `false` | Flag to require authentication for all routes | | `store` | Optional | `Store` | - | The Store for managing user preferences | -| `theme` | Optional | `object` | `defaultLightTheme` (the default built-in light theme) | The main (light) theme configuration | +| `theme` | Optional | `object` | `default LightTheme` | The main (light) theme configuration | | `title` | Optional | `string` | - | The error page title | From e44f99e0864be34f6b48ec3e13e6226ed8004a4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Zaninotto?= <fzaninotto@gmail.com> Date: Mon, 4 Dec 2023 12:23:11 +0100 Subject: [PATCH 21/22] Default stories to light theme --- .../src/button/SortButton.stories.tsx | 10 +- .../src/field/ReferenceArrayField.stories.tsx | 11 +- .../src/field/TranslatableFields.stories.tsx | 2 +- .../src/form/SimpleForm.stories.tsx | 1 + .../src/form/TabbedForm.stories.tsx | 1 + .../useRegisterMutationMiddleware.stories.tsx | 2 +- .../ArrayInput/SimpleFormIterator.stories.tsx | 207 +++++-------- .../input/AutocompleteArrayInput.stories.tsx | 86 +++-- .../src/input/AutocompleteInput.stories.tsx | 1 + .../src/input/BooleanInput.stories.tsx | 4 +- .../src/input/CheckboxGroupInput.stories.tsx | 25 +- .../src/input/DateInput.stories.tsx | 2 +- .../src/input/DateTimeInput.stories.tsx | 2 +- .../src/input/FileInput.stories.tsx | 2 +- .../src/input/ImageInput.stories.tsx | 2 +- .../input/NullableBooleanInput.stories.tsx | 2 +- .../src/input/NumberInput.stories.tsx | 293 ++++++------------ .../input/RadioButtonGroupInput.stories.tsx | 10 +- .../src/input/ReferenceArrayInput.stories.tsx | 33 +- .../src/input/SelectArrayInput.stories.tsx | 13 +- .../src/input/SelectInput.stories.tsx | 3 + .../src/input/TextInput.stories.tsx | 206 +++++------- .../src/input/TimeInput.stories.tsx | 2 +- .../src/input/TranslatableInputs.stories.tsx | 2 +- .../src/input/inputs.stories.tsx | 2 +- 25 files changed, 365 insertions(+), 559 deletions(-) diff --git a/packages/ra-ui-materialui/src/button/SortButton.stories.tsx b/packages/ra-ui-materialui/src/button/SortButton.stories.tsx index 7a7607ec6e4..4c3d1c85810 100644 --- a/packages/ra-ui-materialui/src/button/SortButton.stories.tsx +++ b/packages/ra-ui-materialui/src/button/SortButton.stories.tsx @@ -54,13 +54,17 @@ const PlayerList = () => ( ); export const Basic = () => ( - <AdminContext dataProvider={dataProvider}> + <AdminContext dataProvider={dataProvider} defaultTheme="light"> <Resource name="players" list={PlayerList} /> </AdminContext> ); export const I18N = () => ( - <AdminContext dataProvider={dataProvider} i18nProvider={i18nProvider}> + <AdminContext + dataProvider={dataProvider} + defaultTheme="light" + i18nProvider={i18nProvider} + > <Resource name="players" list={PlayerList} /> </AdminContext> ); @@ -92,7 +96,7 @@ const PlayerListSX = () => ( ); export const SX = () => ( - <AdminContext dataProvider={dataProvider}> + <AdminContext dataProvider={dataProvider} defaultTheme="light"> <Resource name="players" list={PlayerListSX} /> </AdminContext> ); diff --git a/packages/ra-ui-materialui/src/field/ReferenceArrayField.stories.tsx b/packages/ra-ui-materialui/src/field/ReferenceArrayField.stories.tsx index 6374904f569..56a54cca2bc 100644 --- a/packages/ra-ui-materialui/src/field/ReferenceArrayField.stories.tsx +++ b/packages/ra-ui-materialui/src/field/ReferenceArrayField.stories.tsx @@ -34,7 +34,7 @@ const resouceDefs = { }, }; export const Basic = () => ( - <AdminContext dataProvider={dataProvider}> + <AdminContext dataProvider={dataProvider} defaultTheme="light"> <ResourceDefinitionContextProvider definitions={resouceDefs}> <Show resource="bands" id={1} sx={{ width: 600 }}> <SimpleShowLayout> @@ -47,7 +47,7 @@ export const Basic = () => ( ); export const Children = () => ( - <AdminContext dataProvider={dataProvider}> + <AdminContext dataProvider={dataProvider} defaultTheme="light"> <ResourceDefinitionContextProvider definitions={resouceDefs}> <Show resource="bands" id={1} sx={{ width: 600 }}> <SimpleShowLayout> @@ -79,7 +79,10 @@ const dataProviderWithDifferentIdTypes = fakeRestProvider( ); export const DifferentIdTypes = () => ( - <AdminContext dataProvider={dataProviderWithDifferentIdTypes}> + <AdminContext + dataProvider={dataProviderWithDifferentIdTypes} + defaultTheme="light" + > <CardContent> <Show resource="bands" id={1} sx={{ width: 600 }}> <TextField source="name" fullWidth /> @@ -108,7 +111,7 @@ const dataProviderWithLog = { export const WithMeta = () => { return ( - <AdminContext dataProvider={dataProviderWithLog}> + <AdminContext dataProvider={dataProviderWithLog} defaultTheme="light"> <CardContent> <Show resource="bands" id={1} sx={{ width: 600 }}> <TextField source="name" /> diff --git a/packages/ra-ui-materialui/src/field/TranslatableFields.stories.tsx b/packages/ra-ui-materialui/src/field/TranslatableFields.stories.tsx index 79985743ccf..101e92e9278 100644 --- a/packages/ra-ui-materialui/src/field/TranslatableFields.stories.tsx +++ b/packages/ra-ui-materialui/src/field/TranslatableFields.stories.tsx @@ -44,7 +44,7 @@ const defaultData = [ const i18nProvider = polyglotI18nProvider(() => englishMessages); const Wrapper = ({ children }) => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <RecordContextProvider value={defaultData[0]}> <SimpleShowLayout>{children}</SimpleShowLayout> </RecordContextProvider> diff --git a/packages/ra-ui-materialui/src/form/SimpleForm.stories.tsx b/packages/ra-ui-materialui/src/form/SimpleForm.stories.tsx index d5905a8971d..3cb0106bcfe 100644 --- a/packages/ra-ui-materialui/src/form/SimpleForm.stories.tsx +++ b/packages/ra-ui-materialui/src/form/SimpleForm.stories.tsx @@ -34,6 +34,7 @@ const Wrapper = ({ dataProvider={testDataProvider({ getOne: () => Promise.resolve({ data }), })} + defaultTheme="light" > <ResourceContextProvider value="books"> <Edit id={1} sx={{ width: 600 }}> diff --git a/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx b/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx index 95085cb09c9..9435a3ffed6 100644 --- a/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx +++ b/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx @@ -28,6 +28,7 @@ const Wrapper = ({ children }) => ( dataProvider={testDataProvider({ getOne: () => Promise.resolve({ data }), })} + defaultTheme="light" > <ResourceContextProvider value="books"> <Edit id={1} sx={{ width: 600 }}> diff --git a/packages/ra-ui-materialui/src/form/useRegisterMutationMiddleware.stories.tsx b/packages/ra-ui-materialui/src/form/useRegisterMutationMiddleware.stories.tsx index 83fe25ebb7a..67413d76ed5 100644 --- a/packages/ra-ui-materialui/src/form/useRegisterMutationMiddleware.stories.tsx +++ b/packages/ra-ui-materialui/src/form/useRegisterMutationMiddleware.stories.tsx @@ -107,7 +107,7 @@ export const Basic = () => { true ); return ( - <AdminContext dataProvider={dataProvider}> + <AdminContext dataProvider={dataProvider} defaultTheme="light"> <Create resource="posts"> <SimpleForm> <MyImageInput source="thumbnail" /> diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.stories.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.stories.tsx index 068402a70bd..4d143bc73fd 100644 --- a/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.stories.tsx +++ b/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.stories.tsx @@ -31,167 +31,115 @@ const dataProvider = { }), } as any; -export const Basic = () => ( - <AdminContext dataProvider={dataProvider}> +const Wrapper = ({ children }) => ( + <AdminContext dataProvider={dataProvider} defaultTheme="light"> <Edit resource="books" id="1"> <SimpleForm> - <ArrayInput source="authors"> - <SimpleFormIterator> - <TextInput source="name" /> - <TextInput source="role" /> - </SimpleFormIterator> - </ArrayInput> + <ArrayInput source="authors">{children}</ArrayInput> </SimpleForm> </Edit> </AdminContext> ); +export const Basic = () => ( + <Wrapper> + <SimpleFormIterator> + <TextInput source="name" /> + <TextInput source="role" /> + </SimpleFormIterator> + </Wrapper> +); + export const AddButton = () => ( - <AdminContext dataProvider={dataProvider}> - <Edit resource="books" id="1"> - <SimpleForm> - <ArrayInput source="authors"> - <SimpleFormIterator addButton={<Button>Add</Button>}> - <TextInput source="name" /> - <TextInput source="role" /> - </SimpleFormIterator> - </ArrayInput> - </SimpleForm> - </Edit> - </AdminContext> + <Wrapper> + <SimpleFormIterator addButton={<Button>Add</Button>}> + <TextInput source="name" /> + <TextInput source="role" /> + </SimpleFormIterator> + </Wrapper> ); export const GetItemLabel = () => ( - <AdminContext dataProvider={dataProvider}> - <Edit resource="books" id="1"> - <SimpleForm> - <ArrayInput source="authors"> - <SimpleFormIterator - getItemLabel={index => `item #${index}`} - > - <TextInput source="name" /> - <TextInput source="role" /> - </SimpleFormIterator> - </ArrayInput> - </SimpleForm> - </Edit> - </AdminContext> + <Wrapper> + <SimpleFormIterator getItemLabel={index => `item #${index}`}> + <TextInput source="name" /> + <TextInput source="role" /> + </SimpleFormIterator> + </Wrapper> ); export const FullWidth = () => ( - <AdminContext dataProvider={dataProvider}> - <Edit resource="books" id="1"> - <SimpleForm> - <ArrayInput source="authors"> - <SimpleFormIterator fullWidth> - <TextInput source="name" /> - <TextInput source="role" /> - </SimpleFormIterator> - </ArrayInput> - </SimpleForm> - </Edit> - </AdminContext> + <Wrapper> + <SimpleFormIterator fullWidth> + <TextInput source="name" /> + <TextInput source="role" /> + </SimpleFormIterator> + </Wrapper> ); export const Inline = () => ( - <AdminContext dataProvider={dataProvider}> - <Edit resource="books" id="1"> - <SimpleForm> - <ArrayInput source="authors"> - <SimpleFormIterator inline> - <TextInput source="name" /> - <TextInput source="role" /> - </SimpleFormIterator> - </ArrayInput> - </SimpleForm> - </Edit> - </AdminContext> + <Wrapper> + <SimpleFormIterator inline> + <TextInput source="name" /> + <TextInput source="role" /> + </SimpleFormIterator> + </Wrapper> ); export const DisableAdd = () => ( - <AdminContext dataProvider={dataProvider}> - <Edit resource="books" id="1"> - <SimpleForm> - <ArrayInput source="authors"> - <SimpleFormIterator disableAdd> - <TextInput source="name" /> - <TextInput source="role" /> - </SimpleFormIterator> - </ArrayInput> - </SimpleForm> - </Edit> - </AdminContext> + <Wrapper> + <SimpleFormIterator disableAdd> + <TextInput source="name" /> + <TextInput source="role" /> + </SimpleFormIterator> + </Wrapper> ); export const DisableClear = () => ( - <AdminContext dataProvider={dataProvider}> - <Edit resource="books" id="1"> - <SimpleForm> - <ArrayInput source="authors"> - <SimpleFormIterator disableClear> - <TextInput source="name" /> - <TextInput source="role" /> - </SimpleFormIterator> - </ArrayInput> - </SimpleForm> - </Edit> - </AdminContext> + <Wrapper> + <SimpleFormIterator disableClear> + <TextInput source="name" /> + <TextInput source="role" /> + </SimpleFormIterator> + </Wrapper> ); export const DisableRemove = () => ( - <AdminContext dataProvider={dataProvider}> - <Edit resource="books" id="1"> - <SimpleForm> - <ArrayInput source="authors"> - <SimpleFormIterator disableRemove> - <TextInput source="name" /> - <TextInput source="role" /> - </SimpleFormIterator> - </ArrayInput> - </SimpleForm> - </Edit> - </AdminContext> + <Wrapper> + <SimpleFormIterator disableRemove> + <TextInput source="name" /> + <TextInput source="role" /> + </SimpleFormIterator> + </Wrapper> ); export const DisableReordering = () => ( - <AdminContext dataProvider={dataProvider}> - <Edit resource="books" id="1"> - <SimpleForm> - <ArrayInput source="authors"> - <SimpleFormIterator disableReordering> - <TextInput source="name" /> - <TextInput source="role" /> - </SimpleFormIterator> - </ArrayInput> - </SimpleForm> - </Edit> - </AdminContext> + <Wrapper> + <SimpleFormIterator disableReordering> + <TextInput source="name" /> + <TextInput source="role" /> + </SimpleFormIterator> + </Wrapper> ); export const Sx = () => ( - <AdminContext dataProvider={dataProvider}> - <Edit resource="books" id="1"> - <SimpleForm> - <ArrayInput source="authors"> - <SimpleFormIterator - sx={{ - border: 'solid lightgrey 1px', - borderRadius: 2, - mt: 3, - p: 1, - '& .RaSimpleFormIterator-form': { - flexDirection: 'row', - gap: '1em', - }, - }} - > - <TextInput source="name" /> - <TextInput source="role" /> - </SimpleFormIterator> - </ArrayInput> - </SimpleForm> - </Edit> - </AdminContext> + <Wrapper> + <SimpleFormIterator + sx={{ + border: 'solid lightgrey 1px', + borderRadius: 2, + mt: 3, + p: 1, + '& .RaSimpleFormIterator-form': { + flexDirection: 'row', + gap: '1em', + }, + }} + > + <TextInput source="name" /> + <TextInput source="role" /> + </SimpleFormIterator> + </Wrapper> ); export const Theming = () => ( @@ -217,6 +165,7 @@ export const Theming = () => ( }, }, }} + defaultTheme="light" > <Edit resource="books" id="1"> <SimpleForm> diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.stories.tsx b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.stories.tsx index 40ffeef7227..8ceb63bcbef 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.stories.tsx @@ -30,51 +30,47 @@ export default { title: 'ra-ui-materialui/input/AutocompleteArrayInput' }; const i18nProvider = polyglotI18nProvider(() => englishMessages); -export const Basic = () => ( - <AdminContext i18nProvider={i18nProvider}> +const Wrapper = ({ children }) => ( + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="posts" record={{ roles: ['u001', 'u003'] }} sx={{ width: 600 }} > - <SimpleForm> - <AutocompleteArrayInput - source="roles" - choices={[ - { id: 'admin', name: 'Admin' }, - { id: 'u001', name: 'Editor' }, - { id: 'u002', name: 'Moderator' }, - { id: 'u003', name: 'Reviewer' }, - ]} - /> - </SimpleForm> + <SimpleForm>{children}</SimpleForm> </Create> </AdminContext> ); +export const Basic = () => ( + <Wrapper> + <AutocompleteArrayInput + source="roles" + choices={[ + { id: 'admin', name: 'Admin' }, + { id: 'u001', name: 'Editor' }, + { id: 'u002', name: 'Moderator' }, + { id: 'u003', name: 'Reviewer' }, + ]} + /> + </Wrapper> +); + export const OnChange = ({ onChange = (value, records) => console.log({ value, records }), }: Pick<AutocompleteArrayInputProps, 'onChange'>) => ( - <AdminContext i18nProvider={i18nProvider}> - <Create - resource="posts" - record={{ roles: ['u001', 'u003'] }} - sx={{ width: 600 }} - > - <SimpleForm> - <AutocompleteArrayInput - source="roles" - choices={[ - { id: 'admin', name: 'Admin' }, - { id: 'u001', name: 'Editor' }, - { id: 'u002', name: 'Moderator' }, - { id: 'u003', name: 'Reviewer' }, - ]} - onChange={onChange} - /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <AutocompleteArrayInput + source="roles" + choices={[ + { id: 'admin', name: 'Admin' }, + { id: 'u001', name: 'Editor' }, + { id: 'u002', name: 'Moderator' }, + { id: 'u003', name: 'Reviewer' }, + ]} + onChange={onChange} + /> + </Wrapper> ); const choices = [ @@ -117,22 +113,14 @@ const CreateRole = () => { }; export const CreateProp = () => ( - <AdminContext i18nProvider={i18nProvider}> - <Create - resource="users" - record={{ roles: ['u001', 'u003'] }} - sx={{ width: 600 }} - > - <SimpleForm> - <AutocompleteArrayInput - source="roles" - choices={choices} - sx={{ width: 400 }} - create={<CreateRole />} - /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <AutocompleteArrayInput + source="roles" + choices={choices} + sx={{ width: 400 }} + create={<CreateRole />} + /> + </Wrapper> ); const dataProvider = { diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx index 730e9f29f70..116f83c2eb3 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx @@ -1142,6 +1142,7 @@ export const TranslateChoice = () => { }), } as any } + defaultTheme="light" > <Edit resource="posts" id="1"> <SimpleForm> diff --git a/packages/ra-ui-materialui/src/input/BooleanInput.stories.tsx b/packages/ra-ui-materialui/src/input/BooleanInput.stories.tsx index f1b2b74a781..60bbb8e22f3 100644 --- a/packages/ra-ui-materialui/src/input/BooleanInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/BooleanInput.stories.tsx @@ -33,7 +33,7 @@ export const CustomIcon = () => ( const i18nProvider = polyglotI18nProvider(() => englishMessages); const Wrapper = ({ children }) => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="posts"> <SimpleForm>{children}</SimpleForm> </Create> @@ -48,7 +48,7 @@ const SetFocusButton = ({ source }) => { }; export const SetFocus = () => ( - <AdminContext> + <AdminContext defaultTheme="light"> <Create resource="posts" sx={{ width: 600 }}> <SimpleForm> <TextInput source="title" /> diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.stories.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.stories.tsx index 4335fc3a541..c53a4e40d1a 100644 --- a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.stories.tsx @@ -27,7 +27,7 @@ const choices = [ ]; export const Basic = () => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="posts" record={{ roles: ['u001', 'u003'] }} @@ -60,7 +60,11 @@ const dataProvider = testDataProvider({ }); export const InsideReferenceArrayInput = () => ( - <AdminContext dataProvider={dataProvider} i18nProvider={i18nProvider}> + <AdminContext + dataProvider={dataProvider} + i18nProvider={i18nProvider} + defaultTheme="light" + > <Create resource="posts" record={{ options: [1, 2] }} @@ -76,7 +80,7 @@ export const InsideReferenceArrayInput = () => ( ); export const Disabled = () => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="posts" record={{ options: [1, 2] }} @@ -94,7 +98,7 @@ export const Disabled = () => ( ); export const LabelPlacement = () => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="posts" record={{ options: [1, 2] }} @@ -112,7 +116,7 @@ export const LabelPlacement = () => ( ); export const Column = () => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="posts" record={{ options: [1, 2] }} @@ -130,7 +134,7 @@ export const Column = () => ( ); export const Options = () => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="posts" record={{ options: [1, 2] }} @@ -151,7 +155,7 @@ export const Options = () => ( ); export const CustomOptionText = () => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="posts" record={{ options: [1, 2] }} @@ -187,7 +191,7 @@ const OptionText = () => { }; export const Validate = () => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="posts" sx={{ width: 600 }}> <SimpleForm> <CheckboxGroupInput @@ -202,7 +206,7 @@ export const Validate = () => ( ); export const HelperText = () => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="posts" sx={{ width: 600 }}> <SimpleForm> <CheckboxGroupInput @@ -246,6 +250,7 @@ export const TranslateChoice = () => { }), } as any } + defaultTheme="light" > <Edit resource="posts" id="1"> <SimpleForm> @@ -302,7 +307,7 @@ const SetFocusButton = ({ source }) => { }; export const SetFocus = () => ( - <AdminContext> + <AdminContext defaultTheme="light"> <Create resource="posts" sx={{ width: 600 }}> <SimpleForm> <TextInput source="title" /> diff --git a/packages/ra-ui-materialui/src/input/DateInput.stories.tsx b/packages/ra-ui-materialui/src/input/DateInput.stories.tsx index 70ddb236a37..35053037573 100644 --- a/packages/ra-ui-materialui/src/input/DateInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/DateInput.stories.tsx @@ -38,7 +38,7 @@ export const Validate = () => ( const i18nProvider = polyglotI18nProvider(() => englishMessages); const Wrapper = ({ children }) => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="posts"> <SimpleForm> {children} diff --git a/packages/ra-ui-materialui/src/input/DateTimeInput.stories.tsx b/packages/ra-ui-materialui/src/input/DateTimeInput.stories.tsx index 08dd936ed62..59c54e20e0b 100644 --- a/packages/ra-ui-materialui/src/input/DateTimeInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/DateTimeInput.stories.tsx @@ -31,7 +31,7 @@ export const Disabled = () => ( const i18nProvider = polyglotI18nProvider(() => englishMessages); const Wrapper = ({ children }) => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="posts"> <SimpleForm> {children} diff --git a/packages/ra-ui-materialui/src/input/FileInput.stories.tsx b/packages/ra-ui-materialui/src/input/FileInput.stories.tsx index ec275a707ba..10cfee3ae3c 100644 --- a/packages/ra-ui-materialui/src/input/FileInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/FileInput.stories.tsx @@ -117,7 +117,7 @@ export const CustomRemoveIcon = () => ( const i18nProvider = polyglotI18nProvider(() => englishMessages); const Wrapper = ({ children }) => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="posts"> <SimpleForm>{children}</SimpleForm> </Create> diff --git a/packages/ra-ui-materialui/src/input/ImageInput.stories.tsx b/packages/ra-ui-materialui/src/input/ImageInput.stories.tsx index a1bdbd51633..1c4b21955bb 100644 --- a/packages/ra-ui-materialui/src/input/ImageInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/ImageInput.stories.tsx @@ -96,7 +96,7 @@ export const CustomRemoveIcon = () => ( const i18nProvider = polyglotI18nProvider(() => englishMessages); const Wrapper = ({ children }) => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="posts"> <SimpleForm>{children}</SimpleForm> </Create> diff --git a/packages/ra-ui-materialui/src/input/NullableBooleanInput.stories.tsx b/packages/ra-ui-materialui/src/input/NullableBooleanInput.stories.tsx index 0e8f5b10af9..1530a27d4ab 100644 --- a/packages/ra-ui-materialui/src/input/NullableBooleanInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/NullableBooleanInput.stories.tsx @@ -25,7 +25,7 @@ export const Disabled = () => ( const i18nProvider = polyglotI18nProvider(() => englishMessages); const Wrapper = ({ children }) => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="posts"> <SimpleForm> {children} diff --git a/packages/ra-ui-materialui/src/input/NumberInput.stories.tsx b/packages/ra-ui-materialui/src/input/NumberInput.stories.tsx index 3ff466adb06..ad294fae9eb 100644 --- a/packages/ra-ui-materialui/src/input/NumberInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/NumberInput.stories.tsx @@ -11,23 +11,27 @@ import { TextInput } from './TextInput'; export default { title: 'ra-ui-materialui/input/NumberInput' }; -export const Basic = () => ( - <AdminContext> +const Wrapper = ({ children }) => ( + <AdminContext defaultTheme="light"> <Create resource="posts" record={{ id: 123, views: 23 }} sx={{ width: 600 }} > - <SimpleForm> - <NumberInput source="views" /> - <FormInspector name="views" /> - </SimpleForm> + <SimpleForm>{children}</SimpleForm> </Create> </AdminContext> ); +export const Basic = () => ( + <Wrapper> + <NumberInput source="views" /> + <FormInspector name="views" /> + </Wrapper> +); + export const Float = () => ( - <AdminContext> + <AdminContext defaultTheme="light"> <Create resource="poi" record={{ id: 123, lat: 48.692054, long: 6.184417 }} @@ -44,180 +48,87 @@ export const Float = () => ( ); export const DefaultValue = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, views: 23 }} - sx={{ width: 600 }} - > - <SimpleForm> - <NumberInput source="views" defaultValue={26} /> - <NumberInput - source="views1" - label="Default 6" - defaultValue={6} - /> - <NumberInput - source="views2" - label="Default 0" - defaultValue={0} - /> - <NumberInput source="views3" label="Default undefined" /> - <FormInspector name="views" /> - <FormInspector name="views1" /> - <FormInspector name="views2" /> - <FormInspector name="views3" /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <NumberInput source="views" defaultValue={26} /> + <NumberInput source="views1" label="Default 6" defaultValue={6} /> + <NumberInput source="views2" label="Default 0" defaultValue={0} /> + <NumberInput source="views3" label="Default undefined" /> + <FormInspector name="views" /> + <FormInspector name="views1" /> + <FormInspector name="views2" /> + <FormInspector name="views3" /> + </Wrapper> ); export const HelperText = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, views: 23 }} - sx={{ width: 600 }} - > - <SimpleForm> - <NumberInput source="views" /> - <NumberInput source="views" helperText={false} /> - <NumberInput - source="views" - helperText="Number of times the post was read" - /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <NumberInput source="views" /> + <NumberInput source="views" helperText={false} /> + <NumberInput + source="views" + helperText="Number of times the post was read" + /> + </Wrapper> ); export const Label = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, views: 23 }} - sx={{ width: 600 }} - > - <SimpleForm> - <NumberInput source="views" /> - <NumberInput source="views" label={false} /> - <NumberInput source="views" label="Number of views" /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <NumberInput source="views" /> + <NumberInput source="views" label={false} /> + <NumberInput source="views" label="Number of views" /> + </Wrapper> ); export const FullWidth = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, views: 23 }} - sx={{ width: 600 }} - > - <SimpleForm> - <NumberInput source="views" label="default" /> - <NumberInput source="views" label="Full Width" fullWidth /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <NumberInput source="views" label="default" /> + <NumberInput source="views" label="Full Width" fullWidth /> + </Wrapper> ); export const Margin = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, views: 23 }} - sx={{ width: 600 }} - > - <SimpleForm> - <NumberInput source="views" label="default (dense)" /> - <NumberInput source="views" label="none" margin="none" /> - <NumberInput source="views" label="normal" margin="normal" /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <NumberInput source="views" label="default (dense)" /> + <NumberInput source="views" label="none" margin="none" /> + <NumberInput source="views" label="normal" margin="normal" /> + </Wrapper> ); export const Variant = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, views: 23 }} - sx={{ width: 600 }} - > - <SimpleForm> - <NumberInput source="views" label="default (filled)" /> - <NumberInput - source="views" - label="outlined" - variant="outlined" - /> - <NumberInput - source="views" - label="standard" - variant="standard" - /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <NumberInput source="views" label="default (filled)" /> + <NumberInput source="views" label="outlined" variant="outlined" /> + <NumberInput source="views" label="standard" variant="standard" /> + </Wrapper> ); export const Step = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, views: 23 }} - sx={{ width: 600 }} - > - <SimpleForm> - <NumberInput source="views" label="No step" /> - <NumberInput source="views" label="Step 0.1" step={0.1} /> - <NumberInput source="views" label="Step 10" step={10} /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <NumberInput source="views" label="No step" /> + <NumberInput source="views" label="Step 0.1" step={0.1} /> + <NumberInput source="views" label="Step 10" step={10} /> + </Wrapper> ); export const MinMax = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, views: 23 }} - sx={{ width: 600 }} - > - <SimpleForm> - <NumberInput source="views" label="No min or max" /> - <NumberInput - source="views" - label="Min 20, max 30" - min={20} - max={30} - /> - <NumberInput source="views" label="Min 50" min={50} /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <NumberInput source="views" label="No min or max" /> + <NumberInput source="views" label="Min 20, max 30" min={20} max={30} /> + <NumberInput source="views" label="Min 50" min={50} /> + </Wrapper> ); export const Required = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, views: 23 }} - sx={{ width: 600 }} - > - <SimpleForm> - <NumberInput source="views" /> - <NumberInput source="views" required /> - <NumberInput source="views" validate={required()} /> - <NumberInput source="views" validate={[required()]} /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <NumberInput source="views" /> + <NumberInput source="views" required /> + <NumberInput source="views" validate={required()} /> + <NumberInput source="views" validate={[required()]} /> + </Wrapper> ); export const Error = () => ( - <AdminContext> + <AdminContext defaultTheme="light"> <Create resource="posts" record={{ id: 123, views: 23 }} @@ -241,24 +152,16 @@ export const Error = () => ( ); export const Sx = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, views: 23 }} - sx={{ width: 600 }} - > - <SimpleForm> - <NumberInput - source="views" - sx={{ - border: 'solid 1px red', - borderRadius: '5px', - '& .MuiInputLabel-root': { fontWeight: 'bold' }, - }} - /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <NumberInput + source="views" + sx={{ + border: 'solid 1px red', + borderRadius: '5px', + '& .MuiInputLabel-root': { fontWeight: 'bold' }, + }} + /> + </Wrapper> ); const FormStateInspector = () => { @@ -300,33 +203,17 @@ const FieldStateInspector = ({ name = 'views' }) => { }; export const FieldState = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, views: 23 }} - sx={{ width: 600 }} - > - <SimpleForm> - <NumberInput source="views" /> - <FormStateInspector /> - <FieldStateInspector /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <NumberInput source="views" /> + <FormStateInspector /> + <FieldStateInspector /> + </Wrapper> ); export const ShouldUnregister = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, views: 23 }} - sx={{ width: 600 }} - > - <SimpleForm> - <NumberInput source="views" shouldUnregister /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <NumberInput source="views" shouldUnregister /> + </Wrapper> ); const SetFocusButton = ({ source }) => { @@ -337,13 +224,9 @@ const SetFocusButton = ({ source }) => { }; export const SetFocus = () => ( - <AdminContext> - <Create resource="posts" sx={{ width: 600 }}> - <SimpleForm> - <TextInput source="title" /> - <NumberInput source="views" /> - <SetFocusButton source="views" /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <TextInput source="title" /> + <NumberInput source="views" /> + <SetFocusButton source="views" /> + </Wrapper> ); diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.stories.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.stories.tsx index ec41052c981..16d09d41b51 100644 --- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.stories.tsx @@ -77,7 +77,11 @@ const dataProvider = testDataProvider({ } as any); export const InsideReferenceArrayInput = () => ( - <AdminContext dataProvider={dataProvider} i18nProvider={i18nProvider}> + <AdminContext + dataProvider={dataProvider} + i18nProvider={i18nProvider} + defaultTheme="light" + > <Create resource="posts" record={{ options: [1, 2] }} @@ -99,6 +103,7 @@ export const InsideReferenceArrayInputWithError = () => ( getList: () => Promise.reject(new Error('fetch error')), }} i18nProvider={i18nProvider} + defaultTheme="light" > <Create resource="posts" @@ -136,7 +141,7 @@ export const Id = () => ( const i18nProvider = polyglotI18nProvider(() => englishMessages); const Wrapper = ({ children }) => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="posts"> <SimpleForm> {children} @@ -176,6 +181,7 @@ export const TranslateChoice = () => { }), } as any } + defaultTheme="light" > <Edit resource="posts" id="1"> <SimpleForm> diff --git a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx index e080109fed7..2996fa0dbec 100644 --- a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx @@ -71,7 +71,11 @@ export const Basic = () => ( ); export const WithAutocompleteInput = () => ( - <AdminContext dataProvider={dataProvider} i18nProvider={i18nProvider}> + <AdminContext + dataProvider={dataProvider} + i18nProvider={i18nProvider} + defaultTheme="light" + > <Form onSubmit={() => {}} defaultValues={{ tag_ids: [1, 3] }}> <ReferenceArrayInput reference="tags" @@ -94,6 +98,7 @@ export const ErrorAutocomplete = () => ( } as unknown) as DataProvider } i18nProvider={i18nProvider} + defaultTheme="light" > <Form onSubmit={() => {}} defaultValues={{ tag_ids: [1, 3] }}> <ReferenceArrayInput @@ -108,7 +113,11 @@ export const ErrorAutocomplete = () => ( ); export const WithSelectArrayInput = () => ( - <AdminContext dataProvider={dataProvider} i18nProvider={i18nProvider}> + <AdminContext + dataProvider={dataProvider} + i18nProvider={i18nProvider} + defaultTheme="light" + > <Form onSubmit={() => {}} defaultValues={{ tag_ids: [1, 3] }}> <ReferenceArrayInput reference="tags" @@ -131,6 +140,7 @@ export const ErrorSelectArray = () => ( } as unknown) as DataProvider } i18nProvider={i18nProvider} + defaultTheme="light" > <Form onSubmit={() => {}} defaultValues={{ tag_ids: [1, 3] }}> <ReferenceArrayInput @@ -145,7 +155,11 @@ export const ErrorSelectArray = () => ( ); export const WithCheckboxGroupInput = () => ( - <AdminContext dataProvider={dataProvider} i18nProvider={i18nProvider}> + <AdminContext + dataProvider={dataProvider} + i18nProvider={i18nProvider} + defaultTheme="light" + > <Form onSubmit={() => {}} defaultValues={{ tag_ids: [1, 3] }}> <ReferenceArrayInput reference="tags" @@ -168,6 +182,7 @@ export const ErrorCheckboxGroupInput = () => ( } as unknown) as DataProvider } i18nProvider={i18nProvider} + defaultTheme="light" > <Form onSubmit={() => {}} defaultValues={{ tag_ids: [1, 3] }}> <ReferenceArrayInput @@ -182,7 +197,11 @@ export const ErrorCheckboxGroupInput = () => ( ); export const WithDatagridInput = () => ( - <AdminContext dataProvider={dataProvider} i18nProvider={i18nProvider}> + <AdminContext + dataProvider={dataProvider} + i18nProvider={i18nProvider} + defaultTheme="light" + > <Form onSubmit={() => {}} defaultValues={{ tag_ids: [1, 3] }}> <ReferenceArrayInput reference="tags" @@ -209,6 +228,7 @@ export const ErrorDatagridInput = () => ( } as unknown) as DataProvider } i18nProvider={i18nProvider} + defaultTheme="light" > <Form onSubmit={() => {}} defaultValues={{ tag_ids: [1, 3] }}> <ReferenceArrayInput @@ -234,7 +254,10 @@ export const DifferentIdTypes = () => { ], }; return ( - <AdminContext dataProvider={fakeRestProvider(fakeData, false)}> + <AdminContext + dataProvider={fakeRestProvider(fakeData, false)} + defaultTheme="light" + > <Edit resource="bands" id={1} sx={{ width: 600 }}> <SimpleForm> <TextInput source="name" fullWidth /> diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.stories.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.stories.tsx index 6ecd1def302..0f460c57146 100644 --- a/packages/ra-ui-materialui/src/input/SelectArrayInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/SelectArrayInput.stories.tsx @@ -38,7 +38,7 @@ const FormInspector = ({ source }) => { }; export const Basic = () => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="users" record={{ roles: ['u001', 'u003'] }} @@ -83,7 +83,7 @@ export const Basic = () => ( ); export const DefaultValue = () => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="users" sx={{ width: 600 }}> <SimpleForm> <SelectArrayInput @@ -103,7 +103,7 @@ export const DefaultValue = () => ( ); export const InsideArrayInput = () => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="users" sx={{ width: 600 }}> <SimpleForm> <ArrayInput @@ -178,7 +178,7 @@ const CreateRole = () => { }; export const CreateProp = () => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="users" record={{ roles: ['u001', 'u003'] }} @@ -207,7 +207,7 @@ export const DifferentIdTypes = () => { }; const dataProvider = fakeRestProvider(fakeData, false); return ( - <AdminContext dataProvider={dataProvider}> + <AdminContext dataProvider={dataProvider} defaultTheme="light"> <Edit resource="bands" id={1} sx={{ width: 600 }}> <SimpleForm> <TextInput source="name" fullWidth /> @@ -233,7 +233,7 @@ export const DifferentSizes = () => { }; const dataProvider = fakeRestProvider(fakeData, false); return ( - <AdminContext dataProvider={dataProvider}> + <AdminContext dataProvider={dataProvider} defaultTheme="light"> <Edit resource="bands" id={1} sx={{ width: 600 }}> <SimpleForm> <TextInput source="name" fullWidth /> @@ -299,6 +299,7 @@ export const TranslateChoice = () => { }), } as any } + defaultTheme="light" > <Edit resource="posts" id="1"> <SimpleForm> diff --git a/packages/ra-ui-materialui/src/input/SelectInput.stories.tsx b/packages/ra-ui-materialui/src/input/SelectInput.stories.tsx index b0cccbbec0e..a8200aeb199 100644 --- a/packages/ra-ui-materialui/src/input/SelectInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/SelectInput.stories.tsx @@ -49,6 +49,7 @@ export const InitialValue = () => ( getOne: () => Promise.resolve({ data: { id: 1, gender: 'F' } }), } as any } + defaultTheme="light" > <Edit resource="posts" id="1"> <SimpleForm> @@ -176,6 +177,7 @@ const Wrapper = ({ children, onSuccess = console.log }) => ( Promise.resolve({ data: { id: 1, ...params.data } }), } as any } + defaultTheme="light" > <Create resource="posts" mutationOptions={{ onSuccess }}> <SimpleForm @@ -443,6 +445,7 @@ export const TranslateChoice = () => { }), } as any } + defaultTheme="light" > <Edit resource="posts" id="1"> <SimpleForm> diff --git a/packages/ra-ui-materialui/src/input/TextInput.stories.tsx b/packages/ra-ui-materialui/src/input/TextInput.stories.tsx index 45b1925ac7d..44ceb043e83 100644 --- a/packages/ra-ui-materialui/src/input/TextInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/TextInput.stories.tsx @@ -12,134 +12,86 @@ import { FormInspector } from './common'; export default { title: 'ra-ui-materialui/input/TextInput' }; -export const Basic = () => ( - <AdminContext> +export const Wrapper = ({ children }) => ( + <AdminContext defaultTheme="light"> <Create resource="posts" record={{ id: 123, title: 'Lorem ipsum' }} sx={{ width: 600 }} > - <SimpleForm> - <TextInput source="title" /> - <FormInspector /> - </SimpleForm> + <SimpleForm>{children}</SimpleForm> </Create> </AdminContext> ); +export const Basic = () => ( + <Wrapper> + <TextInput source="title" /> + <FormInspector /> + </Wrapper> +); + export const DefaultValue = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, title: 'Lorem ipsum' }} - sx={{ width: 600 }} - > - <SimpleForm> - <TextInput source="title" defaultValue="hello" /> - <TextInput - source="title1" - label="Default john" - defaultValue="john" - /> - <TextInput - source="title2" - label="Default empty string" - defaultValue="" - /> - <TextInput source="title3" label="Default undefined" /> - <FormInspector name="title" /> - <FormInspector name="title1" /> - <FormInspector name="title2" /> - <FormInspector name="title3" /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <TextInput source="title" defaultValue="hello" /> + <TextInput source="title1" label="Default john" defaultValue="john" /> + <TextInput + source="title2" + label="Default empty string" + defaultValue="" + /> + <TextInput source="title3" label="Default undefined" /> + <FormInspector name="title" /> + <FormInspector name="title1" /> + <FormInspector name="title2" /> + <FormInspector name="title3" /> + </Wrapper> ); export const HelperText = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, title: 'Lorem ipsum' }} - sx={{ width: 600 }} - > - <SimpleForm> - <TextInput source="title" /> - <TextInput source="title" helperText={false} /> - <TextInput - source="title" - helperText="Number of times the post was read" - /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <TextInput source="title" /> + <TextInput source="title" helperText={false} /> + <TextInput + source="title" + helperText="Number of times the post was read" + /> + </Wrapper> ); export const Label = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, title: 'Lorem ipsum' }} - sx={{ width: 600 }} - > - <SimpleForm> - <TextInput source="title" /> - <TextInput source="title" label={false} /> - <TextInput source="title" label="label of title" /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <TextInput source="title" /> + <TextInput source="title" label={false} /> + <TextInput source="title" label="label of title" /> + </Wrapper> ); export const FullWidth = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, title: 'Lorem ipsum' }} - sx={{ width: 600 }} - > - <SimpleForm> - <TextInput source="title" label="default" /> - <TextInput source="title" label="Full Width" fullWidth /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <TextInput source="title" label="default" /> + <TextInput source="title" label="Full Width" fullWidth /> + </Wrapper> ); export const Margin = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, title: 'Lorem ipsum' }} - sx={{ width: 600 }} - > - <SimpleForm> - <TextInput source="title" label="default (dense)" /> - <TextInput source="title" label="none" margin="none" /> - <TextInput source="title" label="normal" margin="normal" /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <TextInput source="title" label="default (dense)" /> + <TextInput source="title" label="none" margin="none" /> + <TextInput source="title" label="normal" margin="normal" /> + </Wrapper> ); export const Variant = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, title: 'Lorem ipsum' }} - sx={{ width: 600 }} - > - <SimpleForm> - <TextInput source="title" label="default (filled)" /> - <TextInput source="title" label="outlined" variant="outlined" /> - <TextInput source="title" label="standard" variant="standard" /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <TextInput source="title" label="default (filled)" /> + <TextInput source="title" label="outlined" variant="outlined" /> + <TextInput source="title" label="standard" variant="standard" /> + </Wrapper> ); export const Required = () => ( - <AdminContext> + <AdminContext defaultTheme="light"> <Create resource="posts" record={{ id: 123, title: 'Lorem ipsum' }} @@ -156,7 +108,7 @@ export const Required = () => ( ); export const Error = () => ( - <AdminContext> + <AdminContext defaultTheme="light"> <Create resource="posts" record={{ id: 123, title: 'Lorem ipsum' }} @@ -180,28 +132,20 @@ export const Error = () => ( ); export const Sx = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, title: 'Lorem ipsum' }} - sx={{ width: 600 }} - > - <SimpleForm> - <TextInput - source="title" - sx={{ - border: 'solid 1px red', - borderRadius: '5px', - '& .MuiInputLabel-root': { fontWeight: 'bold' }, - }} - /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <TextInput + source="title" + sx={{ + border: 'solid 1px red', + borderRadius: '5px', + '& .MuiInputLabel-root': { fontWeight: 'bold' }, + }} + /> + </Wrapper> ); export const ExtraProps = () => ( - <AdminContext> + <AdminContext defaultTheme="light"> <Create resource="posts" sx={{ width: 600 }}> <SimpleForm> <TextInput @@ -252,19 +196,11 @@ const FieldStateInspector = ({ name = 'title' }) => { }; export const FieldState = () => ( - <AdminContext> - <Create - resource="posts" - record={{ id: 123, title: 'Lorem ipsum' }} - sx={{ width: 600 }} - > - <SimpleForm> - <TextInput source="title" /> - <FormStateInspector /> - <FieldStateInspector /> - </SimpleForm> - </Create> - </AdminContext> + <Wrapper> + <TextInput source="title" /> + <FormStateInspector /> + <FieldStateInspector /> + </Wrapper> ); const AlwaysOnToolbar = ( @@ -281,6 +217,7 @@ export const ValueUndefined = ({ onSuccess = console.log }) => ( update: (resource, { data }) => Promise.resolve({ data }), } as any } + defaultTheme="light" > <Edit resource="posts" @@ -305,6 +242,7 @@ export const ValueNull = ({ onSuccess = console.log }) => ( update: (resource, { data }) => Promise.resolve({ data }), } as any } + defaultTheme="light" > <Edit resource="posts" @@ -321,7 +259,7 @@ export const ValueNull = ({ onSuccess = console.log }) => ( ); export const Parse = ({ onSuccess = console.log }) => ( - <AdminContext> + <AdminContext defaultTheme="light"> <Create resource="posts" record={{ id: 123, title: 'Lorem ipsum' }} diff --git a/packages/ra-ui-materialui/src/input/TimeInput.stories.tsx b/packages/ra-ui-materialui/src/input/TimeInput.stories.tsx index 29eef47bdfc..c5b82437129 100644 --- a/packages/ra-ui-materialui/src/input/TimeInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/TimeInput.stories.tsx @@ -31,7 +31,7 @@ export const Disabled = () => ( const i18nProvider = polyglotI18nProvider(() => englishMessages); const Wrapper = ({ children }) => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="posts"> <SimpleForm> {children} diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputs.stories.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputs.stories.tsx index eb42b389914..4e8976053f7 100644 --- a/packages/ra-ui-materialui/src/input/TranslatableInputs.stories.tsx +++ b/packages/ra-ui-materialui/src/input/TranslatableInputs.stories.tsx @@ -64,7 +64,7 @@ export const Sx = () => ( const i18nProvider = polyglotI18nProvider(() => englishMessages); const Wrapper = ({ children }) => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="posts"> <SimpleForm> {children} diff --git a/packages/ra-ui-materialui/src/input/inputs.stories.tsx b/packages/ra-ui-materialui/src/input/inputs.stories.tsx index 036bae16762..e8d4af02464 100644 --- a/packages/ra-ui-materialui/src/input/inputs.stories.tsx +++ b/packages/ra-ui-materialui/src/input/inputs.stories.tsx @@ -35,7 +35,7 @@ export default { const i18nProvider = polyglotI18nProvider(() => englishMessages); export const AllInputs = () => ( - <AdminContext i18nProvider={i18nProvider}> + <AdminContext i18nProvider={i18nProvider} defaultTheme="light"> <Create resource="posts" record={{ id: 1, title: 'Lorem Ipsum', updated_at: new Date() }} From c65b7c5d7d6a143e30acc6939b72eae4bfe4110d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Zaninotto?= <fzaninotto@gmail.com> Date: Mon, 4 Dec 2023 12:32:38 +0100 Subject: [PATCH 22/22] [no ci] Simplify upgrade guide --- docs/Upgrade.md | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/docs/Upgrade.md b/docs/Upgrade.md index 484b23be609..dbe61783248 100644 --- a/docs/Upgrade.md +++ b/docs/Upgrade.md @@ -20,7 +20,7 @@ If you previously relied on the fact that the rows were not clickable by default ## Dark Theme Is Available By Default -In addition to the light theme, React-admin v5 includes a [dark theme](https://marmelab.com/react-admin/AppTheme.html#light-and-dark-themes), renders a theme switcher in the app bar, and chooses the default theme based on the user OS preferences. +In addition to the light theme, React-admin v5 includes a [dark theme](https://marmelab.com/react-admin/AppTheme.html#light-and-dark-themes), renders a theme switcher in the app bar, and chooses the default theme based on the user OS preferences. If you don't need the dark mode feature, you'll have to explicitly disable it: @@ -31,17 +31,9 @@ If you don't need the dark mode feature, you'll have to explicitly disable it: </Admin> ``` -If the `theme` prop is defined but not the `darkTheme` prop, the theme switcher button in the app bar isn't displayed: - -```diff --<Admin> -+<Admin theme={myMainTheme}> - ... -</Admin> -``` ## Links are now underlined by default - -In the default theme, links are now underlined by default. + +In the default theme, links are now underlined by default. If you use the `<Link>` component from `react-admin`, and you want to remove the underline, set the `underline` prop to `none`: