Add <TabbedForm.Tab> and <TabbedShowLayout.Tab> shortcuts

[fzaninotto]

Problem

<Tab> and <FormTab> aren't easy to remember.

Solution

Expose the tab component as a sub component of the tabbed components, just like we do with the <Menu.Item>. This introduces two components:

• <TabbedForm.Tab>
• <TabbedShowLayout.Tab>

-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>
    );
};

[slax57]

2 linter warnings

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react-admin	🔄 Building (Inspect)		Dec 20, 2022 at 2:47PM (UTC)