Important information:

Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

HTML/CSS/JAVASCRIPT Changelogs

You'll find here all the upcoming changes and the release notes concerning HTML, CSS and Javascript libraries.

If needed, check Confluence's Release Management - Dashboard page.

last modified: 01/01/1601 01:00:00

Coming up changes

CSS/HTML

fixedEmpty states in table: Resolve centering problem on mobile for the empty states status inside a table
fixedButtons: for .rs-btn.rs-wide , replace display block by flex
updateHomepage banner: Min-height updated to S:42rem M:38rem L:37rem related to new version of Header.
newHeader 2024: New version of Header.
deprecatedHeader 2020: Header version 2020 is deprecated. It must be replaced by 2024 version.
deprecatedLazy load: <img> with data-src must be replaced by loading="lazy" , browser native functionnality (DEV).

JAVASCRIPT Release expected date: TBD

removedForm input file: Remove JS linked to form input file

Release expected date: 2024-09-19

fixedInception JS: update of deferredLoad function, replace onload by DOMContentLoaded event
fixedHeader 2024: new function header24.close();
removedHeader 2024: auto-close
updateCSS load on demand: update of Counter, Donut graph, Masonry. CSS is no more included inside those JS.

Released to production 2024-08-22

CSS/HTML

newScarlet icons: Mood icons for rating component.
fixedTabs Slider: update of CSS to help JS.

JAVASCRIPT

updateCSS load on demand: update of Toaster, Action bar, Action menu, Back to top, Draggable, Progress bar, Read more, Sysnav and Timepicker. CSS is no more included inside those JS.
newHeader 2024 external: JS for external website with Toaster included.
fixedTabs Slider: revamp of Tabs Slider JS, more easy to use and better code.
newHeader 2024 MDD auto-close: auto-close of MDD if you click on a link inside.

Released to production 2024-07-31

CSS/HTML

updatePanel: add rs-panel-collapse-img compatibility with flex panels.

Released to production 2024-07-11

JAVASCRIPT

newEBU Sidebar: a sidebar only for EBU.

Released to production 2024-07-05

CSS/HTML

updateScarlet headings simplification: no bubbles anymore, grey titles as the body text. For negative, no bubbles anymore, white titles as the negative body text.
updateProximus body text color: #0A0A0A changed to #252525 for accessibility improvment.
newNo scroll: "rs-noscroll-h" and "rs-noscroll-v" is now available for specific cases.

Released to production 2024-07-04

JAVASCRIPT

newHeader 2024: JS of new version of Header is ready to be used.

Released to production 2024-06-26

CSS/HTML

fixedBar chart: correction of dotted line issue on Safari.

Released to production 2024-02-26

CSS/HTML

updateWarning color: Text color #A55D00 and background color #F58221 changed to #AC5915.
Components impacted: status, message box, timeline, text color, donut graph, progress bar. No html change, css only.
fixedOverlayer: Image overlayer, display: flex added only when overlayer is opened.
newAction links: "View" and "Filter" added.
newInput type file: simplified with HTML code using browser's native functionnality.
deprecatedInput type file: rs-form-label rs-form-label-file , rs-form-file-input and rs-form-file-btn .
fixedButton in form: Moved min-width: auto from "form" to "rs-form-items-group".
updateForm waiting input: dots replaced by spinner. No html change, css only.
updateWaiting Button : dots replaced by spinner. No html change, css only.
deprecatedSpinner: .rs-spinner-neg replaced by rs-neg as parent of rs-spinner to simplify.
updateSpinner: a single css animation for all themes, no more svg depending on segments.

Released to production 2024-02-02

JAVASCRIPT

updateLazy load: Take into account Webp image format
deprecatedFoundation data-interchange: $(document).foundation('interchange', 'reflow'); is deprecated and must be replaced by inception.lazyLoad.reflow(CONTEXT);
newOpen Anchor: function for open url anchor on page load
deprecatedhasAnchorOrParameterInUrl: function with hasAnchorOrParameterInUrl() are all deprecated. Please replace it by inception.openAnchor() if content appear after page loaded or remove it.

Released to production 2024-01-31

CSS/HTML

updateIcons: Internet icons updated to new design. Icons impacted: icon-Internet, icon-Internetlaptop, icon-Internetmobile, icon-Internettablet.
removedEpic classes: rs-sbox-epic (selectable box), rs-accordion-panel-bg-epic (panel accordion), rs-epic, rs-logo-epic, rs-logo-epic-tit, rs-logo-epic-product, rs-logo-epic-tit-block (Epic logo), rs-ctable-epic, rs-ctable-panel-highlighted-txt-container-epic (tables)
removedZurb Foundation: removed unused classes

Released to production 2023-12-19

CSS/HTML

newPatch recommended: new SME color
deprecatedPatch recommended full: better naming class, replace rs-patch-recommended-full by rs-patch-recommended-full-so
updateHeadings: SME becomes like EBU
newIcons: AI (Artificial Intelligence) icon added.
deprecatedStatus: Simplified and consistent classes: rs-status-ok becomes rs-success, rs-status-error becomes rs-error, rs-status-ongoing becomes rs-ongoing, rs-status-warning becomes rs-warning, rs-status-unlimited becomes rs-unlimited.
newAction links: Copy action link has been added.
updateIcons: Twitter icon is replaced by X icon but the class name remains the same (icon-Twitter)
deprecatedTags: for negative version, rs-neg as parent class is sufficent, no need to add rs-tags-neg anymore.
deprecatedMessage boxes & message box overlayer: for negative version, rs-neg as parent class is sufficent, no need to add rs-messagebox-neg anymore.
For different states, the class have been simplified: rs-msgbox-success is replaced by rs-success, rs-msgbox-error is replaced by rs-error, rs-msgbox-warning is replaced by rs-warning and rs-msgbox-ongoing is replaced by rs-ongoing.
deprecatedBackground colors: for negative version, rs-neg as parent class is sufficent to rs-bg-clickable, rs-bg-ac, rs-bg-hover, rs-bg-hover-second, rs-bg-focus and rs-bg-disabled background color class.
deprecatedSwitch: for negative version, rs-neg as parent class is sufficent, no need to add rs-switch-neg anymore.
newForms: styling added to allow native input type="date".
newGradient: new gradient for SME

Released to production 2023-12-20

CSS/HTML

fixedScarlet: title neg fix

Released to production 2023-12-01

CSS/HTML

newBar chart: CSS and HTML (CSS load)

JAVASCRIPT

newCSS load: function for CSS loaded on demand

Released to production 2023-11-14

CSS/HTML

fixedScarlet theme: Proximus extra color (light colors --> grey2, dark colors --> red primary)
removedMessage box: unused congratulations message box removed from css.
newMessage box: sustainability message box
updateEntrypoint: disabled version works with rs-disabled as parent, no need to add rs-entrypoint-disabled anymore.
updateNegative & disabled text color: rs-neg + rs-disabled works together to give correct text color. rs-disabled changes text color to disabled.

Released to production 2023-11-07

CSS/HTML

fixedShow/Hide class: "display: revert" ISO inherit (Foundation)
updateHeader: icon search visible outside hamburger menu on mobile
updateFooter: grey background for contact zone becomes full width
fixedCheckbox label size: adding min height and width to improve alignment
fixedTextarea: focus and filled

Released to production 2023-11-06

CSS/HTML

updateScarlet icons: icon-Applications + icon-Appointment + icon-Freeservices
fixedForms: input type date icon visual bugfix

Released to production 2023-10-27

CSS/HTML

updateSearch autocomplete: HTML accessibility review and add JS webcomponent attribute
fixedScarlet theme: MyScarlet first section and content header gradient switched to full red primary color.

JAVASCRIPT

newSearch autocomplete: add webcomponent JS with keyboard functionnality (accessibility)

Released to production 2023-10-09

CSS/HTML

fixedMedia device: CSS pointer event none on device image to keep click on video
updateNavigation arrows: HTML and CSS, could be also a button tag
newHeading mixing font weights: HTML example
newText colors: work with rs-neg class around

Released to production 2023-09-25

CSS/HTML

newPatch: CSS 2 different recommended patchs SE and EBU
newGradient: CSS gradient from dark to purple
updateTables: CSS for responsive tables on mobile looking the same as on desktop
newEntry point: add HTML and CSS for extra zone
fixedForm: remove blur from form elements

Released to production 2023-09-20

HTML

updateMessage box: HTML accessibility reviewed
deprecatedMessage box: inline message box with aria-live="assertive" role="alertdialog" is deprecated

Released to production 2023-09-13

CSS/HTML

newInnovation icon for Scarlet: add HTML and CSS element + scarletIcons.woff2
newAction link Download: add HTML and CSS element
newRates smiley: add HTML and CSS element
fixedTable: usage of rs-scroll class
fixedSearch autocomplete: CSS corrections on list focus
fixedButton waiting: force icon arrow hide

Released to production 2023-08-10

CSS/HTML

updateHeader 2022: CSS header flex to grid, mobile icon position update