v5.0.0-beta3

Bootstrap v5.0.0-beta3

• GitHub release
• Blog post

---

Boosted v5.0.0-beta3

🚀 Features

You may want to refer to Bootstrap v5.0.0-beta3 changelog for an exhaustive list of features and changes (not everyone of them has been themed according to Orange guidelines).

Besides, loads of new examples have been added with Bootstrap beta 3. One of the next steps will be to apply brand-compliant appearance to them.

Components

Porting v4 components to v5 is continuing! You can still have a look at the v4->v5 draft migration guide.

• Stepped Process: Stepbar from v4 is now here ! (#636)

v5.0.0-beta2

Bootstrap v5.0.0-beta2

• GitHub release
• Blog post

---

Boosted v5.0.0-beta2

🚀 Features

As an intention note: we're starting to use custom properties, mask and filter as much as possible—as long as it decreases the compressed minified file size.

Core

• Variables: introduce $boosted-variable-prefix (9c6a30f)
• Variables: use custom properties for repeated SVG as data URIs (c98e700)
• Mixin: New target-size() mixin (056404b)
• Mixin: New button-icon() mixin (f04faa6)
• Option: introduce $enable-fixed-header to prevent focus from being hidden under fixed header, by using scroll-padding-top (#622)

Components

Finally, some v4 components got implemented in v5! To ensure you're making things great, have a look at our draft migration guide.

• Pagination: use filter instead of inlined SVG (0a9535a) — later replaced by mask in #621
• Carousel: Orange branded 🎉 (#550 #551 #573 6cc222ee)
• Forms: Orange branded disabled states :tada (#586)
• Link with chevron: implemented 🎉 (#595)
• Back to top: implemented 🎉 (#600)
• Modal: Orange branded 🎉 (#611)
• Badges: use functional colors (#618)
• Utilities: add & document aliases for .bg-* utilities to highlight supporting color usage (#618)
• Buttons: with icons, branded 🎉 (#621)
• Buttons: social buttons, implemented 🎉 (#621)
• Toggle buttons: with icons, and no outline, branded 🎉 (#621)

📖 Docs

• Syntax highlighting now provides sufficient contrasts (#589)
• details and summary in docs now look like accordions (e1f379ef)
• Accessible markup for decorative SVGs (0a2f616c5)

🧰 Chore

• Percy: add Cheatsheets to snapshots (b343fe2)
• Pa11y: update exclusion list by removing .chroma, [disabled] and [readonly] selectors (2a82eab and 97d3b3c)
• CI: allow to skip CIs, depending on paths for push event or on labels for pull requests (#612 #613). Have a look at the wiki.

v4.6.0

Bootstrap 4.6.0

• GitHub release
• Blog post

---

Boosted

⚠️ Breaking changes

• Grid: following the latest grid refactor in 4.5.3, $grid-gutter-width is now set to half a spacer. If you rely on this variable in your custom code, you should now multiply it by 2.
• Colors: $theme-color-interval increased from 8% to 10%. If you relied on this variable or on the theme-color-level() mixin, please take this change into account.

🚀 Features

• Forms: Orange branded disabled state (#587, backport of #586)
• Carousel: Orange branded controls and indicators 🎉 (#593)
• Icons: add statistics icon (#588)

🧰 Chore

• docs: moved to Hugo (#575)
• grid: add deprecation warnings for make-gutter() and make-container-fluid-widths() since they won't land in v5 (#562)
• BrowserStack: define browserNoActivityTimeout to 60000 in Karma conf

🐛 Bugs

• o-tabs: drop unwanted underline (#530)
• o-megamenu: ensure top position for submenus (#538)
• grid: ensure small gutters depends on main gutters (#541)
• navbar: $grid-gutter-width already divided after #541 (b588d8e43)
• supra nav: fix spacing (b92e24f35)

📖 Docs

• custom carousel: update examples and Boostwatch (#528)
• navbar: add a deprecation callout for .navbar-light (#562)
• chore: Update SRI hashes
• chore: Fix Swiper version number
• chore: Switch to JSdelivr CDN
• chore: Check for Tarteaucitron before initializing it
• chore: improve Tarteaucitron usage (#533)
• typos: Resource instead of Ressource (#577)
• syntax highlighting: use brand's color palette and ensure contrasts (#590)

v5.0.0-beta1

Beta release means introducing major breaking changes, among which RTL support 🎉 This is both the biggest feature ever reversed from Boosted and the biggest change in Bootstrap history. What a day!

Bootstrap v5.0.0-beta1

Since there's much more to discover, Bootstrap made an announcement post on their blog:

• upgrade to Popper v2,
• namespace for data-* attribute to data-bs-*,
• states support in utility API,
• etc.

Please read Boostrap's full changelog and ensure to read the migration guide carefully since there're tons of renamings.

Boosted v5.0.0-beta1

Boosted on its side should be done with reversing from now on, and start a new process of developping and forwarding custom, branded components. It kind of started with Pagination Dots (#573) and will continue with a roadmap better organized than ever before!

🚀 Features

• RTL: Orange branded, using Helvetica Neue Arabic, dropping letter-spacing everywhere and customized arrows.

🐛 Bug fixes

• alerts: ensure long content doesn't overlap the icon (2ecade3e)

🧰 Core

• Percy: upgrade snapshot action to 0.1.2 (1b335b2)

v5.0.0-alpha3

Bootstrap v5.0.0-alpha3

As usual, Bootstrap made an announcement on their blog—and you can read the full changelog on GitHub.

The main changes are:

• accordions are now a separate component, not relying on cards anymore;
• File input are now styled with CSS only, no need for a weird markup and a JS plugin anymore;
• .d-grid and .gap-* utilities came in and should change the whole game;
• Edge Legacy support has been dropped;
• Dart Sass is now the main compiler, since LibSass is deprecated;
• The whole color system has been rewritten for consistency and ease of use—and a few contrast ratios are improved in the move;
• CSS custom properties are now prefixed (using bs- as default), using a new Sass variable.

Please read their changelog or post carefully before updating :)

Boosted v5.0.0-alpha3

As for alpha2, a large part of our work was done in Bootstrap directly (mostly on accessibility, CSS and documentation). And our RTL feature is being reviewed and should land in the first beta release, probably as one of the latest breaking changes in v5!

🐛 Bug Fixes

• forms: ensure .form-check-input is squared in Chromium-based browsers (010c909)

🚀 Features

• accordion: Orange branded 🎉 (69a97d9)

📖 Docs

• icons: drop content to only mention Solaris (90af24b)
• analytics: massive refactor of our Tarteaucitron implementation (#531, #532, #534, #535)
• skip links: use a nav tag with aria-label (3ea50d0)

v4.5.3

Bootstrap 4.5.3

Bootstrap 4.5.3

Boosted

Refactors

• grid: make-gutters() mixin now has a fourth argument to workaround a new stylelint rule (#488 (diff))

📙 Brand

• megamenu: drop margin-right for close button (95636efd)
• colors: ensure links get contrast color in background utilities (568a0e8) (!)
• breadcrumb: background-colored example, introducing dark-variant for separator (94fcde1)
• o-footer: adjust spacings and sizing to get closer to the UI Kit (#509)
• buttons: drop transitions, mostly to ensure split button doesn't feels weird on hover (d7c0d18) (!)
• o-link-arrow: drop underline on default state (f58256e)
• cards: adjust spacings to get closer to the UI Kit (#509)
• navbar: ensure height is correct, even with minimised megamenu (5eaf602f)
• dropdown: too much horizontal spacing (970fe32)

🐛 Fixes

• cards: ensure cards groups' margins stick to spacers (#484)
• reboot: ensure legends are bold (#477)
• badges: middle aligned (#471)
• badges: use supporting colours for backgrounds (#466)
• text utilities: drop !important to match text-emphasis-variant() (#465)
• pagination: add default vertical margins (#467)
• dropdown: ensure to rely on dropdown state to rotate caret (#487)
• buttons & inputs: fix inacurrate line-height since latest type scale changes (#495)
• o-stepbar: smaller margin between stepbar items (#497)
• RTL: ensure value directives are used and RTLCSS runs after CSS compilation (b8d17ff)

📖 Docs

• tables: revamp classless tables in docs theming (#483)
• badges: drop the em part since Boosted uses rem (#471)
• contrasts table: update content (#461)
• o-footer: ensure to use inversed social buttons in o-footer (#493)
• modal: update Orange popin old example (#492)
• megamenu: improved examples and wording (#509)
• boostwatch: fix a few examples (4d86d51)

v5.0.0-alpha2

Bootstrap v5.0.0-alpha2

As usual, Bootstrap made an announcement post on their blog—and you can read the full changelog on GitHub.

Apart from docs improvements, the main features are:

1. dark mode for carousel and dropdown;
2. refactored close button (reducing the gap Boosted one!)
3. improved colors to set $min-contrast-ratio to 4.5 —another gap filled with Boosted 😇
4. renamed .sr-only to .visually-hidden,
5. new utilities (for positions and border-width mostly).

RTL (PR by your very own) is currently planned for alpha 3 🎉

Boosted v5.0.0-alpha2

This is a much lighter release for Boosted since we've basically worked a lot on Bootstrap directly. However most v4 changes have been forwarded to v5 and our documentation evolved quite a lot.

🐛 Bug Fixes

• alerts: ensure icon is properly sized (d10ed1a)
• cards: .card-footer's bottom padding (7054f27)
• color: better matching light color (02f4e25)
• grid: gutters change above lg breakpoint to match the brand (9113a8d)
• grid: missing interpolation (62ea99b)
• reboot: ensure legend are bold (45e8d4d)
• reboot: links with inline-block display cannot break when they need to (4ac2c39)
• spinners: drop growing spinners (1831f13)
• split buttons: missing .active & :disabled states (3a68f31)
• tooltips: ensure content is left-aligned (b255cdc)
• typography: cleaner font-stack, and better matching typographic scale (4694e07)
• utilities: better matching with the brand for some color values (5e82914)
• utilities: drop color exception in color utilities (acfc5e9)

🚀 Features

• pagination: add default vertical margins to pagination (c37b86f)
• reboot: handle <var> styles in reboot (ba62352)
• reboot: use #666 for code element (26a1aae)

🎨 Palette

• colors: final adjustments for accessible orange handling (7c5e781)
• colors: use #ff7900 as primary color & drop color-contrast() bypass for Orange ❤️ (fece01e), closes #ff7900
• colors: use Orange Base UI color names as design tokens (142c851)
• logo: drop useless id (c8dd405)
• logo: improve size and markup again (63323c8)

📙 Brand

• progress: Orange branded 🎉 (36ceacd)
• cards: Orange branded 🎉 (fde26b4)
• spinners: Orange branded 🎉 (ed72efe)
• .btn-check: ensure to match the brand 🎉 (d3438ab)

📖 Docs

Check out our brand new "Design Guidelines" section, meant to be a high-fidelity implementation of Orange Web UI Kit, sharing as much as possible layout and IDs.

🧰 Chore tooling

Boosted v5 is now protected by automated accessibility tests with Pa11y, and visual regression testing using Percy. Pull request cannot be merged in v5-dev if one of them is failing 🎉

v4.5.2

This release comes with a breaking visual-only change to implement latest Web UI KIt updates: the contrast color against our primary orange #ff7900 is now #000 — to get closer to a WCAG 2.1 compliance ❤️

Bootstrap

• Bootstrap 4.5.1
• Bootstrap 4.5.2

Boosted

Refactor

• RTL: drop o-rtl.scss to prefer using RTLCSS directives, and fix carousel arrows (8316284)

Bug Fixes

• alerts: lock icon size (29113f1)
• breadcrumb: ensure separator won't shrink when multiline breadcrumbs, to fix #394 (89aa094)
• buttons: disabled danger button color was missing (89cf6ed)
• buttons: ensure focus-visible is used on toggle buttons (aaa8e87)
• buttons: sizes for .btn-icon (d9bc92a)
• carousel: ensure img are 100% wide (68731b8)
• color: better matching light color (8c59509)
• dropdown: use only padding to handle height (3d6878e)
• links: harmonize links underline over the codebase (74fdd28)
• list-group: increase spacings to ease list-group alignment (85262af)
• modal: align sizes with breakpoints (9170a2e)
• pagination: ensure contrasts for focus state to fix #397 (d9c6fc0)
• scrollspy: aria-current set to location instead of page to fix #455 (add2084)
• toasts: smaller close button (eae416b)
• tooltips: ensure content is left-aligned (170189e)

Features

• cards: Orange branded 🎉 (13c6cbc)
• progress: Orange branded 🎉 (206b983)
• spinners: Orange branded 🎉 (aa7bbb5)
• colors: use #ff7900 as primary color & drop color-contrast() bypass for Orange ❤️ (57d07be), closes #446
• fonts: using Helvetica Neue Arabic 🎉 (6cc2d72)
• logo: drop useless id (9df650c)
• logo: improve logo again, closes #438 (d6f3a77)
• modal: drop .o-modal overrides to fix #391 (dfff6e6)
• reboot: handle <var> styles in reboot (1460d1d)

Docs

• docs: fix sample page jQuery SRI (08ba13f)
• docs: some English typos (0d917a4)

v5.0.0-alpha1

Bootstrap v5.0.0-alpha1

You may want to read Bootstrap's announcement on their blog.
The most importants part are: dropping jQuery and IE 11, and a new utility API which makes extremely simple to customize design tokens!

Boosted v5.0.0-alpha1

Boosted v5.0.0-alpha1 is basically Bootstrap's one, Orange branded. There're no Boosted custom components in v5 for now, but a few noticeable differences with Bootstrap:

1. using Helvetica,
2. improving focus visiblity thanks to :focus-visible polyfill,
3. defining a mininum contrast ratio of 4.5:1 instead of 3:1,
4. and obviously, branded components and core variables.

If you want to have a look at Boosted v5 roadmap, you'll find it in this repo's projects.

Components

Alerts

• alerts: dismissible alerts height (a86753e
• alerts: icon sizes and alignment (a36c058)
• alerts: new variant for close icon in alerts (1da0abe)
• alerts: Orange branded 🎉 (772d3da)

Badges

• badges: proper alignments and spacings (d93f738)
• badge: add sizes variants to badges and include a white info version when badge is large enough (859cc5e)
• badge: improve sizes variants' spacings (33b52e6)
• badge: restore Bootstrap defaults and unset letter-spacing (75ffee5)

Breadcrumb

• breadcrumb: matching the brand (8d9c6fa)

Button group

• button-group: Orange branded 🎉 (3ec1cc6)
• button-group: ensure active and focus buttons displays outlines (68bc83b)

Buttons

• buttons: ensure text is centered (aefea46)
• buttons: enhance focus with box-shadow alongside outline-offset (a66c567)
• buttons: Orange branded 🎉 (c06e355)

Modals

• modal: Orange branded 🎉 (7117d47)
• modal: get Bootstrap modal sizes back (7c377bc)

Close button

• close: Orange branded 🎉 (2dab62d)
• close button: use Zeplin's defined cross for close button (332f4f3)
• close icon: get outline back on :hover (7deafac)

Forms

• form-checks: needed some tweaks after pulling Bootstrap's master (1e78211)
• forms: drop .form-control-sm leftover (00789c2)
• forms: feedback message should be small (cca3f1c)
• forms: remove label color change depending on status for #249 (f4a1b8d)
• forms: convey status using icon in feedback message to stop relying on color only, for #249 (95e6f6c)
• forms: custom select arrow sizing+position (3ac4187)
• forms: custom switch icons sizing+alignment (a2a2ffe)
• forms: get background-image back for custom checkboxes (edfdded)
• forms: get rid of form-*-sm things, forbidden by the brand (8d41b61)
• forms: labels positionning (5be3b52)
• forms: Orange branded 🎉 (7c71cff)
• forms: remove info icon from invalid custom select (a4c82db)

Navbars

• navbar: ensure logo's hit target is properly setup for master logo (de81a44)
• navbar: get padding back on containers (b7fe932)
• navbar: h2 → h6 unecessary in .navbar-brand (190e1ef)
• navbar: Orange branded 🎉 (9bcbab0)
• navbar: restore navbar color schemes (fdf17a1)

Navs

• navs: Orange branded 🎉 (3ac8c25)
• navs: Orange branded nav-tabs 🎉 (af93f30)

Pagination

• pagination: improve focus styles (e14c2dd)
• pagination: need at least intial size for #283 (aedf246)
• pagination: Orange branded 🎉 (108e17c)
• pagination: remove pagination size variants forbidden by Orange Brand for #283 (cf70027)

Tables

• tables: more precise line-heights (553cb10)
• tables: vertical spacings were wrong (02c7b9a)
• tables: missing unit in table-cell-padding (acaf48a)
• tables: ensure tables match Orange Digital Guidelines (af31c78)
• tables: remove .thead-{dark|light} variants ([dcd2bbd](https://github.com/Orang...

v4.5.0

Bootstrap 4.5.0

Highlighted changes

• New interaction utilities. Quickly set user-select with the new utilities and Sass map.
• New Reboot style for pointer cursors. We now include a role="button" selector in Reboot to set cursor: pointer on non-<button> element buttons.
• Examples are now downloadable. We've added a script to zip up and offer all our Examples as their own download from the docs.
• Saved ~5% from the compressed minified JS builds.
• Redesigned docs homepage and navbar to increment us towards v5's new docs design.
• Deprecated bg-gradient-variant mixin as it's being removed in v5.
• Updated to jQuery v3.5.1, Jekyll v4, and dropped Node.js < 10.

Boosted 4.5.0

To sum up:

• Bootstrap's carousels and Boosted's custom carousel now looks the same;
• Mégamenu was very buggy for a while: works fine now, is mobile-first and RTL compliant;
• Pagination works better in small screen, by limiting the number of displayed items depending on viewport and wrapping as a worst case scenario;
• Improved IE11 compatibility;
• sass-math-pow is not a dependency anymore 🎉

Details

Orange brand

• italic: em & .font-italic now render as bold to match the brand and improve retro-compatibility with Bootstrap (158f5e3)
• breadcrumbs: ensure breadcrumbs items are underlined to fix #372 (6389048)

Carousels

• carousel: play/pause button not working (7a4045d)
• carousel: remove legacy overrides in custom carousel to fix #328 (b8ae072)
• carousels: prev/next buttons in RTL (728e805)
• carousel: same design for native and custom carousels (3df37db)
• o-carousel: harmonize prev/next icons with BS carousels' (265f44b)

Mégamenu

• megamenu: close mega-menu-panels when closing mega-menu (5679eb1)
• megamenu: default MediaQuery should always match (d5172ad)
• megamenu: default to mobile view (e7c1096)
• megamenu: ensure subnav are shown when going back to desktop (d4e35fb)
• megamenu: event listeners unbinding doesn't work, wrapping functions instead (738bc5a)
• megamenu: fully RTL compliant 🎉 (b7d871e)
• megamenu: overlapping subnav items on IE11 (12cddab)
• megamenu: remove .active when closing megamenu to fix #330 (4ba00d1)
• megamenu: handle orientation change correctly (a06f188)
• megamenu: improve current visual state on small screen (1d47d79)
• megamenu: listen to media query events instead of window.orientationchange (7246490)
• megamenu: mobile first styling to close #340 (c8d0e8e)
• megamenu: ensure event listeners & ARIA are only set up on breakpoints they should, to close #330 (92e449e)

Pagination

• pagination: ensure it wraps if needed, to close #317 (02406a6)
• pagination: limit number of pagination items to display on smaller breakpoints for #317 (4bad17b)

Accessibility

• color contrasts: use @ysds lookup table to simplify color-yiq() (c86758a) to ensure more reliable contrast ratio calculation— and to drop sass-math-pow dependency!
• focus-visible: check data-attribute instead of class to close #324 (5255f21)

IE11 compatibility

• alerts: ensure additional content won't overlap icon or button in IE11 (f0a0470)
• IE11: missing block display for main (3baf228)
• stepbar: truncated labels on small screen in IE11 (cf74cb5)

Various fixes

• badge: missing spacing since .btn is now inline-flex — close #319 (5da7236)
• cards: ensure accordions headers aren't underlined (cbad744)
• forms: feedback icons got shrinked. Fixes #354 (a73db46)
• modal: ensure to reset transition when modal is shown, to fix #355 (e2e1cd1)
• navbar: current item indicator when last child, to close #321 (bd6bf79)
• navbar: dropdown & icons alignment to fix #373 (9214cfa)
• o-tabs: arrow icons size & position (1b1b11c)
• o-tabs: ensure accordions headers aren't underlined (cbad744)
• spinners: ensure color variants still work, to close #318 (6f8850c)
• tablesorter: reverse asc/desc icon to close #364 (6ab5c70)
• transition: remove prefers-reduced-motion refactor — counter-productive ([6f0dc39](https://github.com/Orange-OpenSource/Orange-Boos...