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

v4.4.1

Boosted's v4.4.1

This version fixes a few bugs and add tons of small improvements to better fit Orange Brand Digital Guidelines.

From Bootstrap (unreleased)

• Allow percentages in container widths (0d08c74 in Bootstrap)
• Escape brackets in escape-svg() (35d5cbf in Bootstrap)
• Fix disabled .btn cursor (fbf294a in Bootstrap)

Bug Fixes

Forms

• forms: feedback icons on IE11 (1351de1)
• forms: remove label color change depending on status for #249 (f4a1b8d)
• custom range: obvious focus styles to fix #250 (0bc63c0)
• forms: default check inputs alignment (b2acac6)
• forms: remove text-shadow on :moz-focusring (ca6c08f)

Buttons

• button-group: ensure parents get .focus-visible class alongwith .focus one (0535720)
• button-group: remove .focus-visible on blur & focusout (19038b9)
• buttons: .btn-{size} variants were incorrectingly squared on .btn-info instead of .btn-icon" (cc9847f)
• dropdown: remove ARIA menu pattern to close #204 (d45b6d1)

Navbars

• navbar: current item alignment when minimized (9bd53fb)
• navbar: h2 → h6 unecessary in .navbar-brand (190e1ef)
• navbar: simpler alignmnet for right-end navbar (cd2434b)
• supra: update supra bar breakpoint for hidding on tablet (768px) (2b961b4)

Megamenu

• megamenu: cannot match design & have a predictable focus order… (8e004b2)
• megamenu: ensure height is removed when going backward (e3aea5e)
• megamenu: linter error on .attr() (3f3e8cf)
• megamenu: allow multiple megamenus in the same page bny using $.closest()… (066ebc0)

Tables

• tables: more precise line-heights (553cb10)
• tables: use the correct pattern for custom checkboxes in tables (520baf9)
• tables: vertical spacings were wrong (02c7b9a)
• tables missing unit in table-cell-padding (acaf48a)

Miscellaneous

• alerts: dismissible alerts height (a86753e)
• badges: missing variables after merging… (f03a086)
• bg utilities: remove useless aliases (d002cb3)
• breadcrumb: arrow alignment after last merge (60419cc)
• build: exclude essentials folder from postcss.config (b96c605)
• carousel: remove width & height attributes from inlined SVGs" (3f2196b)
• color: ensure .text-primary in .navbar-dark uses digital orange 2 (21db919)
• icons: missing space in str-replace function (d3928f0)
• icons: use Digital Orange 2 for icons meant to be used on a dark background (63227dc)
• o-footer: linting errors (dbedc08)
• pagination: do not use numeroted links when prev/next show labels (?) (d40d167)
• o-modal: diplicated selector (009557c)

Features

Alerts

• alerts: additionnal content example now uses the multilines version (bb4e806)
• alerts: adjust default alert size (bd866da)
• alerts: ensure alert level is accessible by using visually hidden text for #248 (0e6d5f6)
• alerts: ensure headings and additionnal contents match UI Kit (3eadc6d)
• alerts: icon sizes and alignment (a36c058)
• alerts: new variant for close icon in alerts (1da0abe)
• alerts: reduce spacing around icon in alert-sm (cd7bd6c)
• alerts: warning icon changed to circle (4fd768b)
• alerts: improve icon sizes handling(b8b2a4b)

Badges

• badge: add sizes variants to badges and include a white info version when badge is large enough (859cc5e)
• badge: improve sizes variants' spacings (33b52e6)

Breadcrumbs

• breadcrumbs: improved RTL support (6d69515)
• breadcrumbs: use aria-current=location instead of page (da743b5)

Buttons

• button-group: border color on dark background ([08b10b3](08b10b354c130da968e70b...

v4.4.0

Bootstrap's v4.4.0 — v4.4.1

• Bootstrap's release
• Bootstrap's release

Boosted's v4.4.0

Since there's tons of branding changes, be careful while migrating from previous releases. Visual changes will include:

• a few color changes, and specificially .text-* and .bg-* utilities are now locked with solid color and background-color to ensure contrasts.
• type scale evolved, with letter-spacing and line-height changes that could change the way things show up (especially for big text, like displays and headings).

Breaking changes

Alongwith some refactors, things could have move or be removed, but this shall be totally logged above.

• adedd: WICG's :focus-visible polyfill in 43dd3397. Warning: as of 4.4.0, you'll need to add this polyfill yourself, as it's not currently bundled in boosted.js / boosted.bundle.js.
• moved:
  • _o-step_bar.scss → _o-step-bar.scss
  • _o-bullet_points.scss → _o-square-list.scss
  • mixins/_orangeIcons.scss → mixins/_orange-icons.scss,
  • _o-responsive_table.scss → _o-responsive_table.scss.
  • _o-nav.scss → _o-tabs.scss
• files dropped:
  • _o-special_font-size.scss
  • _orange-css.scss
  • _o-card.scss
• classes renamed:
  • o-nav-light → nav-tabs-light
• classes dropped:
  • .btn-outline-* and .btn-xlg
  • font-weight-*
  • .text-uppercase
  • .text-justify
  • .pagination-lg or .pagination-sm
• Browser support updated, mainly dropping IE10.

There might be more, but I did my best to log everything above.

Bugs fixed

• chore: Wrong use of a variable in _reboot.scss (#216)
• forms: Valid & invalid fields don't show any focus state (#191)
• custom forms: colors for valid/invalid states (7a9e5ee)
• nav-tabs: Active tab appearance KO in Nav light (#190)
• dropdowns: Dropdown focus and mouseover (#158)
• megamenu: horizontal layout next to responsive containers in v4.4.0 (3014f23)
• nav+pagination+dropdown: ensure there's no unwanted underlines on non-content links (6854009)
• o-footer: prevent o-footer .nav-link styles from leaking to tabs… (463b8bd)
• o-nav: reset margin on nav-tabs (67b859d)
• o-nav-local: allow full width o-nav-local and stick to wbe guidelines for spacings (afcfb7f)
• popovers: ensure dismissable popovers (links without href…) gets their button color applied (9721b3f)
• toasts: improve close button styles+doc (639081c)
• o-switches: misaligned icons and improved 3 way toggles, (d23a932)
• o-switches: focus visibility improved (87f16fd)
• SVGs: missing some background-sizes for IE11 (d2bbf2)
• JS: remove undefined method init for auto-initialisation on domcontentload (2781faa) since Bootstrap removed their init hooks…

Features

Focus enhancement

Include WICG's :focus-visible polyfill : in 43dd3397 for #169 #101 #166 but affects the overall library.

• focus-visible: add, use & document :focus-visible polyfill to improve #101 (43dd339)
• focus: improve focus style to close #101 (1f68d0d)
• bundle: focus-visible should be last item in external scripts array (f32c810)
• focus: improve focus visibility consistency across components (ab51eed)

Inlined SVGs with icons harmonization

For example, the close icon is now the same everywhere.

• icons: use states mixins in orange Icons (68f04f4)
• icons: ensure each statews are handled for each svg mixin (91a0bd3)
• icons: prefer inline-block to block for SVG icons (74266b2)

Scroll-up component with custom target

See #175 and #192 .

• scrollup: add an option to scrollup component to allow passing an anchor to replace the top of the page (d89e380)
• o-scroll-up: use the same chevron icon than in pagination, arrow links and breadcrumbs + clean up CSS and JS (e29caa7)

Orange master logo

• Filesize optimizations: #178 and #180

Social buttons improvements and new social networks

• #189 : Refactored the way social buttons are done by removing mixins (ebe80c4)
• social buttons: use Sass maps and advanced functions to handle customizable social media button, to close #179 (9973d15)
• social buttons: remove Google+ icon and examples after #179 (e1e5322)
• buttons: ensure social buttons are available even when orangeIcons' missing (cb33191)
• buttons: add Pintereset & Snapchat to social buttons (9c07cc8)
• social buttons: use visually hidden text instead of aria-label, in case of disabled CSS (987b244)

Orange Brand Digital Guidelines

The Web Browsing Digital Guidelines were reviewed and Boosted evolved accordingly to better match them — as well as Buttons, Form, Navigation, Alert and Table stencils.

Stepbar

• stepbar: aligning with brand's stencil, close #170 and close #125 (a9ccab6)
• o-step_bar: arrow position was wrong (b1d6673)

Accordions

• accordion: update accordion styles accordingly to navigation stencils, add sizes variant and improve focus visibility to close [#159](https://gi...

Boosted 4.3.1

Here's the version 4.3.1 of Boosted. That version includes the upgrade of bootstrap 4.3.0 and 4.3.1

But not only, we've done some work around brand alignement, and accessibility improvement.
Key features are :

• Orange small logo inclusion
• Right-to-left improvement
• Play/Pause button added to carousel samples

Bug Fixes

• autocomplete: add autocomplete="off" on all radio and checkboxes in doc as explain in v3 : https://getbootstrap.com/docs/3.4/javascript/#callout-buttons-ff-autocomplete firefox persist state during browsing https://bugzilla.mozilla.org/show_bug.cgi?id=654072 (e3ed81b)
• brand: update orange brand page with new small logo recommendations (2e0e20f)
• build: fix os plateform detection for rtl-build (9728f6d)
• build: move doc-rtl task after jekyll compilation (533fc03)
• build: remove unused variable (92d00cd)
• button: fix js error when linting (c896c95)
• button: update button plugin, also listen to the focusin/out on the input element to update focus classes (de4ae96)
• buttons: fix focus management in button plugin (c9a6de6)
• buttons: put back PR twbs/bootstrap#28587 to fix issue#100 (3e163c9)
• carousel: adding aria-label and title on the buton play/pause #98 (b8e5345)
• carousel: adding config js (aa3637f)
• carousel: adding title on buton prev/next #98 (a58960b)
• carousel: fix linting errors (453462f)
• carousel: remove useless css class carousel-button and swiper-button, replace btn-default by btn-info that manage the hover and focus effect + add aria-hidden on icon (8ad4d20)
• carousel: update button play/pause position let some space between carousel and button (18cf1e4)
• carousel: update carousel documentation, rework the way JS listen to click and update the icon (f18ed05)
• carousel: updated the outline 2px (ab2c168)
• cusotm-carousel: disable important scss #98 (7ed69c3)
• custom-carousel: adding play and pause button, update css. (2e45311)
• custom-carousel: fix css by unsetting the css position of small points and reducing the height of the custom carousel (101e793)
• custom-carousel: fix focus on button pause/play #98 (8d44495)
• custom-carousel: focusing on the button enabled, js checking element container, using color code, boosted mod comments #98 (c9974d2)
• custom-carousel: remvoe html tag inseide md file #98 (c44fd7d)
• custom-carousel: update css rules remove spaces (8be14e6)
• custom-checkbox: click on orange brackground enabled Closes #134 (b8ab1b3)
• custom-checkbox: remove unnecessary code #134 (69f2114)
• custom-form: putback outline for focus on custom radio and checkboxes (31a08e6)
• doc: add rel noopener to external links (1239bcb)
• doc: fix brokenlinks (6d6feb7)
• doc: fix comments on documentation that was missinterpreted by markdown (25321c1)
• doc: fix duplicate ID (7908b16)
• doc: replace inclusion of jquery from cdn to local one for examples pages (03ac0ff)
• doc: update checkboxes and radio components documentation remove autocomplete=off from sample code for copy/paste but keep it in live sample when it's relevant e.g: "this is checked checkbox" (f06f728)
• docs: fix invalid link to docs 3.4 (7b1ab08)
• dropdown: fix caret position for dropup (35b2cc0)
• example: fix dashboard jquery inclusion (b6891c1)
• example: fix duplicate ID and fix img height in carousel (5be56ca)
• examples: fix icon position on administration edition page (c598d28)
• examples: Orange-homepages fix the swiper and remove old codes (c7a9ef5)
• examples: replace jquery.js by jquery.slim in script inclusion (cfaae3a)
• form: fix is-required classes added by error on for instead of class tag (391946f)
• forms: fix border-radius declaration to use new mixin and fix lint errors (f2cf49c)
• forms: fix form validation message issue #112 small-font-size need to be 14px (6cf86c0)
• forms: fix validation tooltip position and add documentation about is-required class on label for required fields move from is-required > label to label.is-required. is-required > label css will be removed in v5 (1ebdbe9)
• modal: fix the modal position when body has overflow and scrollbar is displayed see twbs/bootstrap#28101 for more information (08605b0)
• modal: replace padding-right by right position for fixed element + add position-fixed to fixed selector, remove sticky-top from fixed content, and finish by removing all sticky content selector as they're useless see : twbs/bootstrap#27071 (3903f24)
• nav-light: moving in the tab section and correcting english grammar Closes #120 (e001e7e)
• navbar: remove custom class fixed-header added by o-navbar.js and replace it by native class fixed-header. At the end it replace the width 100% by left:0 and right:0 (21e0cb6)
• o-switch: rework o-switch css, update color as required per issue#118 and add sample with label inside ([c13027e](https://github.com/Orange-...

v3.4.1

• Security: Fixed an XSS vulnerability (CVE-2019-8331) in our tooltip and popover plugins by implementing a new HTML sanitizer
• Handle bad selectors (#) in data-target for Dropdowns
• Clarified tooltip selector documentation
• Added support for NuGet contentFiles

Boosted 4.2.2 fixes npm package from 4.2.1

boosted npm package v4.2.1 miss fonts and img folder in dist. This version fix that.

Remember of v4.2.1 release note
Here's the merge of Bootstrap 4.2.0 and 4.2.1 Bootstrap release note 4.2.0 Bootstrap release note 4.2.1

In Boosted we've work on brand alignement, and some bugfixes.

Here's the specific release note :

Bug Fixes

• accordions: collapse with option .multi doest work. elements selector was broken (388abaa)
• alerts: create outlined alerts with icons
• build: fix css prefix docs task to apply on the good path (98a2774)
• collapse: remove custom boosted aria-collapse attribute management from the plugin as it's manage in native by bootstrap now ([9913ad6]
• forms: update input form border color and invalid/valid states. Rework toggle switch following custom-switch added by bootstrap
• pagination: Update active and hover states and fix issue #89 remove hard coded value for pagination and use variable instead (1693b44)
• rtl: improve boosted rtl file. Fix icons flip on rtl mode

Features

• buttons: add new social network buttons, and create a new xlg button.
• umd: update js build with umd to take into account boosted specific plugins (f3b2b60)

Boosted 4.2.1

Here's the merge of Bootstrap 4.2.0 and 4.2.1 Bootstrap release note 4.2.0 Bootstrap release note 4.2.1

In Boosted we've work on brand alignement, and some bugfixes.

Here's the specific release note :

Bug Fixes

• accordions: collapse with option .multi doest work. elements selector was broken (388abaa)
• alerts: create outlined alerts with icons
• build: fix css prefix docs task to apply on the good path (98a2774)
• collapse: remove custom boosted aria-collapse attribute management from the plugin as it's manage in native by bootstrap now ([9913ad6]
• forms: update input form border color and invalid/valid states. Rework toggle switch following custom-switch added by bootstrap
• pagination: Update active and hover states and fix issue #89 remove hard coded value for pagination and use variable instead (1693b44)
• rtl: improve boosted rtl file. Fix icons flip on rtl mode

Features

• buttons: add new social network buttons, and create a new xlg button.
• umd: update js build with umd to take into account boosted specific plugins (f3b2b60)

Boosted 3.4.0

Here's the merge of Bootstrap 3.4.0 Bootstrap release note

We've move to browserstack for automated tests. Bump all url's to https, and fix some build issues

Boosted 4.1.3

Including the fix from Bootstrap :
Bootstrap 4.1.3
Bootstrap 4.1.2

Here's the boosted small fixes

4.1.3 (2018-07-25)

Bug Fixes

• build: run docs instead of docs-compile on test task to ensure that css, js, and rtl templates are generated before testing (5ae40ed)
• forms: fix custom checkbox appearance in tables. was broken in boosted 4.1.1 (f9652eb)