Odoo Changelog — 2022-07-07

Thursday, July 7, 2022

1 change

Refactoring(1)

Code cleanup and technical improvements

[MERGE] *: Migrate Bootstrap to version 5.1.3

Enterprisemasteraccount_3way_matchaccount_accountantaccount_assetaccount_batch_paymentaccount_budgetaccount_consolidationaccount_disallowed_expensesaccount_followupweb_studioHIGH

Odoo Enterprise was updated to use a newer Bootstrap interface framework, modernizing the look, behavior, and browser support across many accounting and related screens. This matters because users may see small visual changes in forms, buttons, badges, tables, dropdowns, and reports, while the system benefits from reduced legacy dependencies and better accessibility-oriented contrast handling.

Original PR description

Migrate Bootstrap to version 5.1.3

some highlights of BS5 changes:

- Browser support: Internet Explorer is definitely gone (Goodbye! We won't miss you) ; not a huge change on the backend as we didn't supported it anymore anyway.
- Bootstrap's Javascript components doesn't use jQuery anymore! A compatibility layer is present but with some quirks, so avoid to use it if possible ; less jQuery is less overhead!
- The color contrast system in BS5 relies directly on WCAG 2.0 contrast algorithm (https://www.w3.org/TR/WCAG20-TECHS/G18.html). Some visual elements (like texts/buttons/...) may have a slightly different contrast than before.
- Background color classes ('bg-') only set the background color and don't change the foreground (aka. text) color anymore. We backported the '.text-bg-' from Bootstrap 5.2 to restore the previous behavior ; or use separate background ('.bg-') and foreground ('.text-') depending on your usecase.
- Media Breakpoint's usage has changed
- More and more CSS utility classes are introduced: use them in your templates instead of adding more custom CSS rules.
- Bootstrap still provides a quite powerful grid system, but please use it as intended by the framework (I'm looking at you '.col' without its parent '.row'). Also while keeping the same API, it was internally changed ; the main issue that you can encounter is that columns no longer apply 'position: relative', which could be solved by adding the '.position-relative' class when needed.
- BS5 doesn't allow to use multiple components on the same element (ie. adding a tooltip on a dropdown). It generates this kind of error: "Bootstrap doesn't allow more than one instance per element. Bound instance: bs.tooltip" (cf. https://github.com/twbs/bootstrap/issues/33940#issuecomment-838454777).
- Badge usage has changed a bit: '.badge' still exist but is now extended using utility classes (text and background colors, border-radius for pills) instead of specific '.badge-*' classes.
- '.input-group-{append,prepend}' are gone! You can now just add buttons and '.input-group-text' as direct children of the '.input-group'.
- Popover/alert components' close button use the new class '.btn-close'.
- Dropdown: the '.show' class is not added anymore to the parent group of dropdown ; some CSS selectors may still need some love.
- All data attributes of BS5 are now prefixed by 'bs-' (ie. 'data-toggle' is now 'data-bs-toggle').

Bootstrap documentation
https://getbootstrap.com/docs/5.1/migration

Task ID: 2766483

#bootstrap#ui#accessibility#modernization#accounting

Migrate Bootstrap to version 5.1.3 some highlights of BS5 changes: - Browser support: Internet Explorer is definitely gone (Goodbye! We won't miss you) ; not a huge change on the backend as we didn't supported it anymore anyway. - Bootstrap's Javascript components doesn't use jQuery anymore! A compatibility layer is present but with some quirks, so avoid to use it if possible ; less jQuery is less overhead! - The color contrast system in BS5 relies directly on WCAG 2.0 contrast algorithm (https://www.w3.org/TR/WCAG20-TECHS/G18.html). Some visual elements (like texts/buttons/...) may have a slightly different contrast than before. - Background color classes ('bg-') only set the background color and don't change the foreground (aka. text) color anymore. We backported the '.text-bg-' from Bootstrap 5.2 to restore the previous behavior ; or use separate background ('.bg-') and foreground ('.text-') depending on your usecase. - Media Breakpoint's usage has changed - More and more CSS utility classes are introduced: use them in your templates instead of adding more custom CSS rules. - Bootstrap still provides a quite powerful grid system, but please use it as intended by the framework (I'm looking at you '.col' without its parent '.row'). Also while keeping the same API, it was internally changed ; the main issue that you can encounter is that columns no longer apply 'position: relative', which could be solved by adding the '.position-relative' class when needed. - BS5 doesn't allow to use multiple components on the same element (ie. adding a tooltip on a dropdown). It generates this kind of error: "Bootstrap doesn't allow more than one instance per element. Bound instance: bs.tooltip" (cf. https://github.com/twbs/bootstrap/issues/33940#issuecomment-838454777). - Badge usage has changed a bit: '.badge' still exist but is now extended using utility classes (text and background colors, border-radius for pills) instead of specific '.badge-*' classes. - '.input-group-{append,prepend}' are gone! You can now just add buttons and '.input-group-text' as direct children of the '.input-group'. - Popover/alert components' close button use the new class '.btn-close'. - Dropdown: the '.show' class is not added anymore to the parent group of dropdown ; some CSS selectors may still need some love. - All data attributes of BS5 are now prefixed by 'bs-' (ie. 'data-toggle' is now 'data-bs-toggle'). Bootstrap documentation https://getbootstrap.com/docs/5.1/migration Task ID: 2766483