Proximus design system
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: 26/02/2024 08:55:08

Coming up changes:

CSS/HTML
  • deprecatedLazy load: <img> with data-src must be replaced by loading="lazy" , browser native functionnality (DEV).
JAVASCRIPT
Release expected date: TBD

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