Migrate v4 to v5

Follow our migration guide to update safely from Fluid v4 to Fluid v5

Fluid version map

🎨 Design migration

Follow our How to migrate to Fluid 5? guide directly inside Figma.

🖥 Dev migration

• Vanilla
• Angular
• React
• Tokens

TOKENS

V1 to V5 migration

We decided to bump version from v1 directly to v5 to comply with global version of FLUID in design and in CSS

🖍 Changed

[SIZE]

• ⚠️ Breaking changes replace space tokens, here’s a mapping between old and new tokens

**Did not exist** ==> var(--nj-size-space-2)
var(--nj-size-space-0) ==> var(--nj-size-space-4)
var(--nj-size-space-1) ==> var(--nj-size-space-8)
var(--nj-size-space-1-2) ==> var(--nj-size-space-12)
var(--nj-size-space-2) ==> var(--nj-size-space-16)
var(--nj-size-space-3) ==> var(--nj-size-space-24)
var(--nj-size-space-4) ==> var(--nj-size-space-32)
var(--nj-size-space-5) ==> var(--nj-size-space-48)
var(--nj-size-space-6) ==> var(--nj-size-space-64)
var(--nj-size-space-7) ==> ❌ Removed
var(--nj-size-space-8) ==> ❌ Removed

👎 Deprecated

[GLOBAL]

• Move deprecated tokens to package @engie-group/fluid-4-deprecated and prefix them with nj-deprecated

  --nj-deprecated-color-backdrop-modal
  --nj-deprecated-color-background-body
  --nj-deprecated-color-background-components
  --nj-deprecated-color-background-components-active
  --nj-deprecated-color-background-hr
  --nj-deprecated-color-background-progress-track
  --nj-deprecated-color-base-black-100
  --nj-deprecated-color-base-black-200
  --nj-deprecated-color-base-black-300
  --nj-deprecated-color-base-black-400
  --nj-deprecated-color-base-black-500
  --nj-deprecated-color-base-black-600
  --nj-deprecated-color-base-black-700
  --nj-deprecated-color-base-black-800
  --nj-deprecated-color-base-black-900
  --nj-deprecated-color-base-black
  --nj-deprecated-color-base-blue-allports
  --nj-deprecated-color-base-blue-allports-active
  --nj-deprecated-color-base-blue-allports-hover
  --nj-deprecated-color-base-blue-bigstone
  --nj-deprecated-color-base-blue-bigstone-active
  --nj-deprecated-color-base-blue-bigstone-hover
  --nj-deprecated-color-base-blue-corporate
  --nj-deprecated-color-base-blue-corporate-active
  --nj-deprecated-color-base-blue-corporate-hover
  --nj-deprecated-color-base-blue-engie
  --nj-deprecated-color-base-blue-rhino
  --nj-deprecated-color-base-blue-rhino-active
  --nj-deprecated-color-base-blue-rhino-hover
  --nj-deprecated-color-base-blue-venice
  --nj-deprecated-color-base-blue-venice-active
  --nj-deprecated-color-base-blue-venice-hover
  --nj-deprecated-color-base-cerise
  --nj-deprecated-color-base-cerise-active
  --nj-deprecated-color-base-cerise-hover
  --nj-deprecated-color-base-danger
  --nj-deprecated-color-base-danger-active
  --nj-deprecated-color-base-danger-hover
  --nj-deprecated-color-base-disabled
  --nj-deprecated-color-base-gradient-primary
  --nj-deprecated-color-base-gray-100
  --nj-deprecated-color-base-gray-200
  --nj-deprecated-color-base-gray-300
  --nj-deprecated-color-base-gray-400
  --nj-deprecated-color-base-gray-500
  --nj-deprecated-color-base-gray-600
  --nj-deprecated-color-base-gray-700
  --nj-deprecated-color-base-gray-800
  --nj-deprecated-color-base-gray-900
  --nj-deprecated-color-base-green
  --nj-deprecated-color-base-green-active
  --nj-deprecated-color-base-green-hover
  --nj-deprecated-color-base-green-fun
  --nj-deprecated-color-base-green-fun-active
  --nj-deprecated-color-base-green-fun-hover
  --nj-deprecated-color-base-green-java
  --nj-deprecated-color-base-green-java-active
  --nj-deprecated-color-base-green-java-hover
  --nj-deprecated-color-base-green-pine
  --nj-deprecated-color-base-green-pine-active
  --nj-deprecated-color-base-green-pine-hover
  --nj-deprecated-color-base-green-riogrande
  --nj-deprecated-color-base-green-riogrande-active
  --nj-deprecated-color-base-green-riogrande-hover
  --nj-deprecated-color-base
  --nj-deprecated-color-base-active
  --nj-deprecated-color-base-hover
  --nj-deprecated-color-base-orange
  --nj-deprecated-color-base-orange-active
  --nj-deprecated-color-base-orange-hover
  --nj-deprecated-color-base-orange-crusta
  --nj-deprecated-color-base-orange-crusta-active
  --nj-deprecated-color-base-orange-crusta-hover
  --nj-deprecated-color-base-primary
  --nj-deprecated-color-base-primary-active
  --nj-deprecated-color-base-primary-hover
  --nj-deprecated-color-base-primary-focus
  --nj-deprecated-color-base-purple
  --nj-deprecated-color-base-purple-active
  --nj-deprecated-color-base-purple-hover
  --nj-deprecated-color-base-red
  --nj-deprecated-color-base-red-active
  --nj-deprecated-color-base-red-hover
  --nj-deprecated-color-base-red-mandy
  --nj-deprecated-color-base-red-mandy-active
  --nj-deprecated-color-base-red-mandy-hover
  --nj-deprecated-color-base-success
  --nj-deprecated-color-base-success-active
  --nj-deprecated-color-base-success-hover
  --nj-deprecated-color-base-violet
  --nj-deprecated-color-base-violet-active
  --nj-deprecated-color-base-violet-hover
  --nj-deprecated-color-base-violet-eggplant
  --nj-deprecated-color-base-violet-eggplant-active
  --nj-deprecated-color-base-violet-eggplant-hover
  --nj-deprecated-color-base-warning
  --nj-deprecated-color-base-warning-active
  --nj-deprecated-color-base-warning-hover
  --nj-deprecated-color-base-white-100
  --nj-deprecated-color-base-white-200
  --nj-deprecated-color-base-white-300
  --nj-deprecated-color-base-white-400
  --nj-deprecated-color-base-white-500
  --nj-deprecated-color-base-white-600
  --nj-deprecated-color-base-white-700
  --nj-deprecated-color-base-white-800
  --nj-deprecated-color-base-white-900
  --nj-deprecated-color-base-white
  --nj-deprecated-color-base-white-active
  --nj-deprecated-color-base-white-hover
  --nj-deprecated-color-base-yellow
  --nj-deprecated-color-base-yellow-active
  --nj-deprecated-color-base-yellow-hover
  --nj-deprecated-color-base-yellow-bright-sun
  --nj-deprecated-color-base-yellow-bright-sun-active
  --nj-deprecated-color-base-yellow-bright-sun-hover
  --nj-deprecated-color-border-input
  --nj-deprecated-color-border-input-disabled
  --nj-deprecated-color-icon-input
  --nj-deprecated-color-placeholder-input
  --nj-deprecated-color-placeholder-input-disabled
  --nj-deprecated-color-placeholder-input-hover
  --nj-deprecated-color-placeholder-input-focus
  --nj-deprecated-color-text-background-base
  --nj-deprecated-color-text-background-blue-allports
  --nj-deprecated-color-text-background-blue-bigstone
  --nj-deprecated-color-text-background-blue-corporate
  --nj-deprecated-color-text-background-blue-engie
  --nj-deprecated-color-text-background-blue-rhino
  --nj-deprecated-color-text-background-blue-venice
  --nj-deprecated-color-text-background-cerise
  --nj-deprecated-color-text-background-danger
  --nj-deprecated-color-text-background-gradient-primary
  --nj-deprecated-color-text-background-gray-100
  --nj-deprecated-color-text-background-gray-200
  --nj-deprecated-color-text-background-gray-300
  --nj-deprecated-color-text-background-gray-400
  --nj-deprecated-color-text-background-gray-500
  --nj-deprecated-color-text-background-gray-600
  --nj-deprecated-color-text-background-gray-700
  --nj-deprecated-color-text-background-gray-800
  --nj-deprecated-color-text-background-gray-900
  --nj-deprecated-color-text-background-green
  --nj-deprecated-color-text-background-green-fun
  --nj-deprecated-color-text-background-green-java
  --nj-deprecated-color-text-background-green-pine
  --nj-deprecated-color-text-background-green-riogrande
  --nj-deprecated-color-text-background
  --nj-deprecated-color-text-background-orange
  --nj-deprecated-color-text-background-orange-crusta
  --nj-deprecated-color-text-background-primary
  --nj-deprecated-color-text-background-purple
  --nj-deprecated-color-text-background-red
  --nj-deprecated-color-text-background-red-mandy
  --nj-deprecated-color-text-background-success
  --nj-deprecated-color-text-background-violet
  --nj-deprecated-color-text-background-violet-eggplant
  --nj-deprecated-color-text-background-warning
  --nj-deprecated-color-text-background-white
  --nj-deprecated-color-text-background-yellow
  --nj-deprecated-color-text-background-yellow-bright-sun
  --nj-deprecated-color-text-body
  --nj-deprecated-color-text-body-inverted
  --nj-deprecated-color-text-label
  --nj-deprecated-color-text-label-focus
  --nj-deprecated-color-text-label-inner-focus
  --nj-deprecated-color-text-input
  --nj-deprecated-color-text-progress

VANILLA

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

  <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,

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:

<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:

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

ANGULAR

V0 to V1 Migration guide

🖍 Changed

⚠️ Breaking changes

[GLOBAL]

• Update dependencies to work with Node latest LTS v16.16 and npm 8.15
• Change importing FluidModule and packages files:
  • Before you would import FluidModule like this import {FluidModule} from '@engie-group/fluid-design-system-angular'. You now need to specify the lib folder in the import path like this: import {FluidModule} from '@engie-group/fluid-design-system-angular/lib'`
• Add @angular/cdk as a required peerDependency
• 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

[BULLET]

• nj-bullet doesn’t take same variants as before,

Before:

  white
  blue-corporate
  blue-allports
  blue-venice
  green-java
  green-pine
  green
  orange-crusta
  orange
  red-mandy
  red
  blue-bigstone
  blue-rhino
  green-fun
  green-riogrande
  yellow
  yellow-bright-sun
  purple
  violet
  violet-eggplant
  cerise

After :

  brand
  teal
  pink
  orange
  red
  green
  ultramarine
  yellow
  purple
  blue
  lime

[BUTTON]

• Change how nj-button works:
  • btnType is replaced by emphasis and its values are replaced by 'bold' | 'subtle' | 'minimal', 'bold' being now default
  • variant values are replaced by 'primary' | 'secondary' | 'destructive' | 'inverse' 'primary' being the default
  • Rename hasIcon @Input to hasCustomIcon

[CHECKBOX]

• Rename id @Input to inputId

[ICON]

• Icon size m is now md
• Change color variant values: primary (grey-800), inverse (grey-0), brand (ex blue-corporate), grey, teal, pink, orange, red, green, ultramarine, yellow, purple

[ICON ENGIE]

• nj-icon-engie new colors (the gradient is replaced by ultramarine-900)

  • Add new values for the @Input() variant: default (ultramarine-900)

    brand (brand-600)

    inverse (grey-0)

  • Remove old @Input() variant values: gradient

    blue-corporate (use ‘brand’)

    white (use ‘inverse’)

[LINK]

• Rename nj-link size value m to md
• nj-link now inherits its parent font-size
• Prop rel is no longer used to pass url. Use the new href prop to pass the link href.
• Prop rel is now used to pass rel to the link.

[PROGRESS]

• [A11Y] nj-progress: add label required @Input()

[RADIO]

• [A11Y] ⚠️ Breaking change nj-radio: rename id prop to inputId

[SPINNER]

• light variant has been renamed inverse icon
• gray variant has been renamed grey icon
• [A11Y] nj-spinner: add isLoading @Input to conditionally display component

[TABS]

• [A11Y] nj-tabs: add required label @Input

[TOGGLE]

• Rename id @Input to inputId

❌ Removed

⚠️ Breaking changes

[GLOBAL]

• Remove support for angular 11, 12, 13. Fluid now supports only Angular v14+

[AVATAR]

• Remove notificationColor @Input from nj-avatar

[BADGE]

• Remove variants @Input from nj-badge

[BUTTON]

• Remove isInverse @Input from nj-button. (Replaced by variant="inverse")
• Remove btnType values default' | 'outline' | 'ghost'
• @Input() btnType has been renamed emphasis
• Remove variant values 'danger' | 'warning' | 'success'
• Remove isIconButton @Input from nj-button. (Will be replaced by specific component nj-icon-button)
• Remove iconPosition @Input from nj-button. (Buttons should always have their icon on the left now)
• Remove size="block" @Input from nj-button

[ICON]

• nj-icon-base, nj-icon and nj-icon-engie:
  • Remove @Input() title and @Input() isClickable
  • Remove @Output() iconClick and @Output() iconKeyPress

[LINK]

• Remove variants: primary, success, danger, warning, light
• Remove isUnderlined @Input from nj-link. Links are all underlined except for link variant="contextual"

[PROGRESS]

• Remove @Input() variant (colors variations)

[TOGGLE]

• Remove @Input() variant theme
• Remove possibility to have one label before and one after the toggle. Toggles now only have one label which is placed after the toggle
• Icons of nj-toggle should have property/directive njToggleIcon Eg:

  <nj-toggle>
    <nj-icon name="settings" njToggleIcon></nj-icon>
  </nj-toggle>

👎 Deprecated

• ⚠️Deprecation: nj-switch is deprecated. You should use nj-segmentedControl instead

REACT

V1 to V2 Migration guide

🖍 Changed

⚠️ Breaking changes

[GLOBAL]

• All exported components and services are now prefixed with NJ for e.g: <Button> becomes <NJButton>. You will have to replace all usages and imports in your project.
• Update dependencies to work with Node latest LTS v16.16 and npm 8.15
• Importing @engie-group/fluid-design-system/reboot.css is now deprecated, 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. Please report to README.md to see how to import correctly
• 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 Bullet by StatusIndicator in the Avatar component to display status
  • You can now pass a statusTitle and have access to more status prop options (“success”, “warning”, “offline”, “online”, “away”, “do_not_disturb”, “busy”, “unknown”, “error” and “in_progress”)`
• [A11Y] ⚠️ Breaking change: add required label prop to NJAvatar

[BADGE]

• Replace the value prop in Badge by a children to display the value
• Set primary as the default variant for badge, was blue-corporate before

[BREADCRUMB]

• Rename prop from active to isActive

[BULLET]

• NJBullet doesn’t take same variants as before,

Before:

  white
  blue-corporate
  blue-allports
  blue-venice
  green-java
  green-pine
  green
  orange-crusta
  orange
  red-mandy
  red
  blue-bigstone
  blue-rhino
  green-fun
  green-riogrande
  yellow
  yellow-bright-sun
  purple
  violet
  violet-eggplant
  cerise

After :

  brand
  teal
  pink
  orange
  red
  green
  ultramarine
  yellow
  purple
  blue
  lime

[CARD COVER]

• Rename prop from link to href
• Rename prop from targetLink to target

[CHECKBOX]

• Rename prop from check to isChecked
• Rename prop from disabled to isDisabled
• Rename prop from required to isRequired
• [A11Y] NJCheckbox: rename id prop to inputId and make it required

[FAB]

• [A11Y] NJFab: Rename ariaLabel prop to label and make it required

[LINK]

• Rename NJLink size props value m to md

[ICON]

• NJIcon now has no default role nor tabIndex (previously role=”button” and tabIndex=”0”)
• NJIcon changed variant props values: primary (grey-800), inverse (grey-0), brand (ex blue-corporate), grey, teal, pink, orange, red, green, ultramarine, yellow, purple

[LIST]

• NJListGroup renamed to NJList

[PAGINATION]

• [A11Y] NJPagination: make ariaLabelPrevious and ariaLabelNext props required

[PROGRESS]

• [A11Y] NJLinearProgress: add label required prop

[RADIO]

• Rename prop from check to isChecked
• Rename prop from disabled to isDisabled
• Rename prop from required to isRequired

[TABS]

• [A11Y] add required label prop to NJTabs

[TOGGLE]

• Rename prop from check to isChecked
• Rename prop from disabled to isDisabled
• [A11Y] add label required prop to NJToggle
• [A11Y] NJToggle: make id prop required

[TOOLTIP]

• [A11Y] NJTooltip: make children prop required

[SPINNER]

• light variant has been renamed inverse icon
• gray variant has been renamed grey icon

[SWITCH]

• Rename prop from check to isChecked
• Rename prop from disabled to isDisabled

❌ Removed

⚠️ Breaking changes

[GLOBAL]

• Remove displayNames from components, somehow it breaks storybook props
• Drop support for React < 18
• Remove exported types TColors and TColorsPalette

[AVATAR]

• Remove notificationColor prop
• Remove xs size variants

[BADGE]

• Remove variant prop

[BUTTON]

• Remove NJButtonBase, NJButtonOutline and NJButtonGhost. NJButton now handles all variants
• Remove isInverse props from NJButton. (Replaced by variant="inverse")
• Remove variant values 'danger' | 'warning' | 'success'
• Remove possibility to have a NJButton with an icon only. (Should be replaced by specific component NJIconButton)
• Remove iconPosition props from NJButton. (Buttons should always have their icon on the left now)
• Remove size="block" props from NJButton

[FAB]

• Remove variants success and warning, danger

[ICON]

• Remove title,href, target, role and tabIndex prop
• Deprecates onClick and onKeyPress prop

[ICON ENGIE]

• Remove title,href, target, role and tabIndex prop
• Deprecates onClick and onKeyPress prop

[LINEAR PROGRESS]

• Remove color variant prop

[LINK]

• Remove variants: primary, success, danger, warning, light
• Remove prop isUnderlined from NJLink. Links are all underlined except for link variant="contextual"

[MODAL]

• Remove ariaLabelledBy prop

[RADIO]

• Remove tabIndex prop

[SWITCH]

• Remove NJSwitch unsupported light option theme variants

[TOGGLE]

• Toggle component color theme variant removed (primary, success, warning, danger, light)
• Remove possibility to have one label before and one after the toggle. Toggles now only have one label which is placed after the toggle
• Remove label prop, label should now be passed as child of the component

• Change value of values prop from

• {
    left: string | number | boolean;
    right: string | number | boolean
  }
  

  to

  {
    off: string | number | boolean;
    on: string | number | boolean
  }
  

• Icons are also passed as children and should have attribute data-child-name="njToggleIcon"
• Remove notificationColor prop

[TEXTAREA]

• Remove textarea component, Textarea is now usable by passing propos: isMultiLine to NJFormItem component

👎 Deprecated

[FORMS]

• Dropdown, Select and GroupSelect are now deprecated, use NJSelectInput instead
• Input is deprecated, use NJFormItem instead
• NJAutocomplete is deprecated please use NJAutocompleteInput

[ALERT]

• NJAlert is deprecated. You should use NJInlineMessage or NJToast instead

[SWITCH]

• NJSwith is deprecated. You should use NJSegmentedControl

TOKENS

V1 to V5 migration

We decided to bump version from v1 directly to v5 to comply with global version of FLUID in design and in CSS

🖍 Changed

[SIZE]

• ⚠️ Breaking changes replace space tokens, here’s a mapping between old and new tokens

**Did not exist** ==> var(--nj-size-space-2)
var(--nj-size-space-0) ==> var(--nj-size-space-4)
var(--nj-size-space-1) ==> var(--nj-size-space-8)
var(--nj-size-space-1-2) ==> var(--nj-size-space-12)
var(--nj-size-space-2) ==> var(--nj-size-space-16)
var(--nj-size-space-3) ==> var(--nj-size-space-24)
var(--nj-size-space-4) ==> var(--nj-size-space-32)
var(--nj-size-space-5) ==> var(--nj-size-space-48)
var(--nj-size-space-6) ==> var(--nj-size-space-64)
var(--nj-size-space-7) ==> ❌ Removed
var(--nj-size-space-8) ==> ❌ Removed

👎 Deprecated

[GLOBAL]

• Move deprecated tokens to package @engie-group/fluid-4-deprecated and prefix them with nj-deprecated

  --nj-deprecated-color-backdrop-modal
  --nj-deprecated-color-background-body
  --nj-deprecated-color-background-components
  --nj-deprecated-color-background-components-active
  --nj-deprecated-color-background-hr
  --nj-deprecated-color-background-progress-track
  --nj-deprecated-color-base-black-100
  --nj-deprecated-color-base-black-200
  --nj-deprecated-color-base-black-300
  --nj-deprecated-color-base-black-400
  --nj-deprecated-color-base-black-500
  --nj-deprecated-color-base-black-600
  --nj-deprecated-color-base-black-700
  --nj-deprecated-color-base-black-800
  --nj-deprecated-color-base-black-900
  --nj-deprecated-color-base-black
  --nj-deprecated-color-base-blue-allports
  --nj-deprecated-color-base-blue-allports-active
  --nj-deprecated-color-base-blue-allports-hover
  --nj-deprecated-color-base-blue-bigstone
  --nj-deprecated-color-base-blue-bigstone-active
  --nj-deprecated-color-base-blue-bigstone-hover
  --nj-deprecated-color-base-blue-corporate
  --nj-deprecated-color-base-blue-corporate-active
  --nj-deprecated-color-base-blue-corporate-hover
  --nj-deprecated-color-base-blue-engie
  --nj-deprecated-color-base-blue-rhino
  --nj-deprecated-color-base-blue-rhino-active
  --nj-deprecated-color-base-blue-rhino-hover
  --nj-deprecated-color-base-blue-venice
  --nj-deprecated-color-base-blue-venice-active
  --nj-deprecated-color-base-blue-venice-hover
  --nj-deprecated-color-base-cerise
  --nj-deprecated-color-base-cerise-active
  --nj-deprecated-color-base-cerise-hover
  --nj-deprecated-color-base-danger
  --nj-deprecated-color-base-danger-active
  --nj-deprecated-color-base-danger-hover
  --nj-deprecated-color-base-disabled
  --nj-deprecated-color-base-gradient-primary
  --nj-deprecated-color-base-gray-100
  --nj-deprecated-color-base-gray-200
  --nj-deprecated-color-base-gray-300
  --nj-deprecated-color-base-gray-400
  --nj-deprecated-color-base-gray-500
  --nj-deprecated-color-base-gray-600
  --nj-deprecated-color-base-gray-700
  --nj-deprecated-color-base-gray-800
  --nj-deprecated-color-base-gray-900
  --nj-deprecated-color-base-green
  --nj-deprecated-color-base-green-active
  --nj-deprecated-color-base-green-hover
  --nj-deprecated-color-base-green-fun
  --nj-deprecated-color-base-green-fun-active
  --nj-deprecated-color-base-green-fun-hover
  --nj-deprecated-color-base-green-java
  --nj-deprecated-color-base-green-java-active
  --nj-deprecated-color-base-green-java-hover
  --nj-deprecated-color-base-green-pine
  --nj-deprecated-color-base-green-pine-active
  --nj-deprecated-color-base-green-pine-hover
  --nj-deprecated-color-base-green-riogrande
  --nj-deprecated-color-base-green-riogrande-active
  --nj-deprecated-color-base-green-riogrande-hover
  --nj-deprecated-color-base
  --nj-deprecated-color-base-active
  --nj-deprecated-color-base-hover
  --nj-deprecated-color-base-orange
  --nj-deprecated-color-base-orange-active
  --nj-deprecated-color-base-orange-hover
  --nj-deprecated-color-base-orange-crusta
  --nj-deprecated-color-base-orange-crusta-active
  --nj-deprecated-color-base-orange-crusta-hover
  --nj-deprecated-color-base-primary
  --nj-deprecated-color-base-primary-active
  --nj-deprecated-color-base-primary-hover
  --nj-deprecated-color-base-primary-focus
  --nj-deprecated-color-base-purple
  --nj-deprecated-color-base-purple-active
  --nj-deprecated-color-base-purple-hover
  --nj-deprecated-color-base-red
  --nj-deprecated-color-base-red-active
  --nj-deprecated-color-base-red-hover
  --nj-deprecated-color-base-red-mandy
  --nj-deprecated-color-base-red-mandy-active
  --nj-deprecated-color-base-red-mandy-hover
  --nj-deprecated-color-base-success
  --nj-deprecated-color-base-success-active
  --nj-deprecated-color-base-success-hover
  --nj-deprecated-color-base-violet
  --nj-deprecated-color-base-violet-active
  --nj-deprecated-color-base-violet-hover
  --nj-deprecated-color-base-violet-eggplant
  --nj-deprecated-color-base-violet-eggplant-active
  --nj-deprecated-color-base-violet-eggplant-hover
  --nj-deprecated-color-base-warning
  --nj-deprecated-color-base-warning-active
  --nj-deprecated-color-base-warning-hover
  --nj-deprecated-color-base-white-100
  --nj-deprecated-color-base-white-200
  --nj-deprecated-color-base-white-300
  --nj-deprecated-color-base-white-400
  --nj-deprecated-color-base-white-500
  --nj-deprecated-color-base-white-600
  --nj-deprecated-color-base-white-700
  --nj-deprecated-color-base-white-800
  --nj-deprecated-color-base-white-900
  --nj-deprecated-color-base-white
  --nj-deprecated-color-base-white-active
  --nj-deprecated-color-base-white-hover
  --nj-deprecated-color-base-yellow
  --nj-deprecated-color-base-yellow-active
  --nj-deprecated-color-base-yellow-hover
  --nj-deprecated-color-base-yellow-bright-sun
  --nj-deprecated-color-base-yellow-bright-sun-active
  --nj-deprecated-color-base-yellow-bright-sun-hover
  --nj-deprecated-color-border-input
  --nj-deprecated-color-border-input-disabled
  --nj-deprecated-color-icon-input
  --nj-deprecated-color-placeholder-input
  --nj-deprecated-color-placeholder-input-disabled
  --nj-deprecated-color-placeholder-input-hover
  --nj-deprecated-color-placeholder-input-focus
  --nj-deprecated-color-text-background-base
  --nj-deprecated-color-text-background-blue-allports
  --nj-deprecated-color-text-background-blue-bigstone
  --nj-deprecated-color-text-background-blue-corporate
  --nj-deprecated-color-text-background-blue-engie
  --nj-deprecated-color-text-background-blue-rhino
  --nj-deprecated-color-text-background-blue-venice
  --nj-deprecated-color-text-background-cerise
  --nj-deprecated-color-text-background-danger
  --nj-deprecated-color-text-background-gradient-primary
  --nj-deprecated-color-text-background-gray-100
  --nj-deprecated-color-text-background-gray-200
  --nj-deprecated-color-text-background-gray-300
  --nj-deprecated-color-text-background-gray-400
  --nj-deprecated-color-text-background-gray-500
  --nj-deprecated-color-text-background-gray-600
  --nj-deprecated-color-text-background-gray-700
  --nj-deprecated-color-text-background-gray-800
  --nj-deprecated-color-text-background-gray-900
  --nj-deprecated-color-text-background-green
  --nj-deprecated-color-text-background-green-fun
  --nj-deprecated-color-text-background-green-java
  --nj-deprecated-color-text-background-green-pine
  --nj-deprecated-color-text-background-green-riogrande
  --nj-deprecated-color-text-background
  --nj-deprecated-color-text-background-orange
  --nj-deprecated-color-text-background-orange-crusta
  --nj-deprecated-color-text-background-primary
  --nj-deprecated-color-text-background-purple
  --nj-deprecated-color-text-background-red
  --nj-deprecated-color-text-background-red-mandy
  --nj-deprecated-color-text-background-success
  --nj-deprecated-color-text-background-violet
  --nj-deprecated-color-text-background-violet-eggplant
  --nj-deprecated-color-text-background-warning
  --nj-deprecated-color-text-background-white
  --nj-deprecated-color-text-background-yellow
  --nj-deprecated-color-text-background-yellow-bright-sun
  --nj-deprecated-color-text-body
  --nj-deprecated-color-text-body-inverted
  --nj-deprecated-color-text-label
  --nj-deprecated-color-text-label-focus
  --nj-deprecated-color-text-label-inner-focus
  --nj-deprecated-color-text-input
  --nj-deprecated-color-text-progress