-
-
Notifications
You must be signed in to change notification settings - Fork 5.3k
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.
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
Avoid cloning elements in forms #7223
Conversation
@@ -818,30 +818,34 @@ export const PostCreate = () => ( | |||
|
|||
### Label Decoration | |||
|
|||
`<SimpleForm>` scans its children for the `addLabel` prop, and automatically wraps a child in a `<Labeled>` component when found. This displays a label on top of the child, based on the `label` prop. This is not necessary for `<Input>` components, as they already contain their label. Also, all the react-admin `<Field>` components have a default prop `addLabel: true`, which explains why react-admin shows a label on top of Fields when they are used as children of `<SimpleForm>`. | |||
All react-admin inputs handle the display of their label by wrapping their content inside a `<Labeled>` component. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
that's not true for Inputs. Fields, maybe?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It is actually true for many inputs (ArrayInput
, CheckboxGroupInput
, FileInput
, RadioButtonGroupInput
, SelectArrayInput
and SelectInput
). The others uses MUI default label
@@ -969,31 +973,37 @@ export const PostEdit = () => ( | |||
|
|||
### Label Decoration | |||
|
|||
`<FormTab>` scans its children for the `addLabel` prop, and automatically wraps a child in a `<Labeled>` component when found. This displays a label on top of the child, based on the `label` prop. This is not necessary for `<Input>` components, as they already contain their label. Also, all the react-admin `<Field>` components have a default prop `addLabel: true`, which explains why react-admin shows a label on top of Fields when they are used as children of `<FormTab>`. | |||
All react-admin inputs handle the display of their label by wrapping their content inside a `<Labeled>` component. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why is this content repeated?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We have this section inside the SimpleForm
and the TabbedForm
sections
9ec83bd
to
8e07058
Compare
|
||
This is no longer the case and makes custom layout easier. | ||
|
||
### `<SimpleForm>` and `<TabbedForm>` No Longer Clone Their Children |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Once again, this is wonderful! 💪
5236bc9
to
8090730
Compare
After this PR, I'll make a few others to ensure that every inputs handle the
fullWidth
property correctly. I'll also add stories for each input.