blacklight_range_limit icon indicating copy to clipboard operation
blacklight_range_limit copied to clipboard

Published 20 hours ago • verified publisher icon projectblacklight

Support Bootstrap 5

Open vstollen opened this issue 2 years ago • 6 comments

With Blacklight adding Boostrap 5 support in release v7.20.0, Bootstrap 5 support for the range limit would be nice as well.

vstollen avatar Nov 15 '21 15:11 vstollen

@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.

jrochkind avatar Nov 15 '21 16:11 jrochkind

I'm not sure, if I got everything, but here is what I've found:

  1. sr-only is now visually-hidden
  2. input-group-append is not needed anymore
  3. 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:

  1. Adding visually-hidden in:
  2. Removing the div in line 64 of _range_limit_panel.html.erb
  3. 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.

vstollen avatar Nov 15 '21 19:11 vstollen

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.

vstollen avatar Nov 15 '21 19:11 vstollen

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 avatar Nov 15 '21 20:11 jrochkind

@jrochkind I've created the PR, but only tested it in our Bootstrap 5 app.

vstollen avatar Nov 15 '21 22:11 vstollen

Thanks @vstollen , linking to the PR is convenient, looks like it's #178.

I'll test it in my Bootstrap 4-using app presently.

jrochkind avatar Nov 17 '21 15:11 jrochkind