Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make all inputs fullWidth by default #9704

Merged
merged 18 commits into from
Mar 13, 2024
Merged

Make all inputs fullWidth by default #9704

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
314a638
Make inputs full width by default
fzaninotto Mar 8, 2024
8f3c9c3
Update docs
fzaninotto Mar 8, 2024
098efd6
Improve documentation
fzaninotto Mar 8, 2024
4064359
Fix translatableinputs
fzaninotto Mar 8, 2024
61f332f
Fix SimpleFormIterator
fzaninotto Mar 8, 2024
5c4ac90
Fix doc
fzaninotto Mar 8, 2024
71d6af2
Fix Nested ArrayInputs
fzaninotto Mar 8, 2024
f34b33a
Improve upgrade guide
fzaninotto Mar 8, 2024
d3cb4ac
Fix ArrayInput test
fzaninotto Mar 8, 2024
bf4d23b
Apply suggestions from code review
fzaninotto Mar 12, 2024
5ec40cb
[Demo] Fix Chiptune theme
fzaninotto Mar 12, 2024
55764aa
[Doc] Fix typo in Inputs doc
fzaninotto Mar 12, 2024
6ad1a66
Apply suggestions from code review
fzaninotto Mar 12, 2024
53099e7
TextInput: Rename story
fzaninotto Mar 12, 2024
5c25855
Remove useless story
fzaninotto Mar 12, 2024
6985991
Fix TranslatableInputs isn't themeable
fzaninotto Mar 12, 2024
a543ebf
Forgot one line
fzaninotto Mar 12, 2024
48d332e
Apply review
fzaninotto Mar 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions docs/AppTheme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -484,6 +484,9 @@ const defaultThemeInvariants = {
},
components: {
MuiAutocomplete: {
defaultProps: {
fullWidth: true,
},
variants: [
{
props: {},
Expand All @@ -498,6 +501,7 @@ const defaultThemeInvariants = {
variant: 'filled' as const,
margin: 'dense' as const,
size: 'small' as const,
fullWidth: true,
},
variants: [
{
Expand All @@ -513,6 +517,12 @@ const defaultThemeInvariants = {
variant: 'filled' as const,
margin: 'dense' as const,
size: 'small' as const,
fullWidth: true,
},
},
RaSimpleFormIterator: {
defaultProps: {
fullWidth: true,
},
},
},
Expand Down
1 change: 0 additions & 1 deletion docs/AutocompleteArrayInput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,6 @@ const LanguageChangingAuthorInput = () => {
return (
<ReferenceArrayInput reference="authors" source="author">
<AutocompleteArrayInput
fullWidth
optionText="name"
onChange={handleChange}
label="Authors"
Expand Down
6 changes: 1 addition & 5 deletions docs/AutocompleteInput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -342,11 +342,7 @@ const LanguageChangingAuthorInput = () => {
};
return (
<ReferenceInput reference="authors" source="author">
<AutocompleteInput
fullWidth
optionText="name"
onChange={handleChange}
/>
<AutocompleteInput optionText="name" onChange={handleChange} />
</ReferenceInput>
);
};
Expand Down
2 changes: 1 addition & 1 deletion docs/Create.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()} />
Expand Down
2 changes: 1 addition & 1 deletion docs/DateInput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand Down
2 changes: 1 addition & 1 deletion docs/DateTimeInput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand Down
6 changes: 3 additions & 3 deletions docs/Form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
98 changes: 92 additions & 6 deletions docs/Inputs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand Down Expand Up @@ -193,13 +193,99 @@ 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 />
```

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 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 } },
},
};
```

## `helperText`
Expand Down Expand Up @@ -453,8 +539,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
Expand Down
39 changes: 15 additions & 24 deletions docs/SimpleForm.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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" />
Expand Down Expand Up @@ -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 />
Expand All @@ -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>
Expand Down Expand Up @@ -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 />
Expand Down
20 changes: 10 additions & 10 deletions docs/SimpleFormIterator.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const OrderEdit = () => (
);
```

![Simple form iterator block](./img/array-input-block.png)
![Simple form iterator block](./img/array-input-block.webp)

## Props

Expand All @@ -81,7 +81,7 @@ const OrderEdit = () => (
| `disableClear` | Optional | `boolean` | `false` | When true, the user cannot clear the array |
| `disableRemove` | Optional | `boolean` | `false` | When true, the user cannot remove rows |
| `disableReordering` | Optional | `boolean` | `false` | When true, the user cannot reorder rows |
| `fullWidth` | Optional | `boolean` | `false` | Set to true to push the actions to the right |
| `fullWidth` | Optional | `boolean` | `true` | Set to false to glue the actions to last input |
| `getItemLabel` | Optional | `function` | `x => x` | Callback to render the label displayed in each row |
| `inline` | Optional | `boolean` | `false` | When true, inputs are put on the same line |
| `removeButton` | Optional | `ReactElement` | - | Component to render for the remove button |
Expand Down Expand Up @@ -233,20 +233,20 @@ When true, the up and down buttons aren't rendered, so the user cannot reorder r

## `fullWidth`

When true, the row actions appear at the end of the row.
By default, the row actions appear at the end of the row.

![SimpleFormIterator full width](./img/simple-form-iterator-fullWidth.png)

If your form is narrow, you can set the `fullWidth` prop to `false` to make the row actions appear at the end of the form.

```jsx
<SimpleFormIterator fullWidth>
<SimpleFormIterator fullWidth={false}>
<TextInput source="name" />
<NumberInput source="price" />
<NumberInput source="quantity" />
</SimpleFormIterator>
```

![SimpleFormIterator full width](./img/simple-form-iterator-fullWidth.png)

This differs with the default behavior, where the row actions appear after the inputs.

![SimpleFormIterator default width](./img/simple-form-iterator-fullWidth-false.png)

## `getItemLabel`
Expand Down Expand Up @@ -275,7 +275,7 @@ When true, inputs are put on the same line. Use this option to make the lines mo
</SimpleFormIterator>
```

![Inline form iterator](./img/simple-form-iterator-inline.png)
![Inline form iterator](./img/simple-form-iterator-inline.webp)

Without this prop, `<SimpleFormIterator>` will render one input per line.

Expand All @@ -287,7 +287,7 @@ Without this prop, `<SimpleFormIterator>` will render one input per line.
</SimpleFormIterator>
```

![Not Inline form iterator](./img/simple-form-iterator-not-inline.png)
![Not Inline form iterator](./img/simple-form-iterator-not-inline.webp)

## `removeButton`

Expand Down
Loading
Loading