diff --git a/docs/AppTheme.md b/docs/AppTheme.md index 4772756145b..6a9784986ac 100644 --- 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 index 11a2c30c818..6e282481cd3 100644 --- a/docs/AutocompleteArrayInput.md +++ b/docs/AutocompleteArrayInput.md @@ -304,7 +304,6 @@ const LanguageChangingAuthorInput = () => { return ( { }; return ( - + ); }; diff --git a/docs/Create.md b/docs/Create.md index ab2ca50eb69..149c5a74905 100644 --- a/docs/Create.md +++ b/docs/Create.md @@ -26,7 +26,7 @@ import RichTextInput from 'ra-input-rich-text'; export const PostCreate = () => ( - + diff --git a/docs/DateInput.md b/docs/DateInput.md index ffdae8e2822..9ebc488975e 100644 --- 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 index 091d9637e8a..7a1b89f9225 100644 --- 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 index a81a50fb2b4..c1cd3054a08 100644 --- a/docs/Form.md +++ b/docs/Form.md @@ -24,13 +24,13 @@ export const PostCreate = () => (
- + - + - + diff --git a/docs/Inputs.md b/docs/Inputs.md index 15848b3c7a6..690e771577e 100644 --- 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 - - + + +``` + +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 `` component: + +{% raw %} +```tsx +import { Edit, SimpleForm, TextInput } from 'react-admin'; + +const PostEdit = () => ( + + + + + + +); +``` +{% 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 = () => ( + + + + + + + + + + + cm + ), + }} + validate={req} + /> + + + cm + ), + }} + validate={req} + /> + + + + € + ), + }} + validate={req} + /> + + + + + + + + +); + +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'; - - + + ``` ## Linking Two Inputs diff --git a/docs/SimpleForm.md b/docs/SimpleForm.md index d99a79af7e5..2ac68a3c62f 100644 --- a/docs/SimpleForm.md +++ b/docs/SimpleForm.md @@ -7,7 +7,7 @@ title: "SimpleForm" The `` creates a `` 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 = () => ( - + @@ -434,44 +434,35 @@ By default, `` renders one child per row. But a given child can be a ```jsx const UserCreate = () => ( - + Identity - + - + - + Address - + - + - + - + @@ -481,10 +472,10 @@ const UserCreate = () => ( - + - + @@ -813,13 +804,13 @@ export const PostCreate = () => ( - + - + - + diff --git a/docs/SimpleFormIterator.md b/docs/SimpleFormIterator.md index df12e28a5fe..40f8422cc05 100644 --- a/docs/SimpleFormIterator.md +++ b/docs/SimpleFormIterator.md @@ -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 @@ -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 | @@ -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 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` @@ -275,7 +275,7 @@ When true, inputs are put on the same line. Use this option to make the lines mo ``` -![Inline form iterator](./img/simple-form-iterator-inline.png) +![Inline form iterator](./img/simple-form-iterator-inline.webp) Without this prop, `` will render one input per line. @@ -287,7 +287,7 @@ Without this prop, `` will render one input per line. ``` -![Not Inline form iterator](./img/simple-form-iterator-not-inline.png) +![Not Inline form iterator](./img/simple-form-iterator-not-inline.webp) ## `removeButton` diff --git a/docs/TabbedForm.md b/docs/TabbedForm.md index 4848b01bb65..86d48ed1a92 100644 --- a/docs/TabbedForm.md +++ b/docs/TabbedForm.md @@ -609,11 +609,11 @@ const ProductEdit = () => ( const ProductEditDetails = () => ( - + - + @@ -625,7 +625,6 @@ const ProductEditDetails = () => ( ), }} validate={req} - fullWidth /> @@ -637,7 +636,6 @@ const ProductEditDetails = () => ( ), }} validate={req} - fullWidth /> @@ -650,14 +648,13 @@ const ProductEditDetails = () => ( ), }} validate={req} - fullWidth /> - + - + ); diff --git a/docs/TextInput.md b/docs/TextInput.md index da45914e6f3..30f0d041323 100644 --- a/docs/TextInput.md +++ b/docs/TextInput.md @@ -22,8 +22,8 @@ import { Edit, SimpleForm, TextInput, required } from 'react-admin'; export const PostEdit = () => ( }> - - + + ); diff --git a/docs/TimeInput.md b/docs/TimeInput.md index 12e84b6b445..629decece84 100644 --- a/docs/TimeInput.md +++ b/docs/TimeInput.md @@ -53,7 +53,6 @@ import { TimeInput } from 'react-admin'; `` accepts the [common input props](./Inputs.md#common-input-props). - ## Material UI [React-admin Enterprise Edition](https://marmelab.com/ra-enterprise) proposes an alternative `` styled with Material UI. @@ -85,7 +84,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/TranslatableInputs.md b/docs/TranslatableInputs.md index c624872ac33..fa2efe1f92b 100644 --- a/docs/TranslatableInputs.md +++ b/docs/TranslatableInputs.md @@ -47,7 +47,7 @@ You may have inputs which are translated in multiple languages and want users to | ------ | -------- | -------- | ------- | ------------- | | `locales` | Required | `Array` | - | An array of locales. | | `defaultLocale` | Optional | `string` | `en` | The default locale to display | -| `fullWidth` | Optional | `boolean` | `false` | If `true`, the inputs will expand to fill the form width | +| `fullWidth` | Optional | `boolean` | `true` | If `false`, the inputs will not expand to fill the form width | | `groupKey` | Optional | `string` | - | A unique key for accessibility purpose | | `selector`| Optional | `ReactNode` | - | A selector to choose the locale to display | | `StackProps`| Optional | `object` | - | Props passed to the rendered MUI Stack | @@ -68,10 +68,10 @@ By default, `` will allow users to select the displayed loca ## `fullWidth` -If you want the inputs to expand to fill the form width, set the `fullWidth` prop to `true`: +By default, a `` group expands to fill the form width. You can disable this behaviour by setting the `fullWidth` prop to `false`: ```jsx - + diff --git a/docs/Upgrade.md b/docs/Upgrade.md index bc495f0ed04..928eb46f81d 100644 --- a/docs/Upgrade.md +++ b/docs/Upgrade.md @@ -302,6 +302,54 @@ If you don't need the dark mode feature, you'll have to explicitly disable it: ``` +## Inputs Have Full Width By Default + +In the default theme, all inputs now have full width. This makes forms better looking by default, and facilitates custom form layouts as you can nest inputs under ``. + +If this breaks your existing form layouts, you can revert to the previous style by resetting the `fullWidth` default prop in the application theme. To do so: + +- If you didn't use a custom theme, create one based on the default theme: + +```diff +-import { Admin } from 'react-admin'; ++import { Admin, defaultTheme } from 'react-admin'; ++import { deepmerge } from '@mui/utils'; +import { dataProvider } from './dataProvider'; + ++const theme = deepmerge(defaultTheme, { ++ components: { ++ MuiFormControl: { defaultProps: { fullWidth: undefined } }, ++ MuiTextField: { defaultProps: { fullWidth: undefined } }, ++ MuiAutocomplete: { defaultProps: { fullWidth: undefined } }, ++ RaSimpleFormIterator: { defaultProps: { fullWidth: undefined } }, ++ RaTranslatableInputs: { defaultProps: { fullWidth: undefined } }, ++ } ++}); + +const MyApp = () => ( +- ++ + ... + +); +``` + +- If you used a custom theme, update it to include the following lines: + +```diff +const myTheme = { + // ... + components: { + // ... ++ MuiFormControl: { defaultProps: { fullWidth: undefined } }, ++ MuiTextField: { defaultProps: { fullWidth: undefined } }, ++ MuiAutocomplete: { defaultProps: { fullWidth: undefined } }, ++ RaSimpleFormIterator: { defaultProps: { fullWidth: undefined } }, ++ RaTranslatableInputs: { defaultProps: { fullWidth: undefined } }, + }, +}; +``` + ## Links are now underlined by default In the default theme, links are now underlined by default. diff --git a/docs/img/array-input-block.png b/docs/img/array-input-block.png deleted file mode 100644 index 81cb308bbe5..00000000000 Binary files a/docs/img/array-input-block.png and /dev/null differ diff --git a/docs/img/array-input-block.webp b/docs/img/array-input-block.webp new file mode 100644 index 00000000000..f7e3de63355 Binary files /dev/null and b/docs/img/array-input-block.webp differ diff --git a/docs/img/input-grid.webp b/docs/img/input-grid.webp new file mode 100644 index 00000000000..ba9092608e4 Binary files /dev/null and b/docs/img/input-grid.webp differ diff --git a/docs/img/inputs.webp b/docs/img/inputs.webp index 02ad1b18be3..e01a58309ba 100644 Binary files a/docs/img/inputs.webp and b/docs/img/inputs.webp differ diff --git a/docs/img/simple-form-iterator-inline.png b/docs/img/simple-form-iterator-inline.png deleted file mode 100644 index edb620bffb0..00000000000 Binary files a/docs/img/simple-form-iterator-inline.png and /dev/null differ diff --git a/docs/img/simple-form-iterator-inline.webp b/docs/img/simple-form-iterator-inline.webp new file mode 100644 index 00000000000..639a2799932 Binary files /dev/null and b/docs/img/simple-form-iterator-inline.webp differ diff --git a/docs/img/simple-form-iterator-not-inline.png b/docs/img/simple-form-iterator-not-inline.png deleted file mode 100644 index 168ab7c461c..00000000000 Binary files a/docs/img/simple-form-iterator-not-inline.png and /dev/null differ diff --git a/docs/img/simple-form-iterator-not-inline.webp b/docs/img/simple-form-iterator-not-inline.webp new file mode 100644 index 00000000000..8f2e0ca0129 Binary files /dev/null and b/docs/img/simple-form-iterator-not-inline.webp differ diff --git a/docs/img/simple-form.png b/docs/img/simple-form.png deleted file mode 100644 index 9456d7f736a..00000000000 Binary files a/docs/img/simple-form.png and /dev/null differ diff --git a/docs/img/simple-form.webp b/docs/img/simple-form.webp new file mode 100644 index 00000000000..2c578109aa3 Binary files /dev/null and b/docs/img/simple-form.webp differ diff --git a/docs/useLockOnCall.md b/docs/useLockOnCall.md index 3720a050cbf..210165dcba3 100644 --- a/docs/useLockOnCall.md +++ b/docs/useLockOnCall.md @@ -51,9 +51,9 @@ const PostAside = () => { const PostEdit = () => ( }> - - - + + + ); diff --git a/docs/useLockOnMount.md b/docs/useLockOnMount.md index 4f37bb9d487..be764063747 100644 --- a/docs/useLockOnMount.md +++ b/docs/useLockOnMount.md @@ -48,9 +48,9 @@ const PostAside = () => { const PostEdit = () => ( }> - - - + + + ); diff --git a/docs/useSubscribeToRecord.md b/docs/useSubscribeToRecord.md index c506db91d4d..4d10fbc523d 100644 --- a/docs/useSubscribeToRecord.md +++ b/docs/useSubscribeToRecord.md @@ -89,8 +89,8 @@ const PostEdit = () => ( - - + + diff --git a/examples/crm/src/companies/CompanyForm.tsx b/examples/crm/src/companies/CompanyForm.tsx index abdf34ea26c..c23b049a39c 100644 --- a/examples/crm/src/companies/CompanyForm.tsx +++ b/examples/crm/src/companies/CompanyForm.tsx @@ -8,7 +8,7 @@ import { sizes } from './sizes'; export const CompanyForm = () => ( <> - + ( - + - + - + - + - - - + + + diff --git a/examples/crm/src/contacts/ContactInputs.tsx b/examples/crm/src/contacts/ContactInputs.tsx index 4b7a4c8bb68..b0741056617 100644 --- a/examples/crm/src/contacts/ContactInputs.tsx +++ b/examples/crm/src/contacts/ContactInputs.tsx @@ -10,30 +10,30 @@ import { Divider, Box } from '@mui/material'; export const ContactInputs = () => ( - + - + - + - + - + - + - + - - + + diff --git a/examples/crm/src/contacts/TagsListEdit.tsx b/examples/crm/src/contacts/TagsListEdit.tsx index ffbe5f72078..e56ff70abff 100644 --- a/examples/crm/src/contacts/TagsListEdit.tsx +++ b/examples/crm/src/contacts/TagsListEdit.tsx @@ -186,7 +186,6 @@ export const TagsListEdit = () => { { - + - - + + diff --git a/examples/crm/src/notes/NewNote.tsx b/examples/crm/src/notes/NewNote.tsx index 02dcf104ec7..2b238712b95 100644 --- a/examples/crm/src/notes/NewNote.tsx +++ b/examples/crm/src/notes/NewNote.tsx @@ -73,7 +73,6 @@ export const NewNote = ({ label="Add a note" variant="filled" size="small" - fullWidth multiline value={text} onChange={(event: React.ChangeEvent) => diff --git a/examples/demo/src/layout/Login.tsx b/examples/demo/src/layout/Login.tsx index 8c02a110511..a07e4e0ec1c 100644 --- a/examples/demo/src/layout/Login.tsx +++ b/examples/demo/src/layout/Login.tsx @@ -103,7 +103,6 @@ const Login = () => { label={translate('ra.auth.username')} disabled={loading} validate={required()} - fullWidth /> @@ -113,7 +112,6 @@ const Login = () => { type="password" disabled={loading} validate={required()} - fullWidth /> diff --git a/examples/demo/src/orders/OrderEdit.tsx b/examples/demo/src/orders/OrderEdit.tsx index 109a88514dc..9585004cc4c 100644 --- a/examples/demo/src/orders/OrderEdit.tsx +++ b/examples/demo/src/orders/OrderEdit.tsx @@ -121,6 +121,7 @@ const OrderForm = () => { disabled: true, }, ]} + sx={{ width: '80%' }} /> diff --git a/examples/demo/src/products/ProductCreate.tsx b/examples/demo/src/products/ProductCreate.tsx index 0277979fb16..e422696b89e 100644 --- a/examples/demo/src/products/ProductCreate.tsx +++ b/examples/demo/src/products/ProductCreate.tsx @@ -14,13 +14,8 @@ const ProductCreate = () => ( label="resources.products.tabs.image" sx={{ maxWidth: '40em' }} > - - + + ( sx={{ maxWidth: '40em' }} > - - + + ( - + - + @@ -27,7 +27,6 @@ export const ProductEditDetails = () => ( ), }} validate={req} - fullWidth /> @@ -39,7 +38,6 @@ export const ProductEditDetails = () => ( ), }} validate={req} - fullWidth /> @@ -52,14 +50,13 @@ export const ProductEditDetails = () => ( ), }} validate={req} - fullWidth /> - + - + ); diff --git a/examples/demo/src/reviews/ReviewCreate.tsx b/examples/demo/src/reviews/ReviewCreate.tsx index 7458fc38d8e..0354c8a1c1a 100644 --- a/examples/demo/src/reviews/ReviewCreate.tsx +++ b/examples/demo/src/reviews/ReviewCreate.tsx @@ -32,7 +32,12 @@ const ReviewCreate = () => { return ( - + @@ -51,7 +56,6 @@ const ReviewCreate = () => { diff --git a/examples/demo/src/reviews/ReviewEdit.tsx b/examples/demo/src/reviews/ReviewEdit.tsx index c1cb934c2e1..ae9b5c7f82a 100644 --- a/examples/demo/src/reviews/ReviewEdit.tsx +++ b/examples/demo/src/reviews/ReviewEdit.tsx @@ -60,12 +60,7 @@ const ReviewEdit = ({ id, onCancel }: Props) => { - + diff --git a/examples/demo/src/themes/chiptuneTheme.ts b/examples/demo/src/themes/chiptuneTheme.ts index a702483d917..51a404e49be 100644 --- a/examples/demo/src/themes/chiptuneTheme.ts +++ b/examples/demo/src/themes/chiptuneTheme.ts @@ -16,4 +16,10 @@ export const chiptuneTheme: RaThemeOptions = { typography: { fontFamily: `'Pixelify Sans', cursive`, }, + components: { + MuiAutocomplete: { defaultProps: { fullWidth: true } }, + MuiFormControl: { defaultProps: { fullWidth: true } }, + MuiTextField: { defaultProps: { fullWidth: true } }, + RaSimpleFormIterator: { defaultProps: { fullWidth: true } }, + }, }; diff --git a/examples/demo/src/visitors/VisitorCreate.tsx b/examples/demo/src/visitors/VisitorCreate.tsx index 4d4736ef5f4..fd66d2ba60a 100644 --- a/examples/demo/src/visitors/VisitorCreate.tsx +++ b/examples/demo/src/visitors/VisitorCreate.tsx @@ -56,45 +56,36 @@ const VisitorCreate = () => ( - + - + - + - + - + - + - + - + - + diff --git a/examples/demo/src/visitors/VisitorEdit.tsx b/examples/demo/src/visitors/VisitorEdit.tsx index b28b23976e0..31e471c3781 100644 --- a/examples/demo/src/visitors/VisitorEdit.tsx +++ b/examples/demo/src/visitors/VisitorEdit.tsx @@ -30,31 +30,17 @@ const VisitorEdit = () => { - + - + - + @@ -71,28 +57,24 @@ const VisitorEdit = () => { @@ -107,16 +89,10 @@ const VisitorEdit = () => { - + - + @@ -127,11 +103,8 @@ const VisitorEdit = () => { )} - - + + diff --git a/examples/simple/src/comments/CommentCreate.tsx b/examples/simple/src/comments/CommentCreate.tsx index a78f551a180..3357a41429b 100644 --- a/examples/simple/src/comments/CommentCreate.tsx +++ b/examples/simple/src/comments/CommentCreate.tsx @@ -13,11 +13,11 @@ const now = new Date(); const CommentCreate = () => ( - + - + ); diff --git a/examples/simple/src/comments/CommentEdit.tsx b/examples/simple/src/comments/CommentEdit.tsx index 92a094ae064..619b6e3863c 100644 --- a/examples/simple/src/comments/CommentEdit.tsx +++ b/examples/simple/src/comments/CommentEdit.tsx @@ -131,7 +131,6 @@ const CommentEdit = props => { > { }} optionText={} inputText={inputText} - fullWidth /> @@ -159,14 +157,12 @@ const CommentEdit = props => { - + )} diff --git a/examples/simple/src/comments/PostQuickCreate.tsx b/examples/simple/src/comments/PostQuickCreate.tsx index ebc8fd8a319..75d0c142715 100644 --- a/examples/simple/src/comments/PostQuickCreate.tsx +++ b/examples/simple/src/comments/PostQuickCreate.tsx @@ -64,7 +64,6 @@ const PostQuickCreate = props => { defaultValue="" source="teaser" validate={required()} - fullWidth={true} multiline={true} /> diff --git a/examples/simple/src/comments/PostReferenceInput.tsx b/examples/simple/src/comments/PostReferenceInput.tsx index b15b3b42210..9e170a6f71b 100644 --- a/examples/simple/src/comments/PostReferenceInput.tsx +++ b/examples/simple/src/comments/PostReferenceInput.tsx @@ -45,7 +45,6 @@ const PostReferenceInput = () => { sort={{ field: 'title', order: 'ASC' as const }} > } optionText="title" validate={required()} diff --git a/examples/simple/src/posts/PostCreate.tsx b/examples/simple/src/posts/PostCreate.tsx index 80e4c62f4f0..75bb923d427 100644 --- a/examples/simple/src/posts/PostCreate.tsx +++ b/examples/simple/src/posts/PostCreate.tsx @@ -108,6 +108,7 @@ const PostCreate = () => { } defaultValues={defaultValues} + sx={{ maxWidth: { md: 'auto', lg: '30em' } }} > { /> diff --git a/examples/simple/src/posts/PostEdit.tsx b/examples/simple/src/posts/PostEdit.tsx index 73bdfe0c7ed..fec2d8beb3c 100644 --- a/examples/simple/src/posts/PostEdit.tsx +++ b/examples/simple/src/posts/PostEdit.tsx @@ -128,14 +128,12 @@ const PostEdit = () => { { /> } > - + diff --git a/packages/ra-no-code/src/ResourceConfiguration/ConfigurationInputsFromFieldDefinition.tsx b/packages/ra-no-code/src/ResourceConfiguration/ConfigurationInputsFromFieldDefinition.tsx index c2b61b9c9e9..2974d1e54ea 100644 --- a/packages/ra-no-code/src/ResourceConfiguration/ConfigurationInputsFromFieldDefinition.tsx +++ b/packages/ra-no-code/src/ResourceConfiguration/ConfigurationInputsFromFieldDefinition.tsx @@ -23,7 +23,6 @@ export const ConfigurationInputsFromFieldDefinition = ({ ({ id: name, name: resources[name].label || resources[name].name, @@ -32,7 +31,6 @@ export const ConfigurationInputsFromFieldDefinition = ({ diff --git a/packages/ra-no-code/src/ResourceConfiguration/FieldConfigurationFormSection.tsx b/packages/ra-no-code/src/ResourceConfiguration/FieldConfigurationFormSection.tsx index 7ec293ac6db..fbfd9b8eb6f 100644 --- a/packages/ra-no-code/src/ResourceConfiguration/FieldConfigurationFormSection.tsx +++ b/packages/ra-no-code/src/ResourceConfiguration/FieldConfigurationFormSection.tsx @@ -19,25 +19,15 @@ export const FieldConfigurationFormSection = props => { - - + + { label={translate('ra.auth.username')} autoComplete="username" validate={required()} - fullWidth /> { type="password" autoComplete="current-password" validate={required()} - fullWidth /> + + + )); + + return
Theme: {themeButtons}
; +}; + const i18nProvider = polyglotI18nProvider(() => englishMessages); +const store = memoryStore(); -export const AllInputs = () => ( - - { + const [themeName] = useStore('themeName', 'default'); + const lightTheme = themes.find(theme => theme.name === themeName)?.light; + const darkTheme = themes.find(theme => theme.name === themeName)?.dark; + return ( + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export const AllInputs = () => ( + + + ); diff --git a/packages/ra-ui-materialui/src/list/filter/FilterLiveSearch.stories.tsx b/packages/ra-ui-materialui/src/list/filter/FilterLiveSearch.stories.tsx index 25a885ba107..2127befc3af 100644 --- a/packages/ra-ui-materialui/src/list/filter/FilterLiveSearch.stories.tsx +++ b/packages/ra-ui-materialui/src/list/filter/FilterLiveSearch.stories.tsx @@ -95,9 +95,9 @@ export const Variant = () => ( ); -export const FullWidth = () => ( +export const NonFullWidth = () => ( - + ); diff --git a/packages/ra-ui-materialui/src/theme/defaultTheme.ts b/packages/ra-ui-materialui/src/theme/defaultTheme.ts index 5e7022bac49..fe1908e34db 100644 --- a/packages/ra-ui-materialui/src/theme/defaultTheme.ts +++ b/packages/ra-ui-materialui/src/theme/defaultTheme.ts @@ -13,6 +13,9 @@ const defaultThemeInvariants = { }, components: { MuiAutocomplete: { + defaultProps: { + fullWidth: true, + }, variants: [ { props: {}, @@ -27,6 +30,7 @@ const defaultThemeInvariants = { variant: 'filled' as const, margin: 'dense' as const, size: 'small' as const, + fullWidth: true, }, variants: [ { @@ -42,6 +46,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/packages/ra-ui-materialui/src/theme/houseTheme.ts b/packages/ra-ui-materialui/src/theme/houseTheme.ts index 76a1c51e32f..bb4f459305f 100644 --- a/packages/ra-ui-materialui/src/theme/houseTheme.ts +++ b/packages/ra-ui-materialui/src/theme/houseTheme.ts @@ -26,9 +26,15 @@ const componentsOverrides = (theme: Theme) => ({ }, }, }, + MuiAutocomplete: { + defaultProps: { + fullWidth: true, + }, + }, MuiFormControl: { defaultProps: { margin: 'dense' as const, + fullWidth: true, }, }, MuiOutlinedInput: { @@ -105,6 +111,7 @@ const componentsOverrides = (theme: Theme) => ({ MuiTextField: { defaultProps: { variant: 'outlined' as const, + fullWidth: true, }, }, RaAppBar: { @@ -148,6 +155,16 @@ const componentsOverrides = (theme: Theme) => ({ }, }, }, + RaSimpleFormIterator: { + defaultProps: { + fullWidth: true, + }, + }, + RaTranslatableInputs: { + defaultProps: { + fullWidth: true, + }, + }, }); const alert = { diff --git a/packages/ra-ui-materialui/src/theme/nanoTheme.ts b/packages/ra-ui-materialui/src/theme/nanoTheme.ts index 391b21085dd..fa511320084 100644 --- a/packages/ra-ui-materialui/src/theme/nanoTheme.ts +++ b/packages/ra-ui-materialui/src/theme/nanoTheme.ts @@ -19,6 +19,9 @@ const componentsOverrides = (theme: Theme) => ({ }, }, MuiAutocomplete: { + defaultProps: { + fullWidth: true, + }, variants: [ { props: {}, @@ -69,6 +72,7 @@ const componentsOverrides = (theme: Theme) => ({ variant: 'standard' as const, margin: 'dense' as const, size: 'small' as const, + fullWidth: true, }, }, MuiFormHelperText: { @@ -220,6 +224,7 @@ const componentsOverrides = (theme: Theme) => ({ variant: 'standard' as const, margin: 'dense' as const, size: 'small' as const, + fullWidth: true, }, variants: [ { @@ -304,6 +309,16 @@ const componentsOverrides = (theme: Theme) => ({ }, }, }, + RaSimpleFormIterator: { + defaultProps: { + fullWidth: true, + }, + }, + RaTranslatableInputs: { + defaultProps: { + fullWidth: true, + }, + }, }); const alert = { diff --git a/packages/ra-ui-materialui/src/theme/radiantTheme.ts b/packages/ra-ui-materialui/src/theme/radiantTheme.ts index a04e4a3f107..a6ca3d2d60f 100644 --- a/packages/ra-ui-materialui/src/theme/radiantTheme.ts +++ b/packages/ra-ui-materialui/src/theme/radiantTheme.ts @@ -22,6 +22,11 @@ const componentsOverrides = (theme: Theme) => { }, }, }, + MuiAutocomplete: { + defaultProps: { + fullWidth: true, + }, + }, MuiButton: { defaultProps: { variant: 'outlined' as const, @@ -37,6 +42,7 @@ const componentsOverrides = (theme: Theme) => { variant: 'outlined' as const, margin: 'dense' as const, size: 'small' as const, + fullWidth: true, }, }, MuiPaper: { @@ -74,6 +80,7 @@ const componentsOverrides = (theme: Theme) => { variant: 'outlined' as const, margin: 'dense' as const, size: 'small' as const, + fullWidth: true, }, }, RaDatagrid: { @@ -122,6 +129,16 @@ const componentsOverrides = (theme: Theme) => { }, }, }, + RaSimpleFormIterator: { + defaultProps: { + fullWidth: true, + }, + }, + RaTranslatableInputs: { + defaultProps: { + fullWidth: true, + }, + }, }; };