Releases: Orange-OpenSource/Orange-Boosted-Bootstrap
v5.0.0
Bootstrap v5.0.0
Boosted v5.0.0
🚀 Features
You may want to refer to Bootstrap v5.0.0 changelog for an exhaustive list of features and changes in Boosted/Bootstrap (not every single of them has been themed accordingly to Orange guidelines).
You may also refer to the changelog from previous betas for an exhaustive look at previous bugfixes/features/docs...
New examples from 5.0.0-betas still have to be themed according to Orange brand.
Next release will be 5.0.1, rest assured we are doing our best to be not too late behind Bootstrap releases.
🧩 Components
In future releases we'll have to continue porting v4 (brand) components to v5. You can still have a look at the v4->v5 draft migration guide.
- stepped process: add the component from v4 (2f353e3) (from beta3)
- back to top: brand new component 🎉 (893944d) (from beta2)
- buttons: buttons with icon, branded 🎉 (d399331) (from beta2)
- carousel: Orange branded 🎉 (7f320f6) (from beta2)
- modals: Orange branded 🎉 (bfd285c) (from beta2)
- accordion: Orange branded 🎉 (69a97d9) (from beta1)
🐛 Bug Fixes
- a11y: Add title to dropdown menu (c1c8851)
- a11y: Improve a11y for dropdown example in header (64f6e98)
📖 Docs
Fixed some of new Bootstrap 5 examples, that weren't Orange-branded properly. Still loads of them to tackle as seen in #380
- docs: Use shield.io badge in the readme (c34b3d7)
🧰 Chore
- build: delete useless build.sh file (2d051ba)
v5.0.0-beta3
Bootstrap v5.0.0-beta3
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
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 preventfocus
from being hidden under fixed header, by usingscroll-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— later replaced byfilter
instead of inlined SVG (0a9535a)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
andsummary
in docs now look like accordions (e1f379ef)- Accessible markup for decorative SVGs (0a2f616c5)
🧰 Chore
v4.6.0
Bootstrap 4.6.0
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 from8%
to10%
. If you relied on this variable or on thetheme-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()
andmake-container-fluid-widths()
since they won't land in v5 (#562) - BrowserStack: define
browserNoActivityTimeout
to60000
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 todata-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
v4.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
transition
s, 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
legend
s are bold (#477) - badges: middle aligned (#471)
- badges: use supporting colours for
background
s (#466) - text utilities: drop
!important
to matchtext-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 usesrem
(#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:
- dark mode for carousel and dropdown;
- refactored close button (reducing the gap Boosted one!)
- improved colors to set
$min-contrast-ratio
to 4.5 —another gap filled with Boosted 😇 - renamed
.sr-only
to.visually-hidden
, - 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 & dropcolor-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
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 tolocation
instead ofpage
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 & dropcolor-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
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:
- using Helvetica,
- improving focus visiblity thanks to
:focus-visible
polyfill, - defining a mininum contrast ratio of 4.5:1 instead of 3:1,
- 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
Badges
Breadcrumb
- breadcrumb: matching the brand (8d9c6fa)
Button group
Buttons
Close button
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)