[bootstrap-4] Widget and FieldTemplate customisation #2007
Assignees
Labels
bootstrap-4
bootstrap-4 related theme issue
bug
labelOrDescription
Relating to labels and descriptions of fields in the form
Comments
|
Addressed by PR #2533 |
7 tasks
This was
linked to
pull requests
Sep 2, 2021
heath-freenome
added a commit
to heath-freenome/react-jsonschema-form
that referenced
this issue
Oct 7, 2022
Fixed rjsf-team#2007 The current code for FieldTemplate and TextWidget in bootstrap 4 is incompatible with the core package. This breaks the external facing API for customizing field template. According to the core package implementation and documents, FieldTemplate is responsible for layout of labels, description, errors and help while the input widget along with the state is to be managed by the Field Component themselves (and Widgets) If a user, uses custom field template with the bootstrap 4 form, the label is displayed multiple times, once by the custom field template (as intended in the API) and second time by the TextWidget (breaks from the core package convention) This fixes the problem and updates the tests to catch any future regressions. - Updated `FieldTemplate` to output `Label` generation, adding an additional check to simply render `children` when the component is `hidden` - Updated `BaseInputTemplate`, `CheckboxesWidget`, `RadioWidget`, `SelectWidget` and `TextareaWidget`, removing the `Label` generation - Updated the test snapshots - Updated the `CHANGELOG.md` accordingly
heath-freenome
added a commit
to heath-freenome/react-jsonschema-form
that referenced
this issue
Oct 7, 2022
Fixed rjsf-team#2007 The current code for FieldTemplate and TextWidget in bootstrap 4 is incompatible with the core package. This breaks the external facing API for customizing field template. According to the core package implementation and documents, FieldTemplate is responsible for layout of labels, description, errors and help while the input widget along with the state is to be managed by the Field Component themselves (and Widgets) If a user, uses custom field template with the bootstrap 4 form, the label is displayed multiple times, once by the custom field template (as intended in the API) and second time by the TextWidget (breaks from the core package convention) This fixes the problem and updates the tests to catch any future regressions. - Updated `FieldTemplate` to output `Label` generation, adding an additional check to simply render `children` when the component is `hidden` - Updated `BaseInputTemplate`, `CheckboxesWidget`, `RadioWidget`, `SelectWidget` and `TextareaWidget`, removing the `Label` generation - Updated the test snapshots - Updated the `CHANGELOG.md` accordingly
8 tasks
heath-freenome
added a commit
that referenced
this issue
Oct 7, 2022
Fixed #2007 The current code for FieldTemplate and TextWidget in bootstrap 4 is incompatible with the core package. This breaks the external facing API for customizing field template. According to the core package implementation and documents, FieldTemplate is responsible for layout of labels, description, errors and help while the input widget along with the state is to be managed by the Field Component themselves (and Widgets) If a user, uses custom field template with the bootstrap 4 form, the label is displayed multiple times, once by the custom field template (as intended in the API) and second time by the TextWidget (breaks from the core package convention) This fixes the problem and updates the tests to catch any future regressions. - Updated `FieldTemplate` to output `Label` generation, adding an additional check to simply render `children` when the component is `hidden` - Updated `BaseInputTemplate`, `CheckboxesWidget`, `RadioWidget`, `SelectWidget` and `TextareaWidget`, removing the `Label` generation - Updated the test snapshots - Updated the `CHANGELOG.md` accordingly
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Prerequisites
Description
The boostrap-4 theme widgets now wrap each form control in a Form.Group directly with the label:
https://github.com/rjsf-team/react-jsonschema-form/blob/master/packages/bootstrap-4/src/TextWidget/TextWidget.tsx
this makes it pretty difficult to customise the form layout by providing a custom FieldTemplate. The only way to do this is to now copy and paste each widget you need and modify them independently.
Previously you could inject a customised FieldTemplate and thus override the label / field positioning as the label was part of the FieldTemplate and not the specific Widget in question
Steps to Reproduce
Expected behavior
It would be better for customisation if the label was injected from the FieldTemplate rather than in each widget (as this worked previously)
Actual behavior
You have to modify every Widget class rather than the FieldTemplate
Version
@rjsf/bootstrap-4: ^2.3.0
@rjsf/core: ^2.1.0
The text was updated successfully, but these errors were encountered: