Merge pull request #9704 from marmelab/input-fullWidth

Make all inputs fullWidth by default
marmelab · Mar 13, 2024 · 4992470 · 4992470
2 parents 8d414a4 + 48d332e
commit 4992470
Show file tree

Hide file tree

Showing 79 changed files with 676 additions and 451 deletions.
diff --git a/docs/AppTheme.md b/docs/AppTheme.md
@@ -484,6 +484,9 @@ const defaultThemeInvariants = {
     },
     components: {
         MuiAutocomplete: {
+            defaultProps: {
+                fullWidth: true,
+            },
             variants: [
                 {
                     props: {},
@@ -498,6 +501,7 @@ const defaultThemeInvariants = {
                 variant: 'filled' as const,
                 margin: 'dense' as const,
                 size: 'small' as const,
+                fullWidth: true,
             },
             variants: [
                 {
@@ -513,6 +517,17 @@ const defaultThemeInvariants = {
                 variant: 'filled' as const,
                 margin: 'dense' as const,
                 size: 'small' as const,
+                fullWidth: true,
+            },
+        },
+        RaSimpleFormIterator: {
+            defaultProps: {
+                fullWidth: true,
+            },
+        },
+        RaTranslatableInputs: {
+            defaultProps: {
+                fullWidth: true
             },
         },
     },

diff --git a/docs/AutocompleteArrayInput.md b/docs/AutocompleteArrayInput.md
@@ -304,7 +304,6 @@ const LanguageChangingAuthorInput = () => {
     return (
         <ReferenceArrayInput reference="authors" source="author">
             <AutocompleteArrayInput
-                fullWidth
                 optionText="name"
                 onChange={handleChange}
                 label="Authors"

diff --git a/docs/AutocompleteInput.md b/docs/AutocompleteInput.md
@@ -342,11 +342,7 @@ const LanguageChangingAuthorInput = () => {
     };
     return (
         <ReferenceInput reference="authors" source="author">
-            <AutocompleteInput
-                fullWidth
-                optionText="name"
-                onChange={handleChange}
-            />
+            <AutocompleteInput optionText="name" onChange={handleChange} />
         </ReferenceInput>
     );
 };

diff --git a/docs/Create.md b/docs/Create.md
@@ -26,7 +26,7 @@ import RichTextInput from 'ra-input-rich-text';
 export const PostCreate = () => (
     <Create>
         <SimpleForm>
-            <TextInput source="title" validate={[required()]} fullWidth />
+            <TextInput source="title" validate={[required()]} />
             <TextInput source="teaser" multiline={true} label="Short description" />
             <RichTextInput source="body" />
             <DateInput label="Publication date" source="published_at" defaultValue={new Date()} />

diff --git a/docs/DateInput.md b/docs/DateInput.md
@@ -86,7 +86,7 @@ export const EventEdit = () => (
 
 | Prop         | Required | Type              | Default                                | Description                                                                                                                                                                                  |
 | ------------ | -------- | ----------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `fullWidth`  | -        | boolean           | `false`                                | If `true`, the input will expand to fill the form width                                                                                                                                      |
+| `fullWidth`  | -        | boolean           | `true`                                | If `false`, the input will not expand to fill the form width                                                                                                                                      |
 | `helperText` | -        | string            | -                                      | Text to be displayed under the input                                                                                                                                                         |
 | `mask`       | -        | string            | -                                      | Alias for the MUI [`format`](https://mui.com/x/api/date-pickers/date-picker/#DatePicker-prop-format) prop. Format of the date/time when rendered in the input. Defaults to localized format. |
 | `parse`      | -        | Function          | `value => value === '' ? null : value` | Callback taking the input value, and returning the value you want stored in the form state.                                                                                                  |

diff --git a/docs/DateTimeInput.md b/docs/DateTimeInput.md
@@ -73,7 +73,7 @@ export const EventEdit = () => (
 
 | Prop         | Required | Type              | Default                                | Description                                                                                                                                                                                  |
 | ------------ | -------- | ----------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `fullWidth`  | -        | boolean           | `false`                                | If `true`, the input will expand to fill the form width                                                                                                                                      |
+| `fullWidth`  | -        | boolean           | `true`                                | If `false`, the input will not expand to fill the form width                                                                                                                                      |
 | `helperText` | -        | string            | -                                      | Text to be displayed under the input                                                                                                                                                         |
 | `mask`       | -        | string            | -                                      | Alias for the MUI [`format`](https://mui.com/x/api/date-pickers/date-picker/#DatePicker-prop-format) prop. Format of the date/time when rendered in the input. Defaults to localized format. |
 | `parse`      | -        | Function          | `value => value === '' ? null : value` | Callback taking the input value, and returning the value you want stored in the form state.                                                                                                  |

diff --git a/docs/Form.md b/docs/Form.md
@@ -24,13 +24,13 @@ export const PostCreate = () => (
         <Form>
             <Grid container>
                 <Grid item xs={6}>
-                    <TextInput source="title" fullWidth />
+                    <TextInput source="title" />
                 </Grid>
                 <Grid item xs={6}>
-                    <TextInput source="author" fullWidth />
+                    <TextInput source="author" />
                 </Grid>
                 <Grid item xs={12}>
-                    <RichTextInput source="body" fullWidth />
+                    <RichTextInput source="body" />
                 </Grid>
                 <Grid item xs={12}>
                     <SaveButton />

diff --git a/docs/Inputs.md b/docs/Inputs.md
@@ -45,7 +45,7 @@ All input components accept the following props:
 | `defaultValue`  | Optional | `any`                     | -       | Default value of the input.                                                                                                                                         |
 | `disabled`      | Optional | `boolean`                 | -       | If true, the input is disabled.                                                                                                                                     |
 | `format`        | Optional | `Function`                | `value => value == null ? '' : value` | Callback taking the value from the form state, and returning the input value.                                                                                       |
-| `fullWidth`     | Optional | `boolean`                 | `false` | If `true`, the input will expand to fill the form width                                                                                                             |
+| `fullWidth`     | Optional | `boolean`                 | `true`  | If `false`, the input will not expand to fill the form width                                                                                                             |
 | `helperText`    | Optional | `string`                  | -       | Text to be displayed under the input (cannot be used inside a filter)                                                                                                          |
 | `label`         | Optional | `string`                  | -       | Input label. In i18n apps, the label is passed to the `translate` function. When omitted, the `source` property is humanized and used as a label. Set `label={false}` to hide the label. |
 | `parse`         | Optional | `Function`                | `value => value === '' ? null : value` | Callback taking the input value, and returning the value you want stored in the form state.                                                                         |
@@ -193,13 +193,117 @@ const defaultFormat = (value: any) => value == null ? '' : value;
 
 ## `fullWidth`
 
-If `true`, the input will expand to fill the form width.
+By default, all inputs expand to fill the form width. Set the `fullWidth` prop to `false` to prevent the input from expanding.
 
 ![input full width](./img/input-full-width.png)
 
 ```tsx
-<TextInput source="title" />
-<TextInput source="teaser" fullWidth multiline />
+<TextInput source="title" fullWidth={false}  />
+<TextInput source="teaser" multiline />
+```
+
+A good way to avoid too wide inputs on desktop is to limit the width of the form itself. You can do this by setting the `sx` prop on the `<SimpleForm>` component:
+
+{% raw %}
+```tsx
+import { Edit, SimpleForm, TextInput } from 'react-admin';
+
+const PostEdit = () => (
+    <Edit>
+        <SimpleForm sx={{ maxWidth: { lg: '600' } }}>
+            <TextInput source="title" />
+            <TextInput source="teaser" multiline />
+        </SimpleForm>
+    </Edit>
+);
+```
+{% endraw %}
+
+Note that the best way to layout inputs is to use the [Grid component](./BoxStackGrid.md#grid) to create a responsive layout, while still allowing inputs to expand to fill the available space. For example, to produce the following layout:
+
+![input full width](./img/input-grid.webp)
+
+{% raw %}
+```jsx
+import { Grid, InputAdornment } from '@mui/material';
+import {
+    NumberInput,
+    ReferenceInput,
+    required,
+    SelectInput,
+    TextInput,
+} from 'react-admin';
+
+export const ProductEditDetails = () => (
+    <Grid container columnSpacing={2}>
+        <Grid item xs={12} sm={8}>
+            <TextInput source="reference" validate={req} />
+        </Grid>
+        <Grid item xs={12} sm={4}>
+            <ReferenceInput source="category_id" reference="categories">
+                <SelectInput optionText="name" validate={req} />
+            </ReferenceInput>
+        </Grid>
+        <Grid item xs={12} sm={4}>
+            <NumberInput
+                source="width"
+                InputProps={{
+                    endAdornment: (
+                        <InputAdornment position="start">cm</InputAdornment>
+                    ),
+                }}
+                validate={req}
+            />
+        </Grid>
+        <Grid item xs={12} sm={4}>
+            <NumberInput
+                source="height"
+                InputProps={{
+                    endAdornment: (
+                        <InputAdornment position="start">cm</InputAdornment>
+                    ),
+                }}
+                validate={req}
+            />
+        </Grid>
+        <Grid item xs={0} sm={4}></Grid>
+        <Grid item xs={12} sm={4}>
+            <NumberInput
+                source="price"
+                InputProps={{
+                    startAdornment: (
+                        <InputAdornment position="start">€</InputAdornment>
+                    ),
+                }}
+                validate={req}
+            />
+        </Grid>
+        <Grid item xs={12} sm={4}>
+            <NumberInput source="stock" validate={req} />
+        </Grid>
+        <Grid item xs={12} sm={4}>
+            <NumberInput source="sales" validate={req} />
+        </Grid>
+    </Grid>
+);
+
+const req = [required()];
+```
+{% endraw %}
+
+Also, if you want to prevent the input from expanding in the entire app, you can set the following fields in a [custom application theme](./AppTheme.md):
+
+```diff
+const myTheme = {
+    // ...
+    components: {
+        // ...
++       MuiFormControl: { defaultProps: { fullWidth: undefined } },
++       MuiTextField: { defaultProps: { fullWidth: undefined } },
++       MuiAutocomplete: { defaultProps: { fullWidth: undefined } },
++       RaSimpleFormIterator: { defaultProps: { fullWidth: undefined } },
+    },
+};
 ```
 
 ## `helperText`
@@ -453,8 +557,8 @@ By default, react-admin will add an asterisk to the input label if the Input com
 ```tsx
 import { TextInput, required } from 'react-admin';
 
-<TextInput source="title" validate={required()} />
-<TextInput source="teaser" multiline fullWidth validate={required()} />
+<TextInput source="title" validate={required()} fullWidth={false} />
+<TextInput source="teaser" validate={required()} multiline />
 ```
 
 ## Linking Two Inputs

diff --git a/docs/SimpleForm.md b/docs/SimpleForm.md
@@ -7,7 +7,7 @@ title: "SimpleForm"
 
 The `<SimpleForm>` creates a `<form>` to edit a record, and renders its children (usually Input components) in a simple layout, one child per row.
 
-![simple form](./img/simple-form.png)
+![simple form](./img/simple-form.webp)
 
 ## Usage
 
@@ -217,7 +217,7 @@ The most common usage is to limit the width of the form, to avoid long inputs on
 ```jsx
 export const PostCreate = () => (
     <Create>
-        <SimpleForm sx={{ maxWidth: 600 }}>
+        <SimpleForm sx={{ maxWidth: { lg: 600 } }}>
             <TextInput source="title" />
             <RichTextInput source="body" />
             <NumberInput source="nb_views" />
@@ -434,44 +434,35 @@ By default, `<SimpleForm>` renders one child per row. But a given child can be a
 ```jsx
 const UserCreate = () => (
     <Create>
-        <SimpleForm sx={{ maxWidth: 500 }}>
+        <SimpleForm sx={{ maxWidth: { lg: '500' } }}>
             <Typography variant="h6" gutterBottom>
                 Identity
             </Typography>
             <Box display={{ xs: 'block', sm: 'flex', width: '100%' }}>
                 <Box flex={1} mr={{ xs: 0, sm: '0.5em' }}>
-                    <TextInput source="first_name" isRequired fullWidth />
+                    <TextInput source="first_name" isRequired />
                 </Box>
                 <Box flex={1} ml={{ xs: 0, sm: '0.5em' }}>
-                    <TextInput source="last_name" isRequired fullWidth />
+                    <TextInput source="last_name" isRequired />
                 </Box>
             </Box>
-            <TextInput type="email" source="email" isRequired fullWidth />
+            <TextInput type="email" source="email" isRequired />
             <DateInput source="birthday" />
             <Separator />
 
             <Typography variant="h6" gutterBottom>
                 Address
             </Typography>
-            <TextInput
-                source="address"
-                multiline
-                fullWidth
-                helperText={false}
-            />
+            <TextInput source="address" multiline helperText={false} />
             <Box display={{ xs: 'block', sm: 'flex' }}>
                 <Box flex={2} mr={{ xs: 0, sm: '0.5em' }}>
-                    <TextInput source="city" fullWidth helperText={false} />
+                    <TextInput source="city" helperText={false} />
                 </Box>
                 <Box flex={1} mr={{ xs: 0, sm: '0.5em' }}>
-                    <TextInput
-                        source="stateAbbr"
-                        fullWidth
-                        helperText={false}
-                    />
+                    <TextInput source="stateAbbr" helperText={false} />
                 </Box>
                 <Box flex={2}>
-                    <TextInput source="zipcode" fullWidth helperText={false} />
+                    <TextInput source="zipcode" helperText={false} />
                 </Box>
             </Box>
             <Separator />
@@ -481,10 +472,10 @@ const UserCreate = () => (
             </Typography>
             <Box display={{ xs: 'block', sm: 'flex' }}>
                 <Box flex={1} mr={{ xs: 0, sm: '0.5em' }}>
-                    <PasswordInput source="password" fullWidth />
+                    <PasswordInput source="password" />
                 </Box>
                 <Box flex={1} ml={{ xs: 0, sm: '0.5em' }}>
-                    <PasswordInput source="confirm_password" fullWidth />
+                    <PasswordInput source="confirm_password" />
                 </Box>
             </Box>
         </SimpleForm>
@@ -813,13 +804,13 @@ export const PostCreate = () => (
         <Form>
             <Grid container>
                 <Grid item xs={6}>
-                    <TextInput source="title" fullWidth />
+                    <TextInput source="title" />
                 </Grid>
                 <Grid item xs={6}>
-                    <TextInput source="author" fullWidth />
+                    <TextInput source="author" />
                 </Grid>
                 <Grid item xs={12}>
-                    <RichTextInput source="body" fullWidth />
+                    <RichTextInput source="body" />
                 </Grid>
                 <Grid item xs={12}>
                     <SaveButton />