Bootstrap 5 updates #329
Bootstrap 5 updates #329
Conversation
They aren't used by bootstrap and .form-group has gone in v5 as well.
Also add :vertical_select wrapper for `<select>` lists used for associations. Without this, the select elements would use the default :vertical_form wrapper and get the .form-control class.
When a boolean is rendered as radio buttons a hidden `<input>` element is added between the `<legend>` and first `<div>` wrapping a radio button. Bootstrap's styling floats the legend left and needs the following element to be cleared, but this does not work if the following element is not displayed. We add an additional rule to target the first following wrapper `<div>`.
.active has gone; check for .btn so we only process events from the input elements, not the labels. Don't preventDefault() on the event, so the radio button will toggle.
As for horizontals, add :horizontal_select wrapper for `<select>` lists used for associations. Without this, the select elements would use the default :horizontal_form wrapper and get the .form-control class.
Needs updating as .input-group-append wrapper div isn't used any more.
Not supported by Bootstrap 5's floating labels implementation.
New .has-validation class was added so validation feedback can move inside input-group. This works ok for simple_form, but the plain HTML version with both .valid-feedback and .invalid-feedback divs loses the rounded end on the input group. See twbs/bootstrap#25110
|
Hey 👋 @mhw Thank you for the awesome work!! Let me think about the process and structure and if it’s really necessary to maintain two instances (may just for a fixed time). |
|
So, in the meantime Bootstrap released the final v5 🎉 @mhw - Could you check/verify if your PR includes possible last minute tweaks. |
|
Yep, good idea. Give me a day or so and I'll check if anything needs tweaking. |
|
I've reviewed the diff between 5.0.0.beta2 and 5.0.0 and there are no changes to the form styling that need any tweaks. I've bumped the dependency and synced I'll have a look at the documentation and see what needs updating there. |
|
@mhw Because all kudos go to you 🙇♂️ Would you like to create the official PR to heartcombo/simple_form? It's basically just the update of |
|
Sure, I'll take a swing at that. Thanks! |
|
Thanks for the work @mhw and @m5o! Yes, I think it's easier for SF if we just keep the most recent version of the initializer there, and point people via readme/docs/generator install readme to the v4 generator on the app here if that's what they need. (I'm assuming that most people setting up SF + Bootstrap would do on a new app and are likely going with v5 in that case.) |
|
Thanks a lot @mhw 🙏 |
I wanted to get Simple Form working with Bootstrap 5 for a new application I'm working on. To make sure I did a complete job I've updated the example application as it seems to cover most of the form variants. This PR contains the updates I've made to get things working.
I'm not sure how you might want to handle the release of Bootstrap 5: while I'm sure there'll be some demand for Simple Form being updated when Bootstrap 5 ships, I imagine continued support for Bootstrap 4 will be needed for a while too. As the Bootstrap assets are pulled in to this app as a gem dependency it would be tricky to support both versions from one instance of the app. Perhaps a second instance of the app could be deployed, but that might mean keeping the
masterandbootstrap-5branches separate.Similarly, when adding this to the
simple_formgem it might be worth keeping the generator for Bootstrap 4, at least for a while.Key points:
Bootstrap 5 drops the
.custom-*styles as they've been largely merged into the.form-*ones. I've dropped the custom form sample and the chunk of the initializer that implements it.Floating label support is now built in, so I've converted the example to use the Bootstrap 5 classes and removed
_form_floating_labels.scss. Selects withmultiplearen't supported though, so I've removed that from the example.Input groups with validation feedback need a
.has-validationclass and the feedback pulled inside the input group. This works fine for the Simple Form generated markup as it will only create a single.invalid-feedbackelement. The HTML inapp/views/examples/input_groups/_bootstrap.html.erbhas both.invalid-feedbackand.valid-feedbackelements, and loses the rounded end on the input group - see Fix input group border radii twbs/bootstrap#31953 and Missing border radius on input group with validation feedback twbs/bootstrap#25110 (comment).Still to do:
Fixes #323