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
.btncursor (fbf294a in Bootstrap)
Bug Fixes
Forms
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
Megamenu
Tables
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
Breadcrumbs
Buttons
- button-group: border color on dark background (08b10b3)
- button-group: missing states for border color on dark background (fb182dc)
- buttons: ensure proper sizing for .btn-icon (47f2a48)
- buttons: improve social buttons to reduce filesize and allow size to vary (c091a92)
- buttons: move labels 1px up ↑ (5635182)
- buttons: social buttons brand alignment (size, spâcing, icon size) (51e841e)
- buttons: with icons (3a18fbf)
- buttons: toggle buttons with icons (b902f21)
- social buttons: adjust icon size & position for linkedin, pinterest & email (4d0d1dd)
- split buttons: dropdown-toggle-split size+alignment (51ed9e3)
- split buttons: finally managed to implement the custom not-full-height border to match the brand… (1589cd4)
- dropdowns: caret placement for both dropdowns & split buttons (d18f280)
- dropdowns: .show caret's colors (9b2c36d)
- collapse: accordion sizes matching the brand (6d6df39)
Close button
Forms
- 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: improve custom range on Chrome (0b145f2)
- forms: labels positionning (5be3b52)
- forms: remove info icon from invalid custom select (a4c82db)
- labels: apply bold in reboot rather than in forms to prevent duplicated selector (9215084)
- forms: decrease feedback icon size (d44abe3)
- forms: allow .is-required class ot be used on any HTML tag (2b3531c)
- input-group: update styles according to Brand suggestion 24a69ce
- forms: dissociate (in)valid states styling 3ee1dd5
Megamenu
- megamenu: adjust spacings and sizes to match design (8d3b5a6)
- megamenu: improve links style in mega-menu-panel (b9d1d14)
- megamenu: improve perf by using will-change where possible (0ce1ed9)
- megamenu: revamp megamenu to both align with latest brand guidelines –— close #228 — and to fix #247 (554468e)
- megamenu: use aria-current + CSS to indicate current item and its active parents, related to #254 and #252 (eb863ba)
Navbar
- navbar: add a gray bottom border on navbar dark (5634c92)
- navbar: adjust line-height for display-* in navbar-title (8431b57)
- navbar: current item's border alignment after #252 (7620f43)
- navbar: do not show current item with color only anymore to close #252 (7dbd842)
- navbar: improve .navbar-toggler & .minimized versions (f89b44f)
- navbar: improve alignments and sizings (a2e4841)
- navbar: improve small screen navbars (b20bc27)
- navbar: new navbar-toggler-icon(s) to switch from burger to cross (3690c4f)
- navbar: update navbar minimized size to 60px, reduce logo to 30x30 (821912c)
- navbar: use .nav-icon instead of .icon in navbar (7f4298c)
- navbar: use close icon when collapsible menu is open (1fa2dd5)
- navbar: use digital orange in navbars (f20de5b)
- navbar: use transitions between standard and minimized navbar (fad4ae4)
- navbar: remove left margin on navbar-brand (5db69c4)
- navbar: move icons 2px up to match the brand (d018996)
- o-navbar: handle navbar-title's line-heights (aa76516)
- toggler: update toggler icon according to the brand, remove border and icon is bigger (e333908)
- skiplinks: improve skiplinks pattern, making it simpler for #254 (d4f4083)
- supra bar: adjust spacings and sizes to match latest design kit (48f35ac)
- supra bar: ensure 40px height to match the brand (a0bb045)
- supra bar: dropdown arrows are smaller (0e8ec4b)
- supra bar: increase spacing between nav items (0d6d0b2)
- supra bar: increase spacing between dropdowns and nav-icons (bbaaaab)
Tables
- tables: remove .thead-{dark|light} variants (dcd2bbd)
- tables: remove bordered+borderless tables (5c06087)
- tables: remove contextual classes for tables (3158486)
- tables: remove striped rows tables (38767c2)
- tables: removed .table-lg and adjust default+sm sizes (ce13796)
- tables: simplify tables CSS and adjust sizings (1b3e641)
- tablesorter: sort icons alignment 700c3ad
Pagination
Colors & icons
- colors: improve .text-body & .text-muted utilities to ensure proper contrasts, to close #274 (0d62c74)
- colors: remove .text-{success|info|warning|danger} utilities (1ecdbe0)
- icons: add Mail + Person SVG icons (175d154)
- orange icons: get mail+person icons back and improve them thanks to escape-svg() (6f0e617)
- utilities: add border-color utilities, looping through grays (bcd4b62)
- utilities: amend documentation for border-colors, including grays (5639866)
- add digital orange to follow brand requirements (cafc3b6)
- bg-utilities: .bg-{success|warning|danger|info} now uses supporting colours instead of functionnal ones (f2b11dd)
Footer
Miscellaneous: transitions accessibility, RTL mode…
- o-carousel: improved RTL support (ce7a586)
- o-link-arrow: improved RTL support (67d60b6)
- o-scroll-up: improved RTL support (a74a9c1)
- RTL: improve RTL overrides — resetting line-heights, improving RTLCSS usage by using comments instead of overrides… (9f539e3)
- o-switches: o-switch icons sizing+alignment+docs (7ce21b9)
- progress: ensure animation is used only if -transitions is true (0f9541b)
- reboot: remove block display on new HTML5 elements, targetted IE10 (aefcc36)
- reduced motion: use a placeholder for fine tuning transition disabling instead of locking it globally (4683631)
- scrollspy: add aria-current to element and its parents to close #253 (8250659)
- transition: reduce motion globally instead of duplicating single declaration block, to close #255 (e6f7814)
Core
- gitignore: ignore .npmrc file from Git to allow proper npm login (9141759)
- gitignore: ignore .tgz when using npm pack (1cdbca5)
- JS: disable ESlint sort-imports for focus-visible bundling (6c4ed28)
- Bundlesize: slightly increase boosted.css limit (215e209)
- workflow: add Mattermost + Calibre actions (0de4169)
- workflow: add Slack action (multiple commits…)
Documentation
Documentation and website itself have been significantly improved and updated (mostly improving accessibility, and dropping some variants here and there — forbidden by Orange Brand).
A new section called "Essentials" is added to show various headers and footers implementations.
Essentials
- docs: megamenu example was wrong (8fa582e)
- docs: remove weird examples for input-groups, where prepended/appended things could be confused with label (46e4273)
- header: add global headers module in Essentials (f0d0357)
- essentials: border color utility (f841c9c)
- essentials: fix hr html linting errors (27272ca)
- essentials: fix unquoted error (0657ba1)
- essentials: hide service links in megamenu on mobile (1a60fda)
- essentials: use local src for Logo in global header logo (7265114)
- essentials: add anchor links to headers (9b44b55)
- essentials: add footer's screenshot for essentials index page (d264634)
- essentials: add global headers screenshots + optimize other screenshots (dc92c3d)
- essentials: add IDs on each header example (e3726e7)
- essentials: add standards collapsible searchforms (a825d22)
- essentials: adjust spacings in supra bar (a8eeaaa)
- essentials: done with global headers example, except dark search form (f048972)
- essentials: done with megamenus → needs to check responsive, though (bbd7f8a)
- essentials: duplicate additional menus to match design and keep things accessible (73dae46)
- essentials: first footer component on destkop (9803e2d)
- essentials: first megamenu example fully working, including svg-delete update (1582922)
- essentials: footers done (b4af9de)
- essentials: global headers on mobile (af56176)
- essentials: improve a11y suggestions for megamenu (fec8ba0)
- essentials: improve global headers' screenshot for essentials index page (70463ee)
- essentials: increase spacing between nav and collapsible-nav (9dfb698)
- essentials: make supra-nav fluid-width (61d48b7)
- essentials: megamenu for mobile / tablet (8ef646e)
- essentials: megamenu suggestion using burger+label (02474ce)
- essentials: missing global headers updates from last week… (2d51df9)
- essentials: move orange module to a new dedicated space named essentials (c42ba8c)
- essentials: rework headers on different screen size (4b39ac3)
- essentials: up with footers N°2 & 6 (7dddb42)
- essentials: use container & improve RWD (5d68fcf)
- essentials: use fluid containers for global headers (438aa5f)
- essentials: using megamenu in first global header example (07b47cf)