Merge pull request #10740 from marmelab/fix-inout-label-false

Fix outlined inputs when label is false

Author: slax57

packages/ra-ui-materialui/src/form/SimpleForm.stories.tsx

@@ -6,7 +6,13 @@ import {
     testDataProvider,
     TestMemoryRouter,
 } from 'ra-core';
-import { Stack, ThemeProvider, createTheme } from '@mui/material';
+import {
+    Stack,
+    Grid,
+    ThemeProvider,
+    createTheme,
+    Typography,
+} from '@mui/material';
 
 import { AdminContext } from '../AdminContext';
 import { Edit } from '../detail';
@@ -80,6 +86,37 @@ export const StackProps = () => (
     </Wrapper>
 );
 
+const LabelAndInput = ({ label, input }) => (
+    <Grid container columnSpacing={2}>
+        <Grid item xs={3} textAlign={'right'} alignContent="space-around">
+            <Typography variant="body2" color="text.secondary">
+                {label}
+            </Typography>
+        </Grid>
+        <Grid item xs={9}>
+            {React.cloneElement(input, {
+                label: '',
+                helperText: false,
+                margin: 'none',
+                variant: 'outlined',
+            })}
+        </Grid>
+    </Grid>
+);
+
+export const SideLabel = () => (
+    <Wrapper>
+        <SimpleForm alignItems="center" gap={1}>
+            <LabelAndInput label="Title" input={<TextInput source="title" />} />
+            <LabelAndInput
+                label="Author"
+                input={<TextInput source="author" />}
+            />
+            <LabelAndInput label="Year" input={<NumberInput source="year" />} />
+        </SimpleForm>
+    </Wrapper>
+);
+
 export const NoToolbar = () => (
     <Wrapper>
         <SimpleForm toolbar={false}>

packages/ra-ui-materialui/src/input/AutocompleteInput.tsx

@@ -632,12 +632,14 @@ If you provided a React element for the optionText prop, you must also provide t
                         <TextField
                             name={field.name}
                             label={
-                                <FieldTitle
-                                    label={label}
-                                    source={source}
-                                    resource={resourceProp}
-                                    isRequired={isRequired}
-                                />
+                                label !== '' && label !== false ? (
+                                    <FieldTitle
+                                        label={label}
+                                        source={source}
+                                        resource={resourceProp}
+                                        isRequired={isRequired}
+                                    />
+                                ) : null
                             }
                             error={!!fetchError || invalid}
                             helperText={

packages/ra-ui-materialui/src/input/DateInput.stories.tsx

@@ -103,6 +103,12 @@ export const Parse = ({ simpleFormProps }) => (
     </Wrapper>
 );
 
+export const OutlinedNoLabel = () => (
+    <Wrapper>
+        <DateInput source="publishedAt" label={false} variant="outlined" />
+    </Wrapper>
+);
+
 export const ExternalChanges = ({
     dateInputProps = {},
     simpleFormProps = {

packages/ra-ui-materialui/src/input/DateInput.tsx

@@ -205,12 +205,14 @@ export const DateInput = ({
                 ) : null
             }
             label={
-                <FieldTitle
-                    label={label}
-                    source={source}
-                    resource={resource}
-                    isRequired={isRequired}
-                />
+                label !== '' && label !== false ? (
+                    <FieldTitle
+                        label={label}
+                        source={source}
+                        resource={resource}
+                        isRequired={isRequired}
+                    />
+                ) : null
             }
             InputLabelProps={defaultInputLabelProps}
             {...sanitizeInputRestProps(rest)}

packages/ra-ui-materialui/src/input/DateTimeInput.stories.tsx

@@ -48,6 +48,12 @@ export const ReadOnly = () => (
     </Wrapper>
 );
 
+export const OutlinedNoLabel = () => (
+    <Wrapper>
+        <DateTimeInput source="published" label={false} variant="outlined" />
+    </Wrapper>
+);
+
 export const ExternalChanges = ({
     simpleFormProps = {
         defaultValues: { published: '2021-09-11 20:00:00' },

packages/ra-ui-materialui/src/input/DateTimeInput.tsx

@@ -164,12 +164,14 @@ export const DateTimeInput = ({
                 ) : null
             }
             label={
-                <FieldTitle
-                    label={label}
-                    source={source}
-                    resource={resource}
-                    isRequired={isRequired}
-                />
+                label !== '' && label !== false ? (
+                    <FieldTitle
+                        label={label}
+                        source={source}
+                        resource={resource}
+                        isRequired={isRequired}
+                    />
+                ) : null
             }
             InputLabelProps={defaultInputLabelProps}
             {...sanitizeInputRestProps(rest)}

packages/ra-ui-materialui/src/input/NullableBooleanInput.stories.tsx

@@ -30,6 +30,16 @@ export const ReadOnly = () => (
     </Wrapper>
 );
 
+export const outlinedNoLabel = () => (
+    <Wrapper>
+        <NullableBooleanInput
+            source="published"
+            label={false}
+            variant="outlined"
+        />
+    </Wrapper>
+);
+
 const i18nProvider = polyglotI18nProvider(() => englishMessages);
 
 const Wrapper = ({ children }) => (

packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx

@@ -74,12 +74,14 @@ export const NullableBooleanInput = (inProps: NullableBooleanInputProps) => {
             readOnly={readOnly}
             margin={margin}
             label={
-                <FieldTitle
-                    label={label}
-                    source={source}
-                    resource={resource}
-                    isRequired={isRequired}
-                />
+                label !== '' && label !== false ? (
+                    <FieldTitle
+                        label={label}
+                        source={source}
+                        resource={resource}
+                        isRequired={isRequired}
+                    />
+                ) : null
             }
             error={invalid}
             helperText={

packages/ra-ui-materialui/src/input/NumberInput.stories.tsx

@@ -202,6 +202,12 @@ export const Sx = () => (
     </Wrapper>
 );
 
+export const OutlinedNoLabel = () => (
+    <Wrapper>
+        <NumberInput source="views" label={false} variant="outlined" />
+    </Wrapper>
+);
+
 const FormStateInspector = () => {
     const { touchedFields, isDirty, dirtyFields, isValid, errors } =
         useFormState();

packages/ra-ui-materialui/src/input/NumberInput.tsx

@@ -149,12 +149,14 @@ export const NumberInput = ({
                 ) : null
             }
             label={
-                <FieldTitle
-                    label={label}
-                    source={source}
-                    resource={resource}
-                    isRequired={isRequired}
-                />
+                label !== '' && label !== false ? (
+                    <FieldTitle
+                        label={label}
+                        source={source}
+                        resource={resource}
+                        isRequired={isRequired}
+                    />
+                ) : null
             }
             margin={margin}
             inputProps={{ ...inputProps, readOnly }}