Skip to content

v4.4.0
Compare
Choose a tag to compare
@ffoodd ffoodd released this 04 Dec 10:34
· 718 commits to v4-dev since this release
v4.4.0
0e132e3
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

Bootstrap's v4.4.0 — v4.4.1

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
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 (9f07e9e)
  • card: improve accordion variant a bit (5a1effd)
Range Selector
  • custom range input: adjust sizes to amtch stencil and close #114 (f0a54c9)
  • custom range input: color and sizes adjustments to match form stencils (ee8f590)
  • custom range input: show lower/progress part on supporting browsers and improve disabled state to match form stencils (4c15366)
Pagination
  • pagination: remove sizes and improve arrow icons handling. Also close #168 : added focus for active page-link (d2f9c6c)
Breadcrumbs
  • breadcrumbs: change links+active styles and use the same chevron icon as in pagination to fix #174 and close #167 (cfd79d5)
Alerts
  • alert: use digital Orange 1 for .alert-primary since text is black (e739520)
  • alert+modal: harmonize close icon thourgh alerts, modals and orange popins by using a Solaris icon and cnosistent styles (733d6e8)
  • alerts: make outlined alerts default style to match Orange stencils, restrict to functionnal colours and simplify Bootstrap override (4b21b23)
  • alerts: update system SVG icons to see through content, as seen on new alert stencil (9df2e51)
  • alerts: update variants and positions to match new alert stencil (06d9497)
  • alerts: use ::before instead of ::after next to %svg-* changes (954fa4a)
Modal
  • modal+o-popin: harmonize close button style to fix #83 (db82b2c)
  • modal: missing variable after merge (4febaa6)
Tooltips
  • tooltips: adjust tooltip's arrow's dimensions to match form stencil (bc06d46)
  • tooltips: set visible tootlip's opacity to 1 instead of .9 to close #156 (8dff8a0)
Buttons
  • button: transparent borders for .btn-link, to ensure .dropdown-toggle won't override (46feabe)
  • button-group: missing dark background cases (5aa6a51)
  • buttons: button sizing to match stencils (ce809a5)
  • buttons: buttons & inversed buttons didn't match as in buttons stencils (122de4a)
  • buttons: missing focus state on .btn-link… (7bcda03)
  • buttons: missing focus styles on active states (fd8100e)
  • buttons: prevent focus state from overriding active state; only applies to .active class (1e1fa74)
  • buttons: typo in button variant mixin (5926d9e)
  • btn-group-toggle: match Buttons' stencils (a930785)
  • buttons: new with outlined variant (526bcef)
  • buttons: remove .btn-xlg variant, removed from button stencil (d12c4a2)
  • buttons: simpler icon button, thanks to buttons stencil update (be155d2)
  • dropdowns: lock colors alltogether (18d8c6)
Forms
  • custom forms: improve focus handling with focus-visible polyfill (df28b77)
  • forms: focus visibility for valid/invalid states to close #191 (b371fe2)
  • forms: adjust colors and spacings according to form stencils (542d6ca)
  • links+forms: use -500 for disabled states (75343ea)
  • forms: validation icons sizing and alignment (b25d52a)
Tables
  • tables: refactor + brand stencil implmentation… (646b408)
  • table-dark: ensure .text-primary uses digital Orange 1 when in dark-table (8ab2ecf)
  • o-table: invalid selector (713d23b)
Navigation and tabs
  • nav-tabs: improve spacings & focus to match stencils (7ab253d)
  • navbar: increase touch target size, overall alignments and make documentation reflect Boosted branded navbar usage (3543314)
  • o-link-arrow: use -icon, just like in breadcrumbs and pagination (75848c9)
  • o-nav-local: only declare the specific styles (da445cf)
  • o-nav-local: use digital Orange 1 for links when o-nav-local in inversed (b5aed66)
  • o-navbar: update supra navbar after main navbar refactor to use consistent selectors and better inheritance (93a89f5)
  • responsive-tabs: new styles to match tabs+accordions stencils (989a0b2)
  • dropdowns: offset in navvbar + background in tabs (ae9c884) + colors when in navbar-dark (7cacda1)
Typography
  • type: type-scale refactor → font-size + line-height + letter-spacing for each breakpoints (872cb3d)
  • type: use text-rendering as an enhancement (2361a11)
  • text: remove font-weight + uppercase utilities, as it's forbidden by the brand (84cc728)
  • font: improve main font-stack for #218… (aa1363d)
  • font: prevent font-synthesis for supporting browsers to start #218 (68f7c15)
  • type scale: small line-height was incorrect + using calc() for unitless line-heights (534bbce)
  • reboot: let form elements inherit letter-spacing too (6b66a03)
  • reboot: remove discretionnary ligatures (23d559b)
  • reboot: activate font-features where appropriate (3b19d2d)
  • reboot: add underline to links in list item in main content (b803b7e)
Color Palette
  • colors: ensure contrasts in .text-* + .bg-* + badge / list-groups / table-rows components by using color-yiq function (cf719f6)
  • color utilities: ensure contrast by setting black or white background/color on their equivalent utilities (11d79d0)
  • colors: add missing colors and use them where appropriate (08796be)
  • text: override .text-primary when on a dark background, to use digital Orange 1 (0018c18)
  • progress: use supporting colours for progress bar, as seen in Orange's guidelines data display chpater — and make it bolder and taller (625f58f)
  • cards: some backgrounds were wrong (9ce60444)

Core

An effort was made to improve Boosted customizations consistency (eg: // Boosted mod comments to flag intended overrides) and a few refactors to ensure we're using variables where appropriate.

Browser support
  • chore: updated to match Orange's targets, including ESR & IE11 (419ba7b)
  • chore: update Browser Stack browsers list to run Karma test suite against (fca29b2)
  • docs: update browser support after .browserlistrc changed (0aa58d0)
Refactor
  • o-priority-nav: using utility classes instead of custom styles (708ed99)
  • o-link-arrows: remove redundancy and renamed o-link-arrow-variables to match Bootstrap naming pattern (79ac75c)
  • o-table: improve o-table & tablesorter styles by using much more variables (#197) and simplifying selectors after (#216) (08400b2)**
  • o-tablesorter: icons placement (6041e40)
  • chore: remove unused _o-special_font-size.scss partial SCSS file (8e758fc)
  • o-square-list: moved _o-bullet_points.scss to _o-square-list.scss and updated default list styles (cdfe8e7)
  • chore 28be179 and 3eb96ec:
    • renamed mixins/_orangeIcons.scss to mixins/_orange-icons.scss,
    • renamed _o-step_bar.scss to _o-step-bar.scss,
    • renamed _o-responsive_table.scss to _o-responsive_table.scss.
    • renamed _o-nav.scss to _o-tabs.scss
    • deleted _orange-css.scss
  • buttons: custom .btn-outline-* variants have been dropped since they're not brand compliant (ea1f00f)
  • status icons: system icons now use a placeholder to be extendable, instead of a useless mixin which duplicated styles (6cd7b64)
  • Pagination: remove .presentation class (88551f0)
  • navbar: do not require .bg-dark utility for .navbar-dark anymore, does not make any sense (112c4a2)
  • nav-tabs: renamed o-nav-light to nav-tabs-light and make it a nav-tabs variant (2ecfa98)
  • toasts: use variables where appropriate & ensure proper contrasts (9d4b42c)
    o-carousel: improve img handling ni carousel + use variables where appropriate (3128f33)
  • o-card-link: replace custom o-card-link by .stretched-link utility (3f1aa3f)
Boosted mod comments
  • boosted mods: harmonize Boosted mod comments for #210 (568220d)
Maintenance
  • mixins: move focus & active mixins to mixins/hover (4ebbbda)
  • variables: new $accordion-spacer (576080e)
  • chore: remove + ignore .vscode folder (57f36db) + (e12bc2e)
  • RTL: missing variables import… (d8e1f74)
  • scss: missing parenthesis in state mixins call (4f0e9a1)
  • bootstrap: included Bootstrap styles… (58b32e6)
  • links to CONTRIBUTING.md (5a4a1e6)
  • Validator: new warning to ignore (2c671b9 & 3afef1c)
Implement new Bootstrap's `escape-svg()` function
  • stepbar: use escape-svg function and variables where appropriate (820168f)
  • o-tables: use escape-svg() function and variables where appropriate (c3dfc17)
  • pagination: use escape-svg function and variables where appropriate (f5da24f)
  • o-modal: use escape-svg function and variables where appropriate (7b3744f)
  • o-nav: use escape-svg function and variables where appropriate (ea1d9db)
  • navbar: use escape-svg function and variables where appropriate (dfe6624)
  • icons: using escape-svg in orangeIcons (2361801)
  • forms: use escape-svg function and variables where appropriate (5b59cac)
  • card+o-card: use escape-svg function and variables where appropriate (d62ca48)
Use Bootstrap's new `add()` and `subtract()` functions
  • chore: use new add() & subtract() functions where appropriate to output valid calc() function (ba5d0fc)
Grid
  • grid: allow both Boosted's fluid-containers and Bootstrap's responsive containers to work side-by-side (04e90bd)
Github repository & conventions
  • CODEOWNERS: define myself as JS/CSS/SCSS code owner for Boosted #235 (c6e8eaf)
  • Actions: Use new Bootstrap actions, with Bundlesize + Coveralls + BrowserStack actions #230 #234
  • README: use SVG logo and add alternative (4046aa2)

Documentation

Documentation's changelog is proportionnal to what's been done up here. ↑

Updates
  • doc-megamenu: typos in megamenu documentation (#185)
  • docs: use text color utilities where appropriate in contrast ratio table (0b00137)
  • boostwatch: last close button with aria-label (61d78fc)
  • doc: missing active classname in breadcrumb example (f8a6376)
  • doc: use 'You are here' as hidden text label for breadcrumbs (a4ec919)
  • docs: also use visually hidden text instead of aria-label for size variants 'social buttons (7969371)
  • docs: dropdown sizes' variants allowed by Orange brand buttons' stencil (1228d06)
  • docs: duplicate IDs in Forms component (9266014)
  • docs: duplicated capture tag after merge (4d1b796)
  • docs: harmonize color/colour to respect Bootstrap's voice (a9e94f0)
  • docs: HTML validator shouting at an h1 in example (44d9fbf)
  • docs: improve brand warning icon's alignment (d521915)
  • docs: invalid markup in index.html (899a25b)
  • docs: missing accessibility callouts inclusions (8a8728d)
  • docs: missing parenthesis in mixin call in scss (d1edb84)
  • docs: span rows in type-scale tables where appropriate (f005ffc)
  • docs: typo in color lead paragraph (c63808c)
  • docs: update reboot's font-stack part to mention Helvetica Neue and Boosted's custom font-stack (8b8a59c)
  • docs: use btn-secondary button for button-group-toggle dark background example (b6500ba)
  • docs: wrong color in table-info contrast example (173e99d)
  • docs: add a dedicated table variant for contrast ratio tables (4a99951)
  • cdn: clarify CDN usage and update links for icons and helvetica (50ca276)
  • doc: minor improvements on documentation styles (5ce5dd6)
  • docs: add contrast ratio tables in color utilities page (73e82ba)
  • docs: add focus-visible paragraph in accessibility page (0f4abb9)
  • docs: remove forbidden text utilities' cases from examples (dc98e19)
  • docs: text-success is too heavy in table with its black background… (bcbe827)
  • docs: update layout overview details — will need some rework, I guess (b52e404)
  • docs:nav-pills: remove border on tab-content on nav-pills examples (a78afc6)
  • docs: update Brand and Team pages #237 (899d731) and add callouts to credit Bootstrap back (c267803)
  • docs: use markdown in Hitsory page (7b05cc2)
  • docs: mention Boosted's team instead of Bootstrap's #237 (899d731)
  • docs: replace Bootstrap's brand page by Orange's one (c90fa9b)
  • docs: mention Bootstrap's team in a callout + use Brand page for Orange's one and use a callout to mention Bootstrap's (c267803)
  • docs: use CSS instead of big PNG for homepage's main illustration (e8f09f7)
  • docs: use Boosted CSS where possible to decrease docs styles' filesize for #225 (82369c5)
  • docs: update utility example after harmizing close icon (550bd24)
  • docs: use .sr-only instead of aria-label for close-icon (612b17b)
  • docs: compress images and use SVG where appropriate (2d394e2)
  • docs: use card-deck pattern on homepage for IE11 (b081b4b)
  • docs: remove X-UA-Compatible meta (fdb07a5)
  • docs: multiple nav examples+callout (#225) (d9c8dc8)
  • docs: explicit ARIA roles on landmarks to match a11y guidelines (#225) (4937ec3)
Examples

Every Orange branded examples have been redesigned and updated to use as little custom styles as possible, and also to use SVGs where approriate instead of cranky PNG.

Assets 3
Loading