Boosted v5.3.0

[julien-deramond]

Boosted v5.3.0 is here! — following Bootstrap v5.3.0 — This version is based on the final stable release of v5.3.0 which has been a monumental effort to revamp the codebase for CSS variables and color modes, one that will see continued changes leading up to an eventual Bootstrap 6. We took the opportunity to also add specific Boosted content including a lot of bug fixes, documentation updates, and some new features.

Please review the GitHub v5.3.0 changelog for a complete list of changes since our previous release, and have a look at Boosted website in version 5.

Don't hesitate to use our migration guide from v5.2.3 to v5.3.0 where you'll find all the needed details to bump the Boosted dependency.

Color modes!

Bootstrap released the color modes feature, including the dark mode. This is a great achievement for Bootstrap team and users.

⚠️ ⚠️ ⚠️ However, Boosted doesn't fully implement dark mode yet! So please don't use this feature yet! Theme selector has been hidden from our documentation so you're not tempted to use it anyway. But the inner mechanism can appear sometimes in the documentation; otherwise, it'd be a nightmare for us to maintain.

Indeed, the full mechanism is available in Boosted but we haven't had the time to finish the specifications for the Orange world:

• Design and rendering of all the components
• Update of the UI kits and the DSM
• Architecture, color mapping, and implementation of all the components and utilities within Boosted

Please be patient, it's going to be our main focus during the next months, and it'll be embedded asap in one of the next Boosted releases.

New example page: Download app

A new Download app example page is now in the documentation with a double-purpose:

• provide an example to reuse for your websites if you need to highlight some available apps
• it is used for Orange Design System communication to provide information about ODS Android and ODS iOS, and their demo applications.

UI Kit v5 rendering updates

Based on the latest UI Kit v5 released for the designers, Boosted has been updated to take some evolutions into account.

Buttons

TikTok is now part of our social buttons.

There's also a new outline secondary button that can be useful on a colored background.

Carousel

For better UX and accessibility, our carousels now integrate a play/pause button directly into the component!

Close buttons

Used in a lot of places (modals, offcanvases, toasts, etc.), for accessibility reasons, close buttons now display a tooltip on hover.

There's also a new eco-design variant of close buttons.

Footer

Footer now handles active page with active links and accessibility improvements.

Popovers and tooltips

New rendering for popovers and tooltips!

Forms and form controls

Help texts and some spacings have been updated in the documentation. But we also worked on some form controls!

Color picker rendering has been changed:

For better usability, an input range example has been added in the documentation to display the current value:

We took this opportunity to fine-tune its hover and active colors.

Utilities

We tend to have the exact same utilities as in Bootstrap even if they could lead to some bad usage by being not compliant with Orange Design System (that's why you can see some design callouts in our documentation).

In this spirit, we've reintegrated:

• all the text colors utilities from Bootstrap. Please be careful when you use them.
• .border-4 and .border-5

And we also changed the values of our .lh-* utilities so that they are based on a multiplication of the base font size.

Documentation

In almost all previous Boosted versions, users will have a banner on top of the header to inform them that a new version of Boosted is released.
We also cleaned up some old versions to remove references to alpha or test v4 versions to save some trees 🍃

You can contribute

Orange developers and users, be our guests! Play with everything and we'd be pleased to have new issues on GitHub to spot some bugs or suggest features and improvements, and get in touch with us on Orange internal communication tool.

You can contribute at any time! Check our "easy pick" label that label could help you to find some easy tasks for your first contribution.

You can also take a look at Boosted boards to follow our progress.

Bootstrap team is currently working on the v5.3.1. As usual, we will integrate their commits in our main branch and continue working on Boosted specific components, utilities, examples, etc.

---