Merge pull request #10369 from marmelab/demo-tabs

[Demo] Showcase tabs with icons

Author: djhi

examples/demo/src/products/ProductEdit.tsx

@@ -13,6 +13,10 @@ import {
     TextInput,
     useRecordContext,
 } from 'react-admin';
+import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
+import AspectRatioIcon from '@mui/icons-material/AspectRatio';
+import EditNoteIcon from '@mui/icons-material/EditNote';
+import ReviewIcon from '@mui/icons-material/Comment';
 
 import { ProductEditDetails } from './ProductEditDetails';
 import CustomerReferenceField from '../visitors/CustomerReferenceField';
@@ -37,7 +41,9 @@ const ProductEdit = () => (
         <TabbedForm>
             <TabbedForm.Tab
                 label="resources.products.tabs.image"
-                sx={{ maxWidth: '40em' }}
+                sx={{ maxWidth: '40em', minHeight: 48 }}
+                iconPosition="start"
+                icon={<PhotoCameraIcon />}
             >
                 <Poster />
                 <TextInput source="image" validate={req} />
@@ -46,14 +52,18 @@ const ProductEdit = () => (
             <TabbedForm.Tab
                 label="resources.products.tabs.details"
                 path="details"
-                sx={{ maxWidth: '40em' }}
+                sx={{ maxWidth: '40em', minHeight: 48 }}
+                iconPosition="start"
+                icon={<AspectRatioIcon />}
             >
                 <ProductEditDetails />
             </TabbedForm.Tab>
             <TabbedForm.Tab
                 label="resources.products.tabs.description"
                 path="description"
-                sx={{ maxWidth: '40em' }}
+                sx={{ maxWidth: '40em', minHeight: 48 }}
+                iconPosition="start"
+                icon={<EditNoteIcon />}
             >
                 <RichTextInput source="description" label="" validate={req} />
             </TabbedForm.Tab>
@@ -67,6 +77,9 @@ const ProductEdit = () => (
                     />
                 }
                 path="reviews"
+                sx={{ minHeight: 48 }}
+                iconPosition="start"
+                icon={<ReviewIcon />}
             >
                 <ReferenceManyField
                     reference="reviews"

examples/demo/src/visitors/FullNameField.tsx

@@ -30,6 +30,8 @@ const FullNameField = (props: Props) => {
                     mr: 1,
                     mt: -0.5,
                     mb: -0.5,
+                    textDecoration: 'underline',
+                    textDecorationColor: '#bdbdbd',
                 }}
             />
             {record.first_name} {record.last_name}