v5.3.0 Ship List

[julien-deramond]

🚀 Features

• Forms: update color form control based on UI Kit v5 (#1794)
• Carousel: pause/play button is now integrated within the carousel (#1763
• Range: new variant that displays dynamically the current value on the top-right corner as a label (#1714
• Popovers/Tooltips: update rendering according to Orange Design System UI Kit v5 (#1803 / #1936 / #2031)
• Range: fine-tuned the hover and active colors (#1605)
• Forms: changed rendering of help texts based on UI Kit v5 (#1779)
• Utilities: changed the values of .lh-sm, .lh-base and .lh-lg to retrieve a line-height logic based on a multiplication of the base font size (#1952)
• Footer: new .active class and use of aria-current="page" for links for a better a11y. This is explained in a new section of the Footer's documentation. (#1859)
• Buttons: new outline secondary button (.btn-outline-secondary) with transparent background (#2004)
• Close button: add a "Closed" tooltip to close button component, but also to wherever it's used in other components: modals, offcanvases, toasts (#1823)
• Forms: 1px increase of spacing between form messages (.form-text and valid/invalid form messages) and form controls (#1948)
• Buttons: add TikTok (#1778)
• Utilities: add .border-4 and .border-5 (#2127)
• Close button: add eco-design variant (#1489)
• CSS: deprecated $boosted-prefix in favor of $prefix (#2129)
• Utilities: reintroduce all text color utilities from Bootstrap (#2030
• Examples: new download app page (#2146)

🐛 Fixes

• Docs: remove extra break line in table shortcode (#1758)
• Forms: add some extra-padding between form switches and their label (#1796)
• Dropdowns: remove the cut border on split dropdowns when shown and remove border on .nav-link (#1793)
• Quantity selector: avoid using .input-group selector to match only quantity selector in JS (#1825)
• Modals: increased margin between modal content and footer (#1658)
• Docs: modal with image variant wasn't rendered in the documentation (#1884)
• Orange navbar: add missing .supra in some examples with small viewports (#1885)
• Forms: vertical alignment of invalid feedback icon on multiple lines (#1719)
• CSS: removed Stylelint multi-line comments from built CSS Boosted files (#1935)
• Tables: preserve table row heights with icons and thumbnails (#1674)
• Form example: add data-focus-visible-added attribute with JavaScript on the focused element on first error validation (#1953)
• Examples: in cards examples, semantics have been changed for the row containing icons and the actions footer containing secondary buttons in order to be more accessible (#1904)
• Docs: add missing <caption> in captions' HTML examples (#2033)
• Examples: some 5G icon ids were the wrong ones and weren't rendered in Stickers example (#2066)
• Docs: fix search box alignment in navbar HTML snippet (#2078)
• Docs: fix headings architecture of Tooltips page (#2021)
• Typography: changed <h3>, <h4> and <h5> font sizes at some breakpoints (#2053)
• Stickers: due to the changes of <h3>, <h4> and <h5> font sizes, stickers are now presented as examples in the documentation based on fixed font sizes integrated via CSS not included into the framework (#2053)
• Docs: Solaris icons URL (#2112)
• Footer: changed coverage icon to use ic_Mobile_Network_Coverage (#2022)
• Docs: update broken DSM links (#2126)

📖 Docs

• Placeholders: display generic icons (#1857)
• Orange Design System: added new info callout to display ODS recommendations (#1709)
• Placeholder: use SVG instead of text inside the image in the placeholder shortcode (#1886)
• Stepped process: add precisions when one would like to display more that 5 items (#1908)
• Docs footer: Documentation footer uses the new .active + aria-current="page" rendering of Boosted for better a11y (#2017)
• Tooltips: add a11y callout about tooltips hiding important content (#2021)
• Forms: enhance 'Terms and Conditions' checkboxes accessibility and wording (#2002)
• Tables: add PNG thumbnail example in some tables (#2034)
• Release: add hidden new release banner (#2150
• Dark mode: hide unimplemented Orange dark mode (#2044)

🧰 Chore

• Examples: add a reusable shortcode for cards (#1827)
• Shortcodes: change in_examples param to extra_social of orange-footer shortcode (#2043)
• Cookies: change Google Tag Manager URI in tarteaucitron (#2081)