blacklight_range_limit
blacklight_range_limit copied to clipboard
Support Bootstrap 5
With Blacklight adding Boostrap 5 support in release v7.20.0, Bootstrap 5 support for the range limit would be nice as well.
@vstollen Do you have any sense of what that would look like, what would need to be changed for Bootstrap 5? If you did, or wanted to figure it out, that would probably help make this more likely! Even just sharing what you've noticed not working in Bootstrap 5!
I think Blacklight currently supports BOTH Bootstrap 4 and 5 somehow, I'm not sure of the details. So I guess this has to be the same.
I'm not sure, if I got everything, but here is what I've found:
-
sr-only
is nowvisually-hidden
-
input-group-append
is not needed anymore - The close button is broken. The same applies for blacklight itself, so I've created an issue there: https://github.com/projectblacklight/blacklight/issues/2518
In our installation, this meant:
- Adding
visually-hidden
in: - Removing the
div
in line 64 of_range_limit_panel.html.erb
- Applying the fixes proposed in https://github.com/projectblacklight/blacklight/issues/2518 for lines 3 and 4 in
range_limit_panel.html.erb
The only problem I see in this is, that the div
I removed in 2. is needed in Bootstrap 4, but seems to break the layout in Bootstrap 5. But maybe there is another solution for that?
I can submit a draft pull request with these changes (maybe except 2.) later.
For reference: Bootstrap Documentation, Migrating to v5.
Maybe we could do something for 2. with the sr-only
and visually-hidden
classes.
We could add both versions and sr-only
would hide the BS4 implementation, visually-hidden
would hide the BS5 implementation. To not affect accessibility too much, we could add aria-hidden
to one of the two implementations.
I am not using Bootstrap 5 yet and haven't looked into it, but I can test any PR you make on my Bootstrap 4 app.
@jrochkind I've created the PR, but only tested it in our Bootstrap 5 app.
Thanks @vstollen , linking to the PR is convenient, looks like it's #178.
I'll test it in my Bootstrap 4-using app presently.