Missing `addClass` / `removeClass` methods and inconsistent visibility handling in `bootstrap5ConditionalLogic`

[studio1gmbh-pimcore]

Hi there,

we currently had some trouble with BS5 layouts and coditinional logic. After some debguging we found out, that the Bootstrap 5 implementation is missing two methods in comparison to the Bootstrap 4 implementation:

https://github.com/dachcom-digital/js-pimcore-formbuilder/blob/main/src/js/transformers/bootstrap5.js
vs
https://github.com/dachcom-digital/js-pimcore-formbuilder/blob/main/src/js/transformers/bootstrap4.js

addClass and removeClass are missing. This makes it impossible for us to use the conditional logic "Change Class" feature when using the bootstrap_5_layout.

Proposed fix

To align with the behavior of bootstrap4ConditionalLogic, the missing methods should be added:

addClass: (el, className) => {
    el.closest('.formbuilder-row')?.classList.add(className);
},
removeClass: (el, className) => {
    el.closest('.formbuilder-row')?.classList.remove(className);
},

Further Fixes

The selectors used in show() and hide() (currently .form-group, .mb-3) do not match the layout used in Bootstrap 4(formbuilder-row). When conditional logic is applied to form base / fieldsets, the condition adds fb-cl-hide-element to the outer .formbuilder-row, but the logic currently only hides the inner .form-group.

This results in markup like:

<div class="formbuilder-row default fb-cl-hide-element">
    <fieldset class="form-group d-none">
        ...
    </fieldset>
</div>

@solverat can you please have a look? Thanks in advance!

/@jeykodev

[jeykodev]

@solverat 🏓😊

[solverat]

@pascalmoser