bootstrap-ui: Bootstrap 5 Support - Tasks and problems

It seems that overall, supporting BS5 will not require too drastic changes, there’s a few things broken, but it’s absolutely nothing like the BS3 to BS4 transition, most of the generated HTML seems compatible as-is.

Here’s a most likely incomplete list of problems/tasks that I’ve found so far (some of them might also be problems in the current version, which can be backported later on).

General

• Upgrade dependencies (drop jQuery, upgrade Popper to 2.x).
• Screenreader-only content is not being hidden (sr-only has been renamed to visually-hidden).
• Update custom CSS according to browser support changes (prefixes no longer required, etc).
• Update documentation.

Form Helper

• Labels are missing bottom margins (they now require a form-label class).
• Controls are missing bottom margins (.form-group has been removed).
• Inline multi checkbox groups are not inline aligned (.form-inline has been removed).
• Remove custom controls, the “custom” style is now the default.
• File input not rendering correctly (.form-control-file has been removed).
• Range control labels are vertically misaligned in horizontal forms.
• Select controls should use form-select instead of form-control.
• Input group addons no longer use a wrapper (.input-group-append and .input-group-prepend have been removed).
• Tooltips do not toggle anymore (data-toggle has been renamed to data-bs-toggle).
• Combined inline controls collapse into each other (.form-inline has been removed).
• Checkbox help text sticks to the right side of the label (.form-text does not set block level display anymore).
• Use rows and columns for inline forms.
• ~Custom input classes for radio and checkbox controls prevent is-invalid from being added (problem is in core radio widget, it merges options using +).~ Not worth the hassle right now.
• Check if and where pt classes are still needed… they are needed for range, radio and multi checkbox.
• ~Remove no longer available form-group and form-inline?~ Keeping them should do no harm, in fact, they make it easier for people to apply their own styles.
• ~Remove seemingly no longer needed d-block classes for labels?~ Actually still required.
• Remove backwards compatibility tests?
• Add support for help text association using aria-describedby?
• Add support for multiple ID reference lists for aria-describedby, and include references to error messages additionally to help text.
• Add support for floating labels? They are a bit tricky, in horizontal forms, labels would need to be grouped with the control in the right column, and for inline forms the label would need to be not hidden.
• Add support for multiple input group text addons?
• Add color control?
• ~Add datalist support?~ Not yet.
• Add switch support?
• ~Add support for toggles?~ Nah…

Html Helper

• Badges have no background.
• Remove deprecated label() method.

Flash Helper

• Flash messages cannot be dismissed (data-dismiss has been renamed to data-bs-dismiss).
• Flash message close icon is not rendering correctly.
• Add support for (custom) icons via options?

Icons

• Drop Font Awesome, use and include Bootstrap Icons by default instead?

Bake templates / Template styles

• dashboard.ctp navbar is rendering the brand incorrectly.
• dashboard.ctp sidebar layout is broken.
• view.ctp renders text column types incorrectly.
• login.ctp is missing margins.
• login.ctp should render Flash messages and form inside of the same container?

---

I’ve already done/fixed some things, because why not, I was already on it, so I could as well just do it. I’ll push an open PR shortly.

However I’ve only taken care of actual necessities so far, as other problems/tasks require some feedback, specifically the ones that have a question mark. If anyone has any input on this, it would be very much appreciated!