@engie-group/fluid-design-system-angular/docs/MIGRATION_GUIDE_V0_TO_V1.md

Fluid Design System 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