Form theme: support Bootstrap 4 custom switches

[romaricdrigon]

Q	A
Branch?	4.4
Bug fix?	no
New feature?	yes
Deprecations?	no
Tickets	/
License	MIT
Doc PR	symfony/symfony-docs#12464

Hello,

At the moment, Symfony form theme supports custom checkboxes through an extra class in label_attr.
Bootstrap4 introduced also custom switches, which has exactly the same HTML markup, but use a different class. This PR slightly modify bootstrap_4_layout to handle it.

Some reasons why I think supporting those have its place in Symfony:

• those are getting common in UI right now, it is a common use case
• it is complementary to normal checkboxes, and works the same way: required attribute, validation error, and so on are supported immediately
• implementing it yourself in your form theme is actually tricky, because of the way checkbox are handled (ie., form_label called inside form_widget with a { widget: parent() }). You have to overwrite the whole fragment, otherwise you get an infinite recursion.

Finally, some screenshots and code examples.

Custom checkbox (as at the moment):

    ->add('test', CheckboxType::class, [
        'label_attr' => [
            'class' => 'checkbox-custom',
        ],
    ])

Custom switch (proposed):

    ->add('test', CheckboxType::class, [
        'label_attr' => [
            'class' => 'switch-custom',
        ],
    ])

[javiereguiluz]

I love this ... but I have two questions:

• The "discoverability" is not great because you are changing the form field look and feel by setting a CSS class in the label 🤔 . Ideally we'd have a ToggleType or SwitchType form field.
• This makes the form themes "different". Until now, the only difference between themes was their design ... but this adds a new feature that it's exclusive to Bootstrap theme.

[romaricdrigon]

I'm seeing it as a checkbox "skin". It still behaves exactly as a checkbox, both functionality wise (for the user) and in PHP code (for the developer). So imo adding a SwitchType would be cumbersome, for instance it would likely require developers to modify their Form extensions and so on. I think it should stay only a presentation concern.

I think the feature is not quite exclusive to Bootstrap, other framework could read that attribute and implement switches too (for instance, Foundation took a similar approach). Indeed, right Bootstrap has a better integration such as form help (which is displayed as a normal div for Foundation), invalid form fields, etc., but we don't break any other form themes or prevent them to use it too.

[javiereguiluz]

@romaricdrigon your comment made me change my mind. Although we're on the edge here, it's true that this is just "a skin", even if the perceived behavior changes. Thanks!

[xabbuh]

the additional blank line should be removed

[romaricdrigon]

Right, that's fixed

[fabpot]

Thank you @romaricdrigon.