From 9ea7c8fa0688385575ae50a6c9639f2051c055f1 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Thu, 2 Mar 2023 11:00:34 +0100
Subject: [PATCH] Fix `Labeled` ignores `fullWidth` when `label` is `false`

---
 .../ra-ui-materialui/src/Labeled.stories.tsx  | 29 +++++++++++++
 packages/ra-ui-materialui/src/Labeled.tsx     | 41 +++++++++----------
 2 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/packages/ra-ui-materialui/src/Labeled.stories.tsx b/packages/ra-ui-materialui/src/Labeled.stories.tsx
index ec261588b42..2719ce865a4 100644
--- a/packages/ra-ui-materialui/src/Labeled.stories.tsx
+++ b/packages/ra-ui-materialui/src/Labeled.stories.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { RecordContextProvider, ResourceContext } from 'ra-core';
 import { TextField } from './field';
 import { Labeled } from './Labeled';
+import { Box, Stack } from '@mui/material';
 
 export default { title: 'ra-ui-materialui/detail/Labeled' };
 
@@ -71,3 +72,31 @@ export const NoDoubleLabel = () => (
         </RecordContextProvider>
     </ResourceContext.Provider>
 );
+
+export const FullWidth = () => (
+    <Stack alignItems="flex-start">
+        <ResourceContext.Provider value="books">
+            <RecordContextProvider value={record}>
+                <Labeled label="title" fullWidth>
+                    <Box border="1px solid">
+                        <TextField source="title" />
+                    </Box>
+                </Labeled>
+            </RecordContextProvider>
+        </ResourceContext.Provider>
+    </Stack>
+);
+
+export const FullWidthNoLabel = () => (
+    <Stack alignItems="flex-start">
+        <ResourceContext.Provider value="books">
+            <RecordContextProvider value={record}>
+                <Labeled label={false} fullWidth>
+                    <Box border="1px solid">
+                        <TextField source="title" />
+                    </Box>
+                </Labeled>
+            </RecordContextProvider>
+        </ResourceContext.Provider>
+    </Stack>
+);
diff --git a/packages/ra-ui-materialui/src/Labeled.tsx b/packages/ra-ui-materialui/src/Labeled.tsx
index c49029df4c3..0dae95c0e1d 100644
--- a/packages/ra-ui-materialui/src/Labeled.tsx
+++ b/packages/ra-ui-materialui/src/Labeled.tsx
@@ -31,22 +31,22 @@ export const Labeled = ({
     resource,
     source,
     ...rest
-}: LabeledProps) =>
-    label !== false &&
-    children.props.label !== false &&
-    typeof children.type !== 'string' &&
-    // @ts-ignore
-    children.type?.displayName !== 'Labeled' &&
-    // @ts-ignore
-    children.type?.displayName !== 'Labeled' ? (
-        <Root
-            // @ts-ignore https://github.com/mui/material-ui/issues/29875
-            component={component}
-            className={clsx(className, {
-                [LabeledClasses.fullWidth]: fullWidth,
-            })}
-            {...rest}
-        >
+}: LabeledProps) => (
+    <Root
+        // @ts-ignore https://github.com/mui/material-ui/issues/29875
+        component={component}
+        className={clsx(className, {
+            [LabeledClasses.fullWidth]: fullWidth,
+        })}
+        {...rest}
+    >
+        {label !== false &&
+        children.props.label !== false &&
+        typeof children.type !== 'string' &&
+        // @ts-ignore
+        children.type?.displayName !== 'Labeled' &&
+        // @ts-ignore
+        children.type?.displayName !== 'Labeled' ? (
             <Typography color={color} className={LabeledClasses.label}>
                 <FieldTitle
                     label={label || children.props.label}
@@ -55,11 +55,10 @@ export const Labeled = ({
                     isRequired={isRequired}
                 />
             </Typography>
-            {children}
-        </Root>
-    ) : (
-        <div className={className}>{children}</div>
-    );
+        ) : null}
+        {children}
+    </Root>
+);
 
 Labeled.displayName = 'Labeled';