Migrate v4 to v5

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

Fluid version map
Fluid Global Figma Tokens Vanilla React Angular Vue
v4 v2 v1 v4 v1 v0 /
v5 v5 v5 v5 v2 (React 18) v1 (Angular 14) v0 (Vue 3)

🎨 Design migration

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

🖥 Dev migration

VANILLA

⚠️ Breaking Changes:
Avatar
  • For avatar status, now use the nj-status-indicator instead of the nj-bullet component
  • Avatar size mapping has changed
    • 32px is now nj-avatar--sm (was xs)
    • 48px is now nj-avatar--md (was sm)
    • 64px is now nj-avatar--lg (was md)
    • 96px is now nj-avatar--xl (was lg)
  • Avatar has now a new html structure and class modifiers
    • You can use the nj-avatar--default-icon modifier to display a background icon.
    • Remove nj-avatar__initial class.
      • Instead, directly pass your content to nj-avatar and add the nj-avatar--initials modifier.
    • Remove the <div class="nj-avatar__picture"> from the structure to simplify it
      • Instead, directly add a <img> element with the nj-avatar__picture class.
Badge
  • Remove color variants for nj-badge
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.
  • To correctly disable a nj-toggle you will need to add class .nj-toggle--disabled in addition of having property on child input
Button
  • Buttons have now 4 variants: primary (default, no additional classes needed), .nj-btn--secondary, .nj-btn--destructive (previously danger) and .nj-btn--inverse (previously light). For each variant it is possible to have 3 alternate buttons bold (default, no additional classes needed), .nj-btn--subtle (previously outline) and .nj-btn--minimal (previously ghost)

  • Remove classes .nj-btn--outline, .nj-btn--ghost,.nj-btn--warning, .nj-btn--success, .nj-btn--error, .nj-btn--tertiary, .nj-btn--block, .nj-btn--alone, .nj-btn--icon-before and .nj-btn--icon-after (It is recommended to place icons before text)
  • light variant (.nj-btn--light .nj-btn--ouline-light) has been removed and is now replaced by .nj-btn--inverse class
  • Remove variant classes: .nj-link--primary,.nj-link--success,.nj-link--danger,.nj-link--warning, .nj-link--light
  • Rename class .nj-link--no-text-decoration to .nj-link--contextual. Links are all underlined except for link variantcontextual
  • Remove old .nj-close icon, replace it with the new nj-icon-button component wrapped in the .nj-modal__close div for positioning
Checkbox
  • Remove variants .has-warning and .has-success
Progress
  • Remove color variants modifier classes (.nj-progress--blue-venice, …)
Radio
  • Remove variants .has-warning and .has-success
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
Tag
  • Add possibility to pass icon to tag
  • Replace nj-tag__icon with button icon with class nj-tag__close
  • Class nj-tag__icon is now set to the tag 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--ultramarine,
    .nj-tag--yellow,
    .nj-tag--purple
  • All tags are now filled, remove classes .nj-tag--filled-VARIANT
  • Remove margin on tags
Spinner
  • light variant has been renamed inverse icon
  • gray variant has been renamed grey icon
  • Remove .nj-footer__link class it should be replaced by nj-link nj-link--contextual
Pagination

Remove .nj-pagination__link--next, .nj-pagination__link--prev, .nj-pagination__link__nav class it should be replaced by an nj-icon-btn

Fab

Remove variants .nj-fab--success and .nj-fab--warning, .nj-fab--danger

Webcomponents
  • remove webComponent initialization
Global components initialization
  • replace web-animation-js dependency for global file
  • lib/auto-init is included to lib/fluid-design-system.js
  • lib/fluid-design-system.js automatically initiate components
Utils classes
  • Remove classes: .rounded, .rounded--sm, .rounded--lg, .rounded-top, .rounded-bottom, .rounded-left, .rounded-right

👎 Depreciation

Switch
  • nj-switch is deprecated. You should use nj-segmented-control instead

ANGULAR

⚠️ Breaking Changes:

Angular version
  • Remove support for angular 11, 12, 13. Fluid now supports only Angular v14+
  • 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'
  • @angular/cdk is now a peerDependencie and will need to be installed alongside our library
Toggle
  • Remove @Input() variant theme from nj-toggle component
Avatar
  • Remove notificationColor @Input from nj-avatar
Badge
  • Remove variants @Input from nj-badge
Button
  • Buttons have now 4 variants: primary (default), secondary, destructive (previously danger) and inverse (previously light). For each variant it is possible to have 3 alternate buttons bold (default), subtle (previously outline) and minimal (previously ghost)
  • 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
  • Remove isInverse @Input from nj-button. (Replaced by variant="inverse")
  • Remove btnType values default' | 'outline' | 'ghost'
  • Remove variant values 'danger' | 'warning' | 'success'
  • Remove isInverse @Input from nj-button. (Replaced by variant="inverse")
  • 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
  • Rename Icon size value m to md
  • Remove variants: primary, light, warning, danger, success
  • 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.
  • Remove prop isUnderlined from nj-link. Links are all underlined except for link variant="contextual"
Progress
  • Remove variant @Input (color variations)
Toggle
  • 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>
  
Spinner
  • light variant has been renamed inverse icon
  • gray variant has been renamed grey icon

👎 Depreciation

Switch
  • nj-switch is deprecated. You should use nj-segmented-control instead

REACT

⚠️ Breaking Changes:

  • Drop support for React < 18
  • 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
Avatar
  • Replace NJBullet by NJStatusIndicator in the NJAvatar component to display status
  • Remove notificationColor prop
  • Avatar size mapping has changed
    • 32px is now the sm prop (was xs)
    • 48px is now the md prop (was sm)
    • 64px is now the lg prop (was md)
    • 96px is now the xl prop (was lg)
Autocomplete
  • Rename prop from disabled to isDisabled
  • Rename prop from required to isRequired
Badge
  • Prop value is replaced by a children to display the value
  • Remove variant color prop
  • Rename prop from active to isActive
Button
  • Buttons have now 4 variants: primary (default), secondary, destructive (previously danger) and inverse (previously light). For each variant it is possible to have 3 alternate buttons bold (default), subtle (previously NJButtonOutline) and minimal (previously ghost)

  • 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' | 'light'
  • Remove possibility to have a NJButton with an icon only. (Will be replaced by specific component NJIconButton)
  • Remove iconPosition @Input from NJButton. (Buttons should always have their icon on the left now)
  • Remove size="block" @Input from NJButton
CardCover
  • 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
Icon
  • Rename Icon size value m to md
Forms
  • Props id is now mandatory on Input component
  • Update input component with new design and updated props
  • Update input component to handle password show/hide value without additional code
  • Update search component with new input design and add clear value on clear icon enter keypress
  • Update textarea with new design and remove Textarea component. Textarea is now usable by passing props: isMultiLine to Input component
  • Remove variants: primary, light, warning, danger, success
  • Remove prop isUnderlined from NJLink. Links are all underlined except for link variant="contextual"
ListGroup
  • NJListGroup renamed to NJList
Radio
  • Rename prop from check to isChecked
  • Rename prop from disabled to isDisabled
  • Rename prop from required to isRequired
Progress
  • Remove variant prop (color variations)
Toggle
  • Rename prop from check to isChecked
  • Rename prop from disabled to isDisabled
  • 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
Switch
  • Rename prop from check to isChecked
  • Rename prop from disabled to isDisabled
Tag
  • Variants have been replaced with new colors, here are the new tokens:
    grey (default),
    brand,
    teal,
    pink,
    orange,
    red,
    green,
    ultramarine,
    yellow,
    purple
  
  • All tags are now filled, remove prop filled
  • Remove margin on tags
Spinner
  • light variant has been renamed inverse icon
  • gray variant has been renamed grey icon

👎 Depreciation

Forms
  • Textarea is deprecated and will be removed in next version, you can replace it by using Input component and setting isMultiLine to true
  • Select and GroupSelect components are deprecated and will be removed in next version. They should be replaced by Input with native <select> as child as done below:
  <Input id='select' label='select' iconName='keyboard_arrow_down' isSelect={true} {...props}>
    <select data-childName="inputField">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
      <option>Option 5</option>
    </select>
  </Input>
  • Dropdown is deprecated and will be removed in next version. You should replace it with new component SelectInput
Switch
  • NJSwitch is deprecated. You should use NJSegmentedControl instead
Fab
  • Remove variants success and warning, danger

TOKENS

⚠️ Breaking Changes:

Spacing
  • 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
  
Icon
  • Rename icon.size.m to icon.size.md and change values of icon.size.sm