@engie-group/fluid-design-system

## V4 to V5 Migration guide ### 🖍 Changed ##### ⚠️ Breaking changes ###### [GLOBAL] - Update colors to comply with new Engie Global Guidelines - Update dependencies to work with Node latest LTS v16.16 and npm 8.15 - lib/fluid-design-system.js automatically initiate components - lib/auto-init is included to lib/fluid-design-system.js - replace web-animation-js dependency for global file - Replace all radius to use tokens and be compliant with new UI guidelines (no radius) - Replace all sass variables with tokens - When installing the package via npm or importing it via CDN we recommend fixing the version with the exact package version to avoid breaking change affecting your live website. With never-ending topics like Accessibility and BRAND GUIDELINES we also have to include some minor breaking changes in some minor versions ###### [AVATAR] - Replace `nj-bullet` by `nj-status-indicator` in the `nj-avatar` component - `nj-avatar` with pictures should now have modifier `.nj-avatar--picture` like so ```html <a href="#" class="nj-avatar nj-avatar--picture"> <img class="nj-avatar__picture" src="source" alt="Customer"> </a> ``` ###### [BADGE] - [A11Y] Change `nj-badge` semantic from `div` to `p` ###### [BUTTON] - Replace all previous variants `light`, `primary`, `danger`, `success`, `warning` variants with new system listed in section Added ###### [BULLET] * `nj-bullet` doesn't take same variants as before, ```html Before: <div class="nj-bullet nj-bullet--white"></div> <div class="nj-bullet nj-bullet--blue-corporate"></div> <div class="nj-bullet nj-bullet--blue-allports"></div> <div class="nj-bullet nj-bullet--blue-venice"></div> <div class="nj-bullet nj-bullet--green-java"></div> <div class="nj-bullet nj-bullet--green-pine"></div> <div class="nj-bullet nj-bullet--green"></div> <div class="nj-bullet nj-bullet--orange-crusta"></div> <div class="nj-bullet nj-bullet--orange"></div> <div class="nj-bullet nj-bullet--red-mandy"></div> <div class="nj-bullet nj-bullet--red"></div> <div class="nj-bullet nj-bullet--blue-bigstone"></div> <div class="nj-bullet nj-bullet--blue-rhino"></div> <div class="nj-bullet nj-bullet--green-fun"></div> <div class="nj-bullet nj-bullet--green-riogrande"></div> <div class="nj-bullet nj-bullet--yellow"></div> <div class="nj-bullet nj-bullet--yellow-bright-sun"></div> <div class="nj-bullet nj-bullet--purple"></div> <div class="nj-bullet nj-bullet--violet"></div> <div class="nj-bullet nj-bullet--violet-eggplant"></div> <div class="nj-bullet nj-bullet--cerise"></div> After : <div class="nj-bullet nj-bullet--brand"></div> <div class="nj-bullet nj-bullet--teal"></div> <div class="nj-bullet nj-bullet--pink"></div> <div class="nj-bullet nj-bullet--orange"></div> <div class="nj-bullet nj-bullet--red"></div> <div class="nj-bullet nj-bullet--green"></div> <div class="nj-bullet nj-bullet--ultramarine"></div> <div class="nj-bullet nj-bullet--yellow"></div> <div class="nj-bullet nj-bullet--purple"></div> <div class="nj-bullet nj-bullet--blue"></div> <div class="nj-bullet nj-bullet--lime"></div> ``` ###### [CARD] - `nj-card` image `nj-card__img` should now be wrapped in div `nj-card__img-wrapper` ###### [FOOTER] - `nj-footer` : remove `.nj-footer__link` class it should be replaced by `nj-link nj-link--contextual` - Remove all utils from `nj-footer`, Before: ```html <div class="row mt-5 mb-3"> <div class="col-sm-6 col-md mb-3 mb-md-0"> <h2 class="nj-footer__links-list-title">Title 1</h2> <ul class="list-unstyled"> <li><a href="#" class="nj-link nj-link--contextual">Link 1</a></li> <li><a href="#" class="nj-link nj-link--contextual">Link 2</a></li> <li><a href="#" class="nj-link nj-link--contextual">Link 3</a></li> </ul> </div> <div class="col-sm-6 col-md mb-3 mb-md-0"> <h2 class="nj-footer__links-list-title">Title 2</h2> <ul class="list-unstyled"> <li><a href="#" class="nj-link nj-link--contextual">Link 1</a></li> <li><a href="#" class="nj-link nj-link--contextual">Link 2</a></li> <li><a href="#" class="nj-link nj-link--contextual">Link 3</a></li> </ul> </div> <div class="col-sm-12 col-md"> <h2 class="nj-footer__links-list-title">Title 3</h2> <ul class="list-unstyled"> <li><a href="#" class="nj-link nj-link--contextual">Link 1</a></li> <li><a href="#" class="nj-link nj-link--contextual">Link 2</a></li> <li><a href="#" class="nj-link nj-link--contextual">Link 3</a></li> </ul> </div> </div> ``` After: ```html <div class="nj-footer__menu"> <div class="nj-footer__menu-section"> <h2 class="nj-footer__links-list-title">Title 1</h2> <ul class="nj-footer__links-list"> <li><a href="#" class="nj-link nj-link--contextual">Link 1</a></li> <li><a href="#" class="nj-link nj-link--contextual">Link 2</a></li> <li><a href="#" class="nj-link nj-link--contextual">Link 3</a></li> </ul> </div> <div class="nj-footer__menu-section"> <h2 class="nj-footer__links-list-title">Title 2</h2> <ul class="nj-footer__links-list"> <li><a href="#" class="nj-link nj-link--contextual">Link 1</a></li> <li><a href="#" class="nj-link nj-link--contextual">Link 2</a></li> <li><a href="#" class="nj-link nj-link--contextual">Link 3</a></li> </ul> </div> <div class="nj-footer__menu-section"> <h2 class="nj-footer__links-list-title">Title 3</h2> <ul class="nj-footer__links-list"> <li><a href="#" class="nj-link nj-link--contextual">Link 1</a></li> <li><a href="#" class="nj-link nj-link--contextual">Link 2</a></li> <li><a href="#" class="nj-link nj-link--contextual">Link 3</a></li> </ul> </div> </div> ``` ###### [HEADER] - Remove all utils from `nj-header`, you now have to add classes `nj-header__search-input` on search input and `nj-header__search-button` on search button as well as `nj-header__sub-nav` instead of `list-unstyled` ###### [ICON MATERIAL] - `.material-icons` now inherits color by default - Remove material icon `link` usage. - To use material icons variations, use the `nj-icon-material` class and its modifiers: - `md--{color}` is now `nj-icon-material--{color}` - ⚠️Breaking change: reworked colors: primary (grey-800), inverse (grey-0), brand (ex blue-corporate), grey, teal, pink, orange, red, green, ultramarine, yellow, purple, - `md--{size}` is now `nj-icon-material--{size}` ###### [LINK] - `nj-link` now inherits its parent font-size - `nj-link` rename class `.nj-link--no-text-decoration` to `.nj-link--contextual`. Links are all underlined except for link variant`contextual` - Make link easier to interact with by adding some padding ###### [MODAL] - Update `nj-modal`: - now uses the `nj-icon-button` - new html structure - remove old `.nj-close` icon, replace it with the new `nj-icon-button` with the `.nj-modal__close` ###### [NAVBAR] - Remove all utils from `nj-navbar`, you know have to add classes `nj-navbar__search-input` on search input and `nj-navbar__search-button` on search button ###### [PAGINATION] - `nj-pagination` : remove `.nj-pagination__link--next`, `.nj-pagination__link--prev`, `.nj-pagination__link__nav` class it should be replaced by an `nj-icon-btn` ###### [SPINNER] - `nj-spinner` - `light` variant has been renamed `inverse` icon - `gray` variant has been renamed `grey` icon ###### [TAB] - [A11Y] add `aria-label` on tablist element and `tabindex` and `role` on tabpanel elements ###### [TAG] - Update `nj-tag` with new UI: - Replace `nj-tag__icon` with component `nj-icon-btn` with class `nj-tag__close` - Class `nj-tag__icon` is now set to the tag's icon - Variants have been replaced with new colors, here are the new tokens: ``` .nj-tag (grey default), .nj-tag--brand, .nj-tag--teal, .nj-tag--pink, .nj-tag--orange, .nj-tag--red, .nj-tag--green, .nj-tag--blue, .nj-tag--ultramarine, .nj-tag--yellow, .nj-tag--purple .nj-tag--lime ``` - All tags are now filled, remove classes `.nj-tag--filled-VARIANT` - Remove margin on tags - [A11Y] change structure of `nj-tag` and order of its children ###### [TOGGLE] - `nj-toggle` minor changes: animation - Rename toggle icon class `.nj-toggle__icon-dm` to `.nj-toggle__icon` - To correctly disable a `nj-toggle` you will need to add class `.nj-toggle--disabled` in addition of having property on child input ### ❌ Removed ##### ⚠️ Breaking changes ###### [GLOBAL] - remove webComponent initialization ###### [REBOOT.CSS] - Reboot.css has been moved to another package - remove `<a>` styles from `reboot.css` ###### [AVATAR] -`nj-avatar`: - Remove `nj-avatar--xs` size - Remove right margin on `avatar` ###### [BADGE] - `nj-badge`: remove color variants - Remove right margin on not only child `nj-badge` ###### [BUTTON] - remove classes `.nj-btn--outline`, `.nj-btn--ghost`,`.nj-btn--warning`, `.nj-btn--success` , `.nj-btn--error`, `.nj-btn--block`, `.nj-btn--alone`, `.nj-btn--icon-before` and `.nj-btn--icon-after` (It is recommended to place icons before text) ###### [CHECKBOX] - `nj-checkbox`: remove variants `.has-warning` and `.has-success` ###### [FAB] - Remove variants `.nj-fab--success` and `.nj-fab--warning`, `.nj-fab--danger` ###### [RADIO] - `nj-radio` Remove variants `.has-warning` and `.has-success` - ⚠️ Breaking changes `nj-radio`: remove variants `.has-warning` and `.has-success` - ⚠️ Breaking changes `nj-toggle` : - Rename toggle icon class `.nj-toggle__icon-dm` to `.nj-toggle__icon` - Remove possibility to have one label before and one after the toggle. Toggles now only have one label which is placed after the toggle - To correctly disable a `nj-toggle` you will need to add class `.nj-toggle--disabled` in addition of having property on child input ###### [TOGGLE] - `nj-toggle` theme colors removed (`nj-toggle--primary`, `nj-toggle--success`, `nj-toggle--warning` , `nj-toggle--danger`, `nj-toggle--light`) - `nj-toggle` deprecation of the utility classes (`mr-1`, `ml-1`) on label. Replaced with flex and gap behaviour. - Remove possibility to have one label before and one after the toggle. Toggles now only have one label which is placed after the toggle ### 👎 Deprecated ###### [REBOOT.CSS] - Deprecate `reboot.css`,reboot imported tokens and added a cleanslate for css. You should now import tokens as shown in the `README.md` Unfortunately this is not a good practice for a component library. In our case some of our components were relying on some global styles when each component should be responsible for its own styles. It can also cause some website to have some side effects when importing `reboot.css` in order for fluid components to work properly. From now on components rely on their own styles and `reboot.css` is removed from this package and moving it to package `@engie-group/fluid-4-deprecated` in case you website was relying on some rules present in `reboot.css`, you should import if from `@engie-group/fluid-4-deprecated` or replace the rules in your styles. We are also adding an optional `base.css` file that you can import and which sets the correct font-family and color to the html and body ###### [ALERT] - `nj-alert` is deprecated. You should use `nj-inline-message` or `nj-toast` instead ###### [FORMS] - All underlined forms are deprecated, you should use new `nj-form-item` ###### [SWITCH] - `nj-switch` is deprecated. You should use `nj-segmented-control` instead ###### [UTILS] - Deprecate component `utils`, utils will no longer be maintained and are available in package `@engie-group/fluid-4-deprecated` - Remove deprecated `globals` from `globals/scss`, move them to `@engie-group/fluid-4-deprecated` and replace all usages in code with tokens from `@engie-group/fluid-design-tokens` - Remove `_color-dark.scss` - Remove `_spacing.scss` - Remove `_typography.scss` - Remove `_motion.scss` - Remove `_colors.scss` - Remove unused utils from `_util.scss` - Remove `tokens/color.scss`