Merge pull request #8525 from marmelab/Add-TabbedForm.Tab-and-TabbedShowLayout.Tab-shortcuts

Add TabbedForm.Tab and TabbedShowLayout.Tab shortcuts

Author: antoinefricker

docs/AuthRBAC.md

@@ -630,7 +630,7 @@ const ProductShow = () => (
 
 ### `<Tab>`
 
-Replacement for the show `<Tab>` that only renders a tab if the user has the right permissions.
+Replacement for the `<TabbedShowLayout.Tab>` that only renders a tab if the user has the right permissions.
 
 Add a `name` prop to the Tab to define the resource on which the user needs to have the 'read' permissions for.
 

docs/Permissions.md

@@ -178,14 +178,14 @@ export const UserEdit = () => {
     return (
         <Edit title={<UserTitle />}>
             <TabbedForm defaultValue={{ role: 'user' }}>
-                <FormTab label="user.form.summary">
+                <TabbedForm.Tab label="user.form.summary">
                     {permissions === 'admin' && <TextInput disabled source="id" />}
                     <TextInput source="name" validate={required()} />
-                </FormTab>
+                </TabbedForm.Tab>
                 {permissions === 'admin' &&
-                    <FormTab label="user.form.security">
+                    <TabbedForm.Tab label="user.form.security">
                         <TextInput source="role" validate={required()} />
-                    </FormTab>}
+                    </TabbedForm.Tab>}
             </TabbedForm>
         </Edit>
     );

docs/Show.md

@@ -80,12 +80,12 @@ export const PostShow = () => (
     <Show>
 -       <SimpleShowLayout>
 +       <TabbedShowLayout>
-+           <Tab label="Main>
++           <TabbedShowLayout.Tab label="Main>
                 <TextField source="title" />
                 <TextField source="teaser" />
                 <RichTextField source="body" />
                 <DateField label="Publication date" source="created_at" />
-+           </Tab>
++           </TabbedShowLayout.Tab>
 -       </SimpleShowLayout>
 +       </TabbedShowLayout>
     </Show>
@@ -362,25 +362,25 @@ export const PostShow = () => {
 ```
 {% endraw %}
 
-This also works inside a `TabbedShowLayout`, and you can hide a `Tab` completely:
+This also works inside a `<TabbedShowLayout>`, and you can hide a `TabbedShowLayout.Tab` completely:
 
 {% raw %}
 ```jsx
-import { Show, TabbedShowLayout, Tab, TextField } from 'react-admin';
+import { Show, TabbedShowLayout, TextField } from 'react-admin';
 
 export const UserShow = () => {
     const { permissions } = usePermissions();
     return (
         <Show>
             <TabbedShowLayout>
-                <Tab label="user.form.summary">
+                <TabbedShowLayout.Tab label="user.form.summary">
                     {permissions === 'admin' && <TextField source="id" />}
                     <TextField source="name" />
-                </Tab>
+                </TabbedShowLayout.Tab>
                 {permissions === 'admin' &&
-                    <Tab label="user.form.security">
+                    <TabbedShowLayout.Tab label="user.form.security">
                         <TextField source="role" />
-                    </Tab>}
+                    </TabbedShowLayout.Tab>}
             </TabbedShowLayout>
         </Show>
     );

docs/ShowTutorial.md

@@ -358,27 +358,27 @@ const BookShow = () => (
 When a Show view has to display a lot of fields, the `<SimpleShowLayout>` component ends up in very long page that is not user-friendly. You can use [the `<TabbedShowLayout>` component](./TabbedShowLayout.md) instead, which is a variant of the `<SimpleShowLayout>` component that displays the fields in tabs. 
 
 ```jsx
-import { Show, TabbedShowLayout, Tab, TextField, DateField, WithRecord } from 'react-admin';
+import { Show, TabbedShowLayout, TextField, DateField, WithRecord } from 'react-admin';
 import StarIcon from '@mui/icons-material/Star';
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import PersonPinIcon from '@mui/icons-material/PersonPin';
 
 const BookShow = () => (
     <Show>
         <TabbedShowLayout>
-            <Tab label="Description" icon={<FavoriteIcon />}>
+            <TabbedShowLayout.Tab label="Description" icon={<FavoriteIcon />}>
                 <TextField label="Title" source="title" />
                 <ReferenceField label="Author" source="author_id">
                     <TextField source="name" />
                 </ReferenceField>
                 <DateField label="Publication Date" source="published_at" />
-            </Tab>
-            <Tab label="User ratings" icon={<PersonPinIcon />}>
+            </TabbedShowLayout.Tab>
+            <TabbedShowLayout.Tab label="User ratings" icon={<PersonPinIcon />}>
                 <WithRecord label="Rating" render={record => <>
                     {[...Array(record.rating)].map((_, index) => <StarIcon key={index} />)}
                 </>} />
                 <DateField label="Last rating" source="last_rated_at" />
-            </Tab>
+            </TabbedShowLayout.Tab>
         </TabbedShowLayout>
     </Show>
 );