v4.4.1 — Ship list

[ffoodd]

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)
• 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

• close button: use Zeplin's defined cross for close button (332f4f3)
• close icon: get outline back on :hover (7deafac)
• close-icon: add context to close button label where appropriate to close #248 (c38e93a)
• close-icon: switch outline-color on hover/focus (e269c00)

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

• pagination: adjust spacings and sizes (86d0969)
• pagination: improved RTL support (f8256af)
• pagination: improve alignment to better match the brand (7c495c3)

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

• footer: use h2+h3 in footer instead of h1+h2 (0cb93ad)
• o-footer: reduce specificity & use variables (fa69dac)
• o-footer: specifying component nistead of overusing ulitilies (9fe08a3)

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)