From 145583043fa7cec2f1e2c5c5638fdc75847f21af Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 20 May 2022 11:01:08 +0200
Subject: [PATCH] Add sx prop to TabbedForm and improve doc
---
docs/TabbedForm.md | 6 +++---
packages/ra-ui-materialui/src/form/TabbedForm.tsx | 5 +++--
packages/ra-ui-materialui/src/form/TabbedFormView.tsx | 8 +++++++-
3 files changed, 13 insertions(+), 6 deletions(-)
diff --git a/docs/TabbedForm.md b/docs/TabbedForm.md
index b9a9c29d773..8002241c6f0 100644
--- a/docs/TabbedForm.md
+++ b/docs/TabbedForm.md
@@ -176,13 +176,11 @@ export const PostCreate = () => {
Pass an `sx` prop to customize the style of the main component and the underlying elements.
-The most common usage is to limit the width of the form, to avoid long inputs on large screens:
-
{% raw %}
```jsx
export const PostCreate = () => (
<Create>
- <TabbedForm sx={{ maxWidth: 600 }}>
+ <TabbedForm sx={{ border: '1px solid red' }}>
...
</TabbedForm>
</Create>
@@ -190,6 +188,8 @@ export const PostCreate = () => (
```
{% endraw %}
+**Tip:** If you want to customize the _content_ of the tabs instead, for example to limit the width of the form, you should rather add an `sx` prop to the [`<FormTab>` component](#formtab).
+
## `syncWithLocation`
When the user clicks on a tab header, react-admin changes the URL to enable the back button.
diff --git a/packages/ra-ui-materialui/src/form/TabbedForm.tsx b/packages/ra-ui-materialui/src/form/TabbedForm.tsx
index d318e097ec9..58e74cbf511 100644
--- a/packages/ra-ui-materialui/src/form/TabbedForm.tsx
+++ b/packages/ra-ui-materialui/src/form/TabbedForm.tsx
@@ -16,7 +16,7 @@ import {
} from 'ra-core';
import get from 'lodash/get';
-import { TabbedFormView } from './TabbedFormView';
+import { TabbedFormView, TabbedFormViewProps } from './TabbedFormView';
import { useFormRootPath } from './useFormRootPath';
/**
@@ -113,7 +113,8 @@ export interface TabbedFormProps
Omit<
HtmlHTMLAttributes<HTMLFormElement>,
'defaultValue' | 'onSubmit' | 'children'
- > {
+ >,
+ Partial<TabbedFormViewProps> {
children: ReactNode;
className?: string;
defaultValues?: any;
diff --git a/packages/ra-ui-materialui/src/form/TabbedFormView.tsx b/packages/ra-ui-materialui/src/form/TabbedFormView.tsx
index 26b25de20a7..0a19212d4a1 100644
--- a/packages/ra-ui-materialui/src/form/TabbedFormView.tsx
+++ b/packages/ra-ui-materialui/src/form/TabbedFormView.tsx
@@ -33,6 +33,7 @@ export const TabbedFormView = (props: TabbedFormViewProps): ReactElement => {
syncWithLocation = true,
tabs = DefaultTabs,
toolbar = DefaultToolbar,
+ ...rest
} = props;
const location = useLocation();
const resolvedPath = useResolvedPath('');
@@ -58,7 +59,10 @@ export const TabbedFormView = (props: TabbedFormViewProps): ReactElement => {
);
return (
- <Root className={clsx('tabbed-form', className)}>
+ <Root
+ className={clsx('tabbed-form', className)}
+ {...sanitizeRestProps(rest)}
+ >
{syncWithLocation ? (
<Routes>
<Route path="/*" element={renderTabHeaders()} />
@@ -144,3 +148,5 @@ const Root = styled('div', {
color: theme.palette.error.main,
},
}));
+
+const sanitizeRestProps = ({ record, resource, ...rest }: any) => rest;