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.

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

[bootstrap-4] Widget and FieldTemplate customisation #2007

Closed
stufisher opened this issue Aug 21, 2020 · 1 comment · Fixed by #3186
Closed

[bootstrap-4] Widget and FieldTemplate customisation #2007

stufisher opened this issue Aug 21, 2020 · 1 comment · Fixed by #3186
Assignees
Labels
bootstrap-4 bootstrap-4 related theme issue bug labelOrDescription Relating to labels and descriptions of fields in the form

Comments

@stufisher
Copy link

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

@newt10
Copy link
Collaborator

newt10 commented Sep 2, 2021

Addressed by PR #2533

@newt10 newt10 added bug labelOrDescription Relating to labels and descriptions of fields in the form bootstrap-4 bootstrap-4 related theme issue labels Sep 2, 2021
@newt10 newt10 self-assigned this 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
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
Labels
bootstrap-4 bootstrap-4 related theme issue bug labelOrDescription Relating to labels and descriptions of fields in the form
Projects
None yet
2 participants