Merge pull request #8689 from marmelab/fix-Labeled-no-label-fullWidth

Fix `Labeled` ignores `fullWidth` when `label` is `false`
marmelab · Mar 2, 2023 · 8f76cd3 · 8f76cd3
2 parents 41ad493 + 9ea7c8f
commit 8f76cd3
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 21 deletions.
diff --git 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
@@ -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';