@engie-group/fluid-design-system-angular
Version:
Fluid Design System Angular
1,791 lines (1,139 loc) • 76.9 kB
Markdown
# Changelog
All notable changes to Fluid Design System Angular will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
## 📦 6.0.0 - 2025-12-10
Major release of `Fluid 6`.
All changes since `2.13.0` can be found above in details and are summarized in [the migration guide](https://fluid.design.digital.engie.com/fluid-design-system/storybook/angular/index.html?path=/docs/docs-migrations-v2-to-v6--documentation).
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-system@6.0.0
- @engie-group/fluid-types@6.0.0
- @engie-group/fluid-design-tokens@6.0.0
## 📦 6.0.0-rc.0 - 2025-12-09
### ⚠️ Breaking changes
###### [GLOBAL]
- Migrate library from Angular 19 to Angular 20
- Project with version of Angular inferior to 20 are no longer supported.
###### [AUTOCOMPLETE]
- Renamed `isClearable` input to `clearable` for consistency across the design
###### [FORM-ITEM]
- Renamed `isClearable` input to `clearable` for consistency across the design
###### [LINK]
- Remove `hasIcon` input from Link component. It is now inferred from the presence of an icon or custom icon template
- Link component now requires `EngieTemplateDirective` to use custom icon templates
```angular2html
//Before
<a nj-link>
Label
<nj-icon custom-icon name="home"></nj-icon>
</a>
// After
<a nj-link>
Label
<nj-icon *njTemplate="'icon'" name="home"></nj-icon>
</a>
```
###### [SEGMENTED-CONTROL]
- `SegmentedControlComponent` does no longer implements `ControlValueAccessor`. Use the `value` input and `valueChange` output to manage the selected value.
- `SegmentedControlComponent` no longer has an `isDisabled` input. Use the native `disabled` attribute on `SegmentedControlButtonComponent` instead.
- `SegmentedControlComponent` `size` input have been renamed to `scale`.
- `SegmentedControlButtonComponent` leverage composition and should be attached to a button element.
```angular2html
// Before
<nj-segmented-control [(ngModel)]="selectedValue">
<nj-segmented-control-button value="option1">Option 1</nj-segmented-control-button>
<nj-segmented-control-button value="option2">Option 2</nj-segmented-control-button>
</nj-segmented-control>
// After
<nj-segmented-control [(value)]="selectedValue"">
<button nj-segmented-control-button value="option1">Option 1</button>
<button nj-segmented-control-button value="option2">Option 2</button>
</nj-segmented-control>
```
### 🚀 Added
###### [BADGE]
- Change badge icon color when it has `warning` variant and `minimal` emphasis to `--nj-semantic-color-icon-status-warning-contrast-default` design token for a better contrast.
- Change badge vertical spacing:
- `6px` to `4px` for `md` scale
- `9px` to `6px` for `lg` scale
###### [TOGGLE]
- Add `handleIcon` input to customize the toggle handle icon. You can now pass any valid icon name to be displayed as icon on the toggle handle.
- Update `lg` scale styles and add `xl` scale option for toggle component.
### 🐛 Fixed
###### [BADGE]
- Fix badge border-radius to ensure a correct pill shape regardless of the badge scale.
###### [BUTTON]
- Fixed webkit `ai` variant background color issue.
###### [FORM-ITEM]
- Form item trailing icon has now the correct color
- Form item now correctly displays clear icon on input value change
- Form item trailing icons are now vertically centered
###### [ICON]
- Icon component with inherit color variant now correctly inherits color from parent elements.
###### [LIST]
- If list item trailing and leading custom icons are Fluid icon components, they now apply the correct fluid styles, like input bind icons, by default.
###### [LINK]
- Icon is now correctly placed depending on `iconPosition` input
###### [PAGINATION]
- Fixed item font family to `Lato` font.
###### [TOAST]
- Fixed Icon alignment in Toast component. Ensured that the icon is properly centered vertically within the Toast with respect to the text content.
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-system@6.0.0-rc.0
- @engie-group/fluid-types@6.0.0-rc.0
- @engie-group/fluid-design-tokens@6.0.0-rc.0
## 📦 3.0.0-next.14 - 2025-11-14
### ⚠️ Breaking changes
###### [DEPRECATED COMPONENTS REMOVAL]
- Remove deprecated `nj-button-deprecated` component
- Remove deprecated `nj-icon-engie` component
- Remove deprecated `nj-icon-button-deprecated` component
- Remove deprecated `nj-switch` component
- Since deprecated components have been removed, `@fluid-4-deprecated` package is no longer needed. You can remove it from your dependencies.
###### [AVATAR]
- Remove deprecated `size` property. Use `scale` property instead.
- Remove `nj-avatar` background for picture avatars.
###### [AVATAR-LIST]
- Remove deprecated `size` property. Use `scale` property instead.
###### [BADGE]
- The badge component no longer controls custom icon sizes. Custom icon sizes must now be defined directly in the custom icon definition itself.
Use the `--nj-material-icon-size` CSS custom property to set the icon size.
Example of setting a custom icon size using this CSS custom property:
```html
<svg
aria-hidden="true"
focusable="false"
width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
style={{
width: 'var(--nj-material-icon-size)',
height: 'var(--nj-material-icon-size)',
stroke: 'var(--nj-material-icon-color)',
fill: 'none'
}}
>
<path d="M10.5 5.5V6.5H9.5V5.5H10.5ZM10.5 9.5V14.5H9.5V9.5H10.5ZM0.5 10C0.5 4.75614 4.75614 0.5 10 0.5C15.2439 0.5 19.5 4.75614 19.5 10C19.5 15.2439 15.2439 19.5 10 19.5C4.75614 19.5 0.5 15.2439 0.5 10ZM1.5 10C1.5 14.6861 5.31386 18.5 10 18.5C14.6861 18.5 18.5 14.6861 18.5 10C18.5 5.31386 14.6861 1.5 10 1.5C5.31386 1.5 1.5 5.31386 1.5 10Z" />
</svg>
```
###### [BUTTON]
- Remove deprecated `size` property. Use `scale` property instead.
- Content projected icon is now prioritized over property bind icon
###### [TAG]
- Rename `size` property to `scale`
### 🐛 Fixed
###### [AVATAR]
- Avatar list scale is now correctly propagated to child avatars.
###### [FORM-ITEM]
- Fix `NJFormItem` components to correctly handle floating label behavior when the `id` prop is not set.
### 🚀 Added
###### [GLOBAL]
- Font used in components are now embedded directly in CSS file (Lato, Material Icons, Roboto Mono). They should no longer be imported externally.
###### [AVATAR-LIST]
- Avatar list's scale now propagates to the children avatars by CSS.
If you set a scale to avatar list, all avatars will be scaled accordingly.
You can still set a specific scale to an avatar to override the inherited one.
###### [SKELETON]
- Add skeleton circle scales `2xl` and `3xl`
- Update skeleton circle scale :
- `sm`: 32px
- `md`: 40px
- `lg`: 48px
- `xl`: 56px
- `2xl`: 64px
- `3xl`: 96px
- Default skeleton circle scale is now `lg`
###### [TAG]
- Add `xl` scale to tag component
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-system@6.0.0-next.11
- @engie-group/fluid-types@0.1.0-next.6
## 📦 3.0.0-next.13 - 2025-07-24
### 🐛 Fixed
###### [BADGE]
- Default `emphasis` for AI `variant` is now correctly applied.
###### [MENU-GROUP]
- Correct line-height of header element is now applied.
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-types@0.1.0-next.5
## 📦 3.0.0-next.12 - 2025-07-12
### ⚠️ Breaking changes
###### [MENU]
- Menu group separators are now part of the menu group component. Manually set separators, if any,
should be removed from the menu component.
### 🐛 Fixed
###### [LIST]
- Update list item content font size design token, from `--nj-semantic-font-size-text-sm` to `--nj-semantic-font-size-text-md`
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-types@0.1.0-next.4
- @engie-group/fluid-design-system@6.0.0-next.10
## 📦 3.0.0-next.11 - 2025-06-23
### ⚠️ Breaking changes
###### [LIST]
- `ListComponent` is now a directive -> `ListDirective`. Its selector has been changed from `ul[nj-list]` to `ul[njList]`.
###### [LIST-ITEM]
- Remove existing `ListItemTrailingDirective`. This feature is now part of `ListItemContentComponent`.
- Remove existing `ListItemWrapperDirective`. This feature is now part of `ListItemContentComponent`.
###### [LIST-NAVIGATION-ITEM]
- `ListItemNavigationComponent` is now a directive -> `ListNavigationItemDirective`. It must be applied on a HTML `<li>` tag like `ListItemDirective` with the selector `li[njListNavigationItem]`.
### 🚀 Added
###### [ENGIE TEMPLATE DIRECTIVE]
- Add a new selector: `leading` used in the `ListItemContentComponent`(`nj-list-item-content`) to add a trailing element
###### [LIST-ITEM]
- Add `ListItemContentComponent` for the content of a list item.
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-types@0.1.0-next.3
- @engie-group/fluid-design-system@6.0.0-next.9
## 📦 3.0.0-next.10 - 2025-04-16
### 🐛 Fixed
###### [AVATAR]
- Fix badge default variant, from `neutral` to `information`
###### [DISPLAY, HEADING, TEXT]
- Add missing neutrals variations `primary`, `secondary`, `tertiary`, `contrast`, `inverse`.
###### [INLINE-MESSAGE]
- Fix `information` variant not working properly
- Fix `actionPositon` input not working properly
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-system@6.0.0-next.8
- @engie-group/fluid-types@0.1.0-next.2
## 📦 3.0.0-next.9 - 2025-04-09
### ⚠️ Breaking changes
###### [HEADING]
- Reduce font size of scales `lg` and `xl`, to keep previous sizes, use instead respectively : heading `xl` and display `md`
- Remove `2xl` scale property value, use new display directive instead
```angular2html
<!-- Before -->
<h1 njHeading scale="2xl">Previous heading 2xl ➡️ doesn't exist anymore</h1>
<h1 njHeading scale="xl">Previous heading xl ➡️ font size reduced</h1>
<h1 njHeading scale="lg">Previous heading lg ➡️ font size reduced</h1>
<!--Now-->
<h1 njDisplay scale="xl">Previous heading 2xl ➡️ Now display xl</h1>
<h1 njDisplay scale="md">Previous heading xl ➡️ Now display md</h1>
<h1 njHeading scale="xl">Previous heading lg ➡️ Now heading xl</h1>
```
###### [ICON]
- `name` input of `nj-icon` and `nj-icon-engie` components is now required.
###### [SKELETON-CIRCLE]
- Rename `variant` input to `scale`.
###### [SKELETON-RECTANGLE]
- Rename `size` input to `scale`.
###### [SPINNER]
- Remove, no longer used, `isBlock` input
- Remove `isLoading` input, stop rendering the component if not loading
```angular2html
<!-- Before, no longer working -->
<nj-spinner [isLoading]="isLoading" />
<!--Now-->
<nj-spinner *ngIf="isLoading" />
```
### 🚀 Added
###### [DISPLAY]
- Implement `njDisplay` directive. See documentation for a better understanding of the component usage.
###### [HEADING]
- Add `ai` variant which colors the text with Engie's `ai` gradient
###### [SELECT]
- `nj-select` now supports the `null` value as a valid option. This is useful when you want to select an option that has no real value.
```angular2html
<nj-select>
<ng-container njSelectOptions>
<li nj-list-item-deprecated [value]="null">Select an option</li>
<li nj-list-item-deprecated value="af">Afghanistan</li>
<li nj-list-item-deprecated>Albania</li>
</ng-container>
</nj-select>
```
###### [SPINNER]
- Add default value to the `ariaLabel` input for assistive technologies.
### 🐛 Fixed
###### [CHECKBOX]
- Fix checkbox scale `xl` displaying in `md`
###### [SKELETON-RECTANGLE]
- Fix missing styles used in skeleton rectangle component after token update
### 🛠️ Maintained
- Updated dependencies:
- @engie-group/fluid-design-system@6.0.0-next.7
- @engie-group/fluid-types@0.1.0-next.1
## 📦 3.0.0-next.8 - 2025-03-21
### ⚠️ Breaking changes
###### [GLOBAL]
- Migrate from Angular 16 to Angular 19.
- Project with version of Angular inferior to 19 are no longer supported.
###### [AUTOCOMPLETE]
- `search` output has been renamed to `inputValueChange` to be compliant with `@angular-eslint` parser `@angular-eslint/no-output-native` rule.
```angular2html
<!--From (not working anymore)-->
<nj-autocomplete (search)="handleFunction($event)">
<span njFormLabel>label</span>
<span njFormSubscript>subscript</span>
</nj-autocomplete>
<!--To-->
<nj-autocomplete (inputValueChange)="handleFunction($event)">
<span njFormLabel>label</span>
<span njFormSubscript>subscript</span>
</nj-autocomplete>
```
###### [ICON-BUTTON]
- The default size of the icon button has been changed from `xs` to `sm`.
### 🚀 Added
###### [ICON]
- Add new `scale` property to replace the `size` property. `size` property as been deprecated.
###### [ICON-BUTTON]
- Add new `scale` property to replace the `size` property. `size` property as been deprecated.
### 🐛 Fixed
###### [GLOBAL]
- Fix components not transpiling correctly
### 🛠️ Maintained
- Updated dependencies:
- @engie-group/fluid-design-system@6.0.0-next.6
- @engie-group/fluid-types@0.1.0-next.0
## 📦 3.0.0-next.7 - 2025-03-04
### 🛠️ Maintained
- Updated dependencies:
- @engie-group/fluid-design-system@6.0.0-next.5
## 📦 3.0.0-next.6 - 2025-02-12
### ⚠️ Breaking changes
###### [AVATAR]
- `size` input is now deprecated, use the new `scale` property instead.
- Added new `scale` values:
- `2xl` -> `64px`
- `3xl` -> `96px`
- Updated `scale` values:
- `md` = `48px` -> `40px`
- `lg` = `64px` -> `48px`
- `xl` = `96px` -> `56px`
- Restructuring the component `nj-avatar` with composition pattern.
```angular2html
<!-- OLD -->
<nj-avatar status="online" notification="3"></nj-avatar>
<!-- NEW -->
<nj-avatar label="some person">
<nj-status-indicator status="online" />
<nj-badge [value]="3"/>
</nj-avatar>
```
###### [BUTTON]
- The `label` is now shown on the button when loading.
###### [INLINE-MESSAGE]
- To align with design guidelines, the `hasStatus` input default value is now `true`
###### [LINK]
- `LinkComponent` selector has been updated to a directive component on a native link element (`nj-link` -> `a[nj-link]`). Update your `nj-link` tags as follows.
```angular2html
<!-- Before -->
<nj-link href="https://www.engie.com">ENGIE</nj-link>
<!-- After -->
<a nj-link href="https://www.engie.com">ENGIE</a>
```
###### [SIDEPANEL]
- Replace specific `Sidepanel` & `SidepanelHeader` components' structural directives with the global `EngieTemplateDirective`. Please update your code accordingly.
- `SidepanelHeaderDirective`, `SidepanelFooterDirective`, `SidepanelHeaderActionDirective` are removed.
```angular2html
<!-- Before -->
<nj-sidepanel>
<nj-sidepanel-header *njSidepanelHeader title="Title">
<button *njSidepanelHeaderAction nj-icon-button icon="info"></button>
<button *njSidepanelHeaderAction nj-icon-button icon="more_horiz"></button>
</nj-sidepanel-header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ng-template njSidepanelFooter>Footer content</ng-template>
</nj-sidepanel>
<!-- After -->
<nj-sidepanel>
<nj-sidepanel-header *njTemplate="'header'" title="Title">
<button *njTemplate="'action'" nj-icon-button icon="info"></button>
<button *njTemplate="'action'" nj-icon-button icon="more_horiz"></button>
</nj-sidepanel-header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ng-template [njTemplate]="'footer'">Footer content</ng-template>
</nj-sidepanel>
```
###### [SIDEPANEL-HEADER]
- Remove `hasCloseIcon` input from `SidepanelHeaderComponent`. Close icon is displayed if `closeIconClicked` event emitter is observed.
###### [SIDEPANEL-LAYOUT]
- `SidepanelLayoutComponent`component has been deleted as it was not aligned with the library philosophy. Fluid doesn't aim to provide layout components.
- Removed `SidepanelLayoutComponent`.
- Removed `SidepanelLayoutPanelDirective`.
```angular2html
<!-- Before -->
<nj-sidepanel-layout>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div *njSidepanelLayoutPanel></div>
</nj-sidepanel-layout>
<!-- After (example) -->
<div style="display: flex;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div *njTemplate="'sidecar'"></div>
</div>
```
### 🚀 Added
###### [GLOBAL]
- Added new responsive token for typescale: `--nj-semantic-font-size-text-xx`, `--nj-semantic-font-size-heading-xx`, `--nj-semantic-line-height-text-xx` & `--nj-semantic-line-height-heading-xx` tokens. They replace usage of specific desktop and mobile versions. They value change depending on the screen size.
###### [ENGIE-TEMPLATE-DIRECTIVE]
- Added a new global selectors: `footer`
###### [INLINE-MESSAGE]
- Added new optional `scale` input.
### 🛠️ Maintained
- Updated dependencies:
- @engie-group/fluid-design-system@6.0.0-next.4
## 📦 3.0.0-next.5 - 2024-12-09
### ⚠️ Breaking changes
###### [SPINNER]
- Update `scale` value from `xxs` to `2xs`
```angular2html
<!-- Before -->
<nj-spinner [scale]="'xxs'"></nj-spinner>
<!-- Now -->
<nj-spinner [scale]="'2xs'"></nj-spinner>
```
### 🚀 Added
###### [BADGE]
- Add new `ai` value for the `variant` input.
- Deprecate `size` input, use `scale` input instead with same values.
###### [BUTTON]
- Add new `ai` value for the `variant` input.
- Deprecate `size` input, use `scale` input instead with converted values.
###### [ICON]
- Add new color values for the `variant` input: `ai`, `*-contrast`. See component doc for an exhaustive list.
- Update icon sizes for a better consistency with design.
- Add a new icon `engie_ai` in the icon library. This icon is Engie specific and is used to represent the Gen AI.
###### [SPINNER]
- Add new `ai` value for the `variant` input
- Deprecate `size` input, please use `scale` input instead with same values.
###### [STATUS-INDICATOR]
- Add new `ai` value for the `variant` input
- Deprecate `size` input, use `scale` input instead with same values.
###### [TOGGLE]
- Add new `ai` value for the `variant` input
- Deprecate `size` input, use `scale` input instead with same values.
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-system@6.0.0-next.3
## 📦 3.0.0-next.4 - 2024-11-06
### ⚠️ Breaking changes
###### [INLINE-MESSAGE]
- Remove the ability to pass a title with `njInlineMessageTitle`, the inline-message doesn't have a title by design.
You can use some strong text or change the design. Take a look at the new `njHeading` and `njText` components.
```angular2html
<!-- OLD -->
<nj-inline-message>
<span njInlineMessageTitle>Title Message</span>
<div>
Message description
</div>
</nj-inline-message>
<!-- NEW: remove title -->
<nj-inline-message>
Message description
</nj-inline-message>
```
### 🚀 Added
###### [INLINE-MESSAGE]
- An action element can now be passed (for example, a link "Learn more" or "Undo action").
- use the `EngieTemplateDirective` with the `action` selector
- modify its position with `@Input actionsPosition` ('bottom' | 'right', defaults to bottom)
```angular2html
<nj-inline-message actionsPlacement="right">
Message description
<nj-link *njTemplate="'action'" href="">Lean more</nj-link>
</nj-inline-message>
```
### 🐛 Fixed
###### [INLINE-MESSAGE]
- When using the inline message with `[hasStatus]="true"`, the displayed status indicator size will now appear larger to match design updates.
###### [STATUS-INDICATOR]
- Update `nj-status-indicator` sizes to account for borders. Status indicators sizes are now 2px smaller:
- `sm`: 14px -> 12px,
- `md`: 18px -> 16px,
- `lg`: 26px -> 24px
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-system@6.0.0-next.2
## 📦 3.0.0-next.3 - 2024-10-07
### 🛠️ Maintained
- Update codebase with last current version
- Updated dependencies
- @engie-group/fluid-design-system@6.0.0-next.1
## 📦 3.0.0-next.2 - 2024-10-04
### 🚀 Added
###### [HEADING]
- Added a new `Heading` directive to the design system
`njHeading` are used for page titles or subheadings to introduce content.
They are designed to contrast with body content, enhancing visual hierarchy and helping readers easily understand the content structure.
```jsx
<h1 njHeading scale="2xl" variant="primary">
Hello World
</h1>
```
###### [TEXT]
- Added a new `Text` directive to the design system
`njText` directive is used for the main content, typically following headings. It serves as detailed descriptions and messages but can also stand alone in components.
It comes with different scales and variants to adapt to the context.
```jsx
<p njText scale="md" variant="primary" isMono>
Hello World
</p>
```
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-system@6.0.0-next.0
## 📦 3.0.0-next.1 - 2024-09-16
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-system@5.15.4
- @engie-group/fluid-design-tokens@5.8.1
## 📦 3.0.0-next.0 - 2024-07-16
### ⚠️ Breaking changes
###### [BUTTON]
- Previous `ButtonComponent`(`nj-button`) as been deprecated and renamed to `ButtonDeprecatedComponent`(`nj-button-deprecated`).
- Please switch to the new `ButtonComponent`(`button[nj-button]`) when possible, or rename your occurrences to the new name.
```angular2html
<!--From (not working anymore)-->
<nj-button>Lorem ipsum</nj-button>
<!--To-->
<nj-button-deprecated>Lorem ipsum</nj-button-deprecated>
<!--Or with new ButtonComponent-->
<button nj-button>Lorem ipsum</button>
```
###### [ICON-BUTTON]
- Previous `IconButtonComponent`(`nj-icon-button`) as been deprecated and renamed to `IconButtonDeprecatedComponent`(`nj-icon-button-deprecated`).
- Please switch to the new `IconButtonComponent`(`button[nj-icon-button]`) when possible, or rename your occurrences to the new name.
```angular2html
<!--From (not working anymore)-->
<nj-icon-button icon="info"></nj-icon-button>
<!--To-->
<nj-icon-button-deprecated icon="info"></nj-icon-button-deprecated>
<!--Or with new IconButtonComponent-->
<button nj-icon-button icon="info"></button>
```
###### [LIST-GROUP]
- Previous `ListGroupComponent`(`nj-list-group`) and `ListItemComponent`(`li[nj-list-item]`) as been deprecated and renamed to `ListDeprecatedComponent`(`nj-list-deprecated`) and `ListItemDeprecatedComponent`(`li[nj-list-item-deprecated]`).
- Please switch to the new `ListComponent`(`ul[nj-list]`) and its `ListItemDirective`(`[njListItem]`) when possible, or rename your occurrences with the new names.
```angular2html
<!--From (not working anymore)-->
<nj-list-group>
<li nj-list-item>Lorem ipsum dolor.</li>
</nj-list-group>
<!--To-->
<nj-list-deprecated>
<li nj-list-item-deprecated>Lorem ipsum dolor.</li>
</nj-list-deprecated>
<!--Or with new ListComponent-->
<ul nj-list>
<li njListItem>Lorem ipsum dolor.</li>
</ul>
```
### 🚀 Added
###### [BUTTON]
- Create a new `ButtonComponent`(`button[nj-button]`) which should be directly attached to a native `button` HTML element.
- Create a new `ButtonIconDirective`(`[njButtonIcon]`) which add button's icon style to its parent.
- `ButtonComponent` can detect `EngieTemplateDirective`'s `icon` selector to add element as an icon
```angular2html
<!--Complete example of the refactored component and the new directive-->
<button nj-button>
<svg *njTemplate="'icon'" njButtonIcon>...</svg>
Refactored button
</button>
```
###### [ENGIE TEMPLATE DIRECTIVE]
- Add a new selector: `trailing` used in the `ListItemNavigationComponent`(`[nj-list-item-navigation]`) to add a trailing element
###### [ICON-BUTTON]
- Create a new `IconButtonComponent`(`button[nj-icon-button]`) which should be directly attached to a native `button` HTML element.
- Create a new `IconButtonIconDirective`(`[njIconButtonIcon]`) which add icon button's icon style to its parent.
- `IconButtonComponent` can detect `EngieTemplateDirective`'s `icon` selector to add element as an icon
```angular2html
<!--Complete example of the refactored component and the new directive-->
<button nj-icon-button>
<svg *njTemplate="'icon'" njIconButtonIcon>...</svg>
</button>
```
###### [LIST]
- Create a new `ListComponent`(`ul[nj-list]`), based on the new list design, which should be directly attached to a native `ul` HTML element.
- Create a new `ListItemDirective`(`li[njListItem]`), which should be directly attached to a native `li` HTML element.
It is used to add a specific layout and style to a list item.
- Create a new `ListItemWrapperDirective`(`[njListItemWrapper]`).
It should be used when the list item should be wrapped by an element (link, button, ...)
- Create a new `ListItemNavigationComponent`(`[nj-list-item-navigation]`) which add a specific layout to a list item to add a leading icon, a content, a secondary text and/or a trailing element.
It can be attached to a `ListItemDirective`(`li[njListItem]`) or a `ListItemWrapperDirective`(`[njListItemWrapper]`).
- Create a new `ListItemTrailingDirective`(`[njListItemTrailing]`), which can be attached to a `BadgeComponent`(`nj-badge`) or a `ToggleComponent`(`nj-toggle`).
It is used, in combination of the new `EngieTemplateDirective`'s `trailing` selector, to add those components as a trailing element of a list item.
```angular2html
<!--Complete example of the new components and directives-->
<ul nj-list>
<li njListItem>
<button njListItemWrapper nj-list-item-navigation>
With a badge
<nj-badge *njTemplate="'trailing'" njListItemTrailing>5</nj-badge>
</button>
</li>
</ul>
```
###### [MENU]
- Create new `MenuComponent`(`nj-menu`) and `MenuGroupComponent`(`nj-menu-group`) to add a popover menu to your application.
These components are used in combination of the Angular Material `CdkMenuModule` and the new `ListComponent`.
```angular2html
<!--Complete example of the new component -->
<button nj-button [cdkMenuTriggerFor]="menu">Trigger</button>
<ng-template #menu>
<nj-menu cdkMenu>
<nj-menu-group headerLabel="Lorem" cdkMenuGroup>
<ul nj-list>
<li njListItem>
<button njListItemWrapper nj-list-item-navigation cdkMenuItem (cdkMenuItemTriggered)="action()">
Lorem ipsum.
</button>
</li>
</ul>
</nj-menu-group>
</nj-menu>
</ng-template>
```
## 📦 2.13.0 - 2025-11-13
### 🐛 Fixed
###### [AUTOCOMPLETE]
- Autocomplete search can now be used with special characters
###### [TAB]
- Fix `font-family` for `Tab` component to match the design specifications.
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.13.0
- @engie-group/fluid-design-system@5.18.2
## 📦 2.12.7 - 2025-07-11
### 🐛 Fixed
###### [PAGINATION]
- Current item is not interactive anymore. It was not intended to be interactive.
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-system@5.18.1
## 📦 2.12.6 - 2025-06-23
### 🐛 Fixed
###### [ICON]
- Fix icon size `2xl` not working properly
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-system@5.18.0
## 📦 2.12.5 - 2025-04-07
### 🐛 Fixed
###### [SKELETON]
- Fix styles used in skeleton component after token update
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-system@5.17.2
- @engie-group/fluid-design-tokens@5.12.0
## 📦 2.12.4 - 2025-02-12
### 🐛 Fixed
###### [SEGMENTED-CONTROL]
- Animation has been removed to be aligned with design directions
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.11.0
- @engie-group/fluid-design-system@5.17.1
## 📦 2.12.3 - 2024-12-06
### 🐛 Fixed
###### [SEARCH]
- Add background color to search input
###### [SELECT]
- Fix select options focus not working properly on webkit browsers (Safari).
### 🛠️ Maintained
- Remove engine property from package.json file which was causing install warning.
- Updated dependencies
- @engie-group/fluid-design-tokens@5.10.0
- @engie-group/fluid-design-system@5.17.0
## 📦 2.12.2 - 2024-10-07
### 🐛 Fixed
###### [ALERT & TAG]
- Update font size with the new font size tokens
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-system@5.16.2
## 📦 2.12.1 - 2024-10-03
### 🚀 Added
###### [GLOBAL]
- Update font family to `Roboto Mono` for monospace. Please import this font in your project
```diff
- href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&display=swap"
+ href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900|Roboto+Mono:300,400,700,900&display=swap"
```
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.9.0
- @engie-group/fluid-design-system@5.16.1
## 📦 2.12.0 - 2024-10-02
### 🚀 Added
###### [BUTTON]
- Added a new status `isLoading` to display the button with a spinner.
If the status is set to `isLoading`, the actions on the button will be disabled and the spinner will be displayed and will replace the button content.
```angular2html
<nj-button isLoading="true" label="Label"></nj-button>
```
###### [PROGRESS]
- Replaced `hasDescription` input with `descriptionPosition` input in `nj-progress` component.
Now you can choose between `none`, `bottom` and `right` for the position of the description
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.8.2
- @engie-group/fluid-design-system@5.16.0
## 📦 2.11.4 - 2024-09-13
### 🐛 Fixed
###### [FORM-CONTROL]
- Update styles of all form controls due to rendering issue.
###### [SPINNER]
- Update styles of the spinner component to fix a rendering bug.
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-system@5.15.4
- @engie-group/fluid-design-tokens@5.8.1
## 📦 2.11.3 - 2024-09-11
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-system@5.15.3
## 📦 2.11.2 - 2024-09-08
### 🐛 Fixed
###### [AVATAR]
- Avatar default icon is now correctly rendered.
###### [STATUS-INDICATOR]
- Status indicator badge is now correctly rendered
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-system@5.15.2
- @engie-group/fluid-design-tokens@5.8.0
## 📦 2.11.1 - 2024-09-06
### 🛠️ Maintained
- Remove unpublished dependency
- Update URLs in README.md
- Updated dependencies
- @engie-group/fluid-design-system@5.15.1
## 📦 2.11.0 - 2024-09-06
### ⚠️ Breaking changes
###### [GLOBAL]
- Build has been reworked to fix some major issues and facilitate future development.
We strongly recommend consulting the Getting started documentation to update your project.
- The main changes are based on how you will have to import CSS in your project.
If you encounter any issues, please come back to us.
Components no longer import CSS automatically, you will have to import it manually in your project.
```json
// In your angular.json file
{
"styles": [
"@engie-group/fluid-design-tokens/lib/css/tokens.css",
// Only if you use deprecated components
"@engie-group/fluid-4-deprecated/tokens/lib/css/tokens.css",
"@engie-group/fluid-design-system-angular/lib/styles/fluid-design-system.css"
]
}
```
### 🐛 Fixed
###### [TAG]
- Fix the display of the focus ring when `TagComponent` is clickable
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-system@5.15.0
## 📦 2.10.0 - 2024-08-23
### ⚠️ Breaking changes
###### [BREADCRUMB]
- Remove default margin (32px) and padding (4px). Your layout can be affected by this change, you can add them back if needed (values provided at the start).
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-system@5.14.0
## 📦 2.9.1 - 2024-07-16
### 🐛 Fixed
###### [TOGGLE]
- Prevent icon only toggle's accessible label from being displayed.
- Remove unwanted margin when no label is provided
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-system@5.13.0
## 📦 2.9.0 - 2024-07-09
### 🚀 Added
###### [CHECKBOX]
- Add new `@Input() indeterminate` prop to set the indeterminate state of the checkbox
### 🐛 Fixed
###### [FORM-ITEM]
- Ensure the `nj-form-item` with `textarea` uses the correct font (sans-serif)
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.7.2
- @engie-group/fluid-design-system@5.12.1
## 📦 2.8.0 - 2024-06-04
### ⚠️ Breaking changes
###### [ICON-BUTTON]
- We updated the `@Input() size` values and added some more:
- NEW `2xs` (height of `16px`)
- NEW `xs` (height of `24px`, it is the **new default**)
- UPDATED `small` -> `sm` (height `32px`, used to be `16px`, please use the `2xs` instead)
- NEW `md` (height `40px`, old default, used to be `24px`)
- UPDATED `large` -> `lg` (height `48px`, used to be `32px`, please use the `sm` instead)
- NEW `xl` (height of `56px`)
```angular2html
<!-- To apply those changes, search and replace the following components: -->
<nj-icon-button size="small"></nj-icon-button> -> <nj-icon-button size="2xs"></nj-icon-button>
<nj-icon-button size="large"></nj-icon-button> -> <nj-icon-button size="sm"></nj-icon-button>
```
### 🚀 Added
###### [ACCORDION]
- Add a new `AccordionComponent`.
This component is used in combination of the new `AccordionItemComponent`, `AccordionActionsComponent` and `AccordionActionDirective`.
- Add new `EngieTemplateDirective`'s `icon` and `header` selectors, which are currently used to add a leading icon or pass a custom header to an `AccordionItemComponent`.
```angular2html
<!--Complete example of the new components and directives-->
<nj-accordion>
<nj-accordion-actions>
<nj-button emphasis="subtle" njAccordionAction="expand">Expand all</nj-button>
<nj-button emphasis="subtle" njAccordionAction="collapse">Collapse all</nj-button>
</nj-accordion-actions>
<details nj-accordion-item label="Header 1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, ex.
</details>
<details nj-accordion-item label="Header 2">
<nj-icon *njTemplate="'icon'" name="info"></nj-icon>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid illo iste, sunt temporibus vero voluptas? Accusantium autem esse modi quia.
</details>
<details nj-accordion-item>
<span *njTemplate="'header'">Header 3</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</details>
</nj-accordion>
```
###### [AUTOCOMPLETE]
- Add new `@Input() hasSuccess` to trigger success state when a `subscript` is provided
###### [CHECKBOX]
- Add new `@Input() subscriptMessage` to add some hint below the checkbox
- Add new `@Input() hasSuccess` to trigger success state when a `@Input() subscript` is provided
###### [FORM-ITEM]
- Add new `@Input() hasSuccess` to trigger success state when a `subscript` is provided
###### [MULTI-SELECT]
- Add new `@Input() hasSuccess` to trigger success state when a `subscript` is provided
###### [RADIO]
- Add two new `nj-radio` sizes:
- `lg`: 24px
- `xl`: 32px
###### [SELECT]
- Add new `@Input() hasSuccess` to trigger success state when a `subscript` is provided
###### [TEXTAREA]
- Add new `@Input() hasSuccess` to trigger success state when a `subscript` is provided
### 🖍 Changed
###### [CHECKBOX]
- Deprecated `@Input() errorMessage` in favor of `@Input() subscriptMessage` combined to `@Input() hasError`
###### [RADIO]
- Update `nj-radio` default size from 20px to 16px
### 🐛 Fixed
###### [RADIO]
- Update `nj-radio-group` error message not displaying correctly
###### [TAB]
- Fix a visual bug where the hover bar wasn't placed correctly
## 📦 2.7.0 - 2024-05-07
### 🚀 Added
###### [BADGE]
- Add a new `small` size variation with a height of `18px` (`@Input() size = 'sm'`)
### 🖍 Changed
###### [BADGE]
- Update the medium size (`@Input() size = 'md'`) to `24px`. Old was `20px`.
## 📦 2.6.2 - 2024-04-18
### 🖍 Changed
###### [GLOBAL]
- Update fluid dependencies
## 📦 2.6.1 - 2024-04-12
### 🐛 Fixed
###### [GLOBAL]
- Fix border colors on `nj-inline-message`s, `nj-badge`s and `nj-tag`s color variants
## 📦 2.6.0 - 2024-04-12
#### ⚠️ Breaking changes
###### [BUTTON]
- Add new `large` size. Previous `large` size is now `xlarge`. Please update your base code to reflect this change if needed.
```angular2html
<nj-button size="large"></nj-button> ==> <nj-button size="xlarge"></nj-button>
```
###### [CHECKBOX]
- To standardize our component sizes and for consistency with the design, we had to make modifications to the checkbox sizes:
- ❌ REMOVED `sm`, use the normal size instead (OLD: 14px)
- 🖍 UPDATED `md` to 16 px (OLD: 20px)
- 🖍 UPDATED `lg` to 24px (OLD: 30px)
- 🚀 ADDED new `xl` with a size of 32px
- We also removed the animation, and therefor removed the `isAnimated` @Input()
### 🚀 Added
###### [ENGIE TEMPLATE DIRECTIVE]
- Implement a new generic structural directive, which will be used to inject elements in our current components.
The approach for this directive, is to have only one structural directive used in all our library for this purpose.
We will deploy its usage step by step on existing components. You can already use it in our new `SearchComponent`.
###### [SEARCH]
- Implement new `nj-search` component
- Search component can be augmented with an action via a structural `EngieTemplateDirective` with `'action'` selector:
- You can use a `ButtonComponent` with `SearchButtonDirective` as `action` element.
```angular2html
<nj-search>
<nj-button *njTemplate="'action'" njSearchButton>Search</nj-button>
</nj-search>
<!--Or-->
<nj-search>
<ng-template njTemplate="action">
<nj-button njSearchButton>Search</nj-button>
</ng-template>
</nj-search>
```
###### [TABS]
- Add the possibility to pass a `nj-badge` to the tab-item, via the `badgeOptions` @Input():
- example: `<nj-tab [badgeOptions]="{ value: 50, emphasis: 'subtle', capedValue: 10 }">...</nj-tab>`
#### 🖍 Changes
###### [BUTTON]
- Add a `medium` size to replace `normal`, for better homogeneity between components. Usage of `normal` size is now deprecated.
## 📦 2.5.0 - 2024-03-20
#### ⚠️ Breaking changes
###### [GLOBAL]
- To accommodate the changes made to the border radius tokens, all components border radiuses have been set to the token `--nj-semantic-size-border-radius-none` (in order to not change their appearance).
## 📦 2.4.0 - 2024-03-05
### 🚀 Added
###### [CHECKBOX]
- Add new Input `size`: `sm` | `md` | `lg`
###### [FORM ITEM]
- Solve feature request [#989](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/989)
Add new input `isIconClickable`, default to `true`, which define whether the icon (and custom icon) can be clicked.
### 🖍 Changed
###### [GLOBAL]
- Update dependencies to support Node >= 20
###### [CHECKBOX]
- Update the required state to properly show an asterisk when `@Input() isRequired` is set to `true`
##### ⚠️ Breaking changes
###### [CHECKBOX]
- Removed the `@Input() isInline`. You can inline elements with the `display: flexbox` CSS property on the parent.
## 📦 2.3.0 - 2024-01-31
### 🚀 Added
###### [GLOBAL]
- Add new `CustomIconDirective` to better inject icon in components:
- Actually works with `BadgeComponent`
###### [BADGE]
- Add `iconName` input to add material icon in the badge.
- Link with `CustomIconDirective` to add custom icon in the badge:
```angular2html
<nj-badge>
<svg *njCustomIcon>...</svg>
badge label
</nj-badge>
```
###### [ICON]
- Add new icon size `xs`
### 🐛 Fixed
###### [GLOBAL]
- Fix issue [#955](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/955)
Icons used in other components have the right colors.
###### [AUTOCOMPLETE]
- Fix issue [#900](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/900),
Rework component to be more accessible, and shows keyboard on mobile.
###### [LINK]
- Fix issue [#926](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/926)
Keyboard navigation and focus works as expected when using `RouterLink` on `nj-link` component.
## 📦 2.2.1 - 2024-01-04
### 🐛 Fixed
###### [MULTI-SELECT]
- Fix multi-select not working correctly with reactive forms after release 2.2.0
## 📦 2.2.0 - 2024-01-04
### 🚀 Added
###### [SIDEBAR]
- Add new `nj-sidebar` component
### 🐛 Fixed
###### [SELECT], [MULTI-SELECT]
- Fix select and multi select options not updating on provided options change issue [#937](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/937)
## 📦 2.1.0 - 2023-12-15
### 🚀 Added
###### [GLOBAL]
- Add new `planet` variant to type `TSemanticVariants`
###### [BADGE]
- Add new `planet` semantic color variant
###### [INLINE MESSAGE]
- Add new `planet` and `discovery` semantic colors variants
###### [SIDEPANEL]
- Add new `nj-sidepanel` component
- Add new `nj-sidepanel-header` component to display a title, a close button, and some action buttons in the sidepanel.
- Add new `nj-sidepanel-layout` component to attach a sidepanel aside of a content
###### [STATUS INDICATOR]
- Add new `planet` and `discovery` semantic colors variants
###### [ICON]
- Add `inherit` color variant to inherit color from context.
- Add `secondary` and `tertiary` color variant.
### 🖍 Changed
###### [BREADCRUMB]
- Change the number of displayed elements in minified mode (from 3 to 2 elements)
##### ⚠️ Breaking changes
###### [CUSTOM LABEL DIRECTIVE]
- Rename directive from `njCustomLabelDef` to `njCustomLabel`.
###### [ICON]
- Update icon default color. Icon no longer inherit color from context.
If you want to keep the old behaviour, use the color variant `inherit`.
###### [INLINE MESSAGE]
- Rename `info` semantic color variant to `information` to homogenize with the new token names.
###### [STATUS INDICATOR]
- Rename `info` semantic color variant to `information` to homogenize with the new token names.
- Rename `in_progress` semantic color variant to `in-progress`
- Rename `do_not_disturb` semantic color variant to `do-not-disturb`
## 📦 2.0.3 - 2023-10-27
### 🖍 Changed
###### [GLOBAL]
- Update fluid dependencies
## 📦 2.0.2 - 2023-10-23
### 🖍 Changed
###### [GLOBAL]
- Update fluid dependencies
## 📦 2.0.1 - 2023-10-23
### 🐛 Fixed
###### [GLOBAL]
- Fix not being able to import components in an angular 16 project
## 📦 2.0.0 - 2023-10-20
### 🚀 Added
###### [GLOBAL]
- Add support for Angular v16+.
###### [CUSTOM LABEL DIRECTIVE]
- Create a structural directive `njCustomLabelDef` for templating the label of components.
This directive is currently used by `SelectComponent`.
###### [SELECT]
- Implement feature [#865](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/865)
Add the usage of `njCustomLabelDef`, a structural directive, as children to template the label of the selected item.
This directive provides access to the value and index of the selected item in its context.
e.g:
```html
<ng-template njCustomLabelDef let-value let-index="index"> Value: {{value}} - Index: {{index}} </ng-template>
```
or
```html
<span *njCustomLabelDef="let value;let index=index"> Value: {{value}} - Index: {{index}} </span>
```
### ❌ Removed
##### ⚠️ Breaking changes
###### [GLOBAL]
- Remove support for Angular v14, v15. Fluid now supports only Angular v16+. This change may introduce some breaking changes in your project if you're on an older version of Angular (< 16).
Please check breaking changes between your version of Angular and Angular 16.
###### [ICON]
- `isDisabled` input has been removed
###### [ICON ENGIE]
- `isDisabled` input has been removed
### 🖍 Changed
##### ⚠️ Breaking changes
###### [GLOBAL]
- Update tokens to their new nomenclature. It should not affect they way you use Fluid components.
- ⚠️ Breaking changes: If you are using Fluid tokens (for overrides on Fluid components or for custom components), please check out the `fluid-design-tokens`'s changelog. We provide a script to automatically update all tokens.
- Implement standalone component. You should now import directly the components used in your codebase.
- In your Angular modules
```ts
import { NgModule } from '@angular/core';
import { ButtonComponent } from '@engie-group/fluid-design-system-angular';
@NgModule({
imports: [ButtonComponent]
})
export class AppModule {}
```
- or directly in your components
```ts
import { Component } from '@angular/core';
import { ButtonComponent } from '@engie-group/fluid-design-system-angular';
@Component({
template: '<nj-button>Label</nj-button>',
imports: [ButtonComponent]
})
export class CustomComponent {}
```
- Remove `FluidModule` in favour of standalone components. Replace all occurrences of the `FluidModule` by the components used in your codebase.
- Change import path, import must be from`@engie-group/fluid-design-system-angular` and no longer from `@engie-group/fluid-design-system-angular/lib`
eg: before `import {FluidModule} from '@engie-group/fluid-design-system-angular/lib'` now `import {ButtonComponent} from '@engie-group/fluid-design-system-angular'`
- Remove obligation to allow JSON imports in your typescript config `tsconfig.json`. Previously you would do this:
```
In your `tsconfig.json`, in the `compilerOptions` section, add the following:
// tsconfig.json
"resolveJsonModule": true,
"esModuleInterop": true,
Your tsconfig should look like something like this:
// tsconfig.json
{
"compilerOptions": {
...
"resolveJsonModule": true,
"esModuleInterop": true,
},
}
```
If it was only used for `fluid`, you can now remove `"resolveJsonModule": true, "esModuleInterop": true` from your `tsconfig.json`
###### [ANIMATIONS]
- If you're now bootstrapping your application with `bootstrapApplication` function. Provide the animations capabilities with `provideAnimations` function instead of importing the `BrowserAnimationModule` in your main module.
```ts
import { provideAnimations } from '@angular/platform-browser/animations';
bootstrapApplication(AppComponent, {
providers: [provideAnimations()]
});
```
> See [Angular documentation](https://angular.io/guide/animations#step-1-enabling-the-animations-module)
## 📦 1.4.0 - 2023-09-29
### 🐛 Fixed
###### [GLOBAL]
- Fix issue [#864](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/864)
Buttons inside `nj-select`, `nj-multi-select` and `list-items` now correctly have the `type="button"` (default used to be `submit` and triggered ngSubmit event)
#### [SPINNER]
- Fix issue [#874](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/874)
Spinner now correctly hidden when `isLoading` is `false`
## 📦 1.3.0 - 2023-07-06
### 🚀 Added
###### [CHECKBOX]
- Add `@Input() isPresentational` to `nj-checkbox`. When the checkbox is only presentational the state is handled by a
parent, it can be useful for lists of checkboxes.
When set to `true`, the checkbox won't have any interaction.
###### [SKELETON]
- Add new `nj-skeleton-container`, `nj-skeleton-rectangle`, `nj-skeleton-circle` and `nj-skeleton-area` components
###### [FORM ITEM]
- Add `@Input() size: 'small' | 'medium' | 'large' | 'xlarge'` for `nj-form-item`. This also adds the size for all the
components depending on `nj-form-item`:
`nj-select, nj-autocomplete`
###### [LIST GROUP]
- Add `isMultiSelect` to add accessibility props to the list if need
###### [LIST ITEM]
- Add `isCheckboxContent` property to wrap project content in a checkbox
###### [MULTI SELECT]
- Add multi-select component `nj-multi-select`, with multiple options
###### [TAG]
- Add size `xs` for tags and option `shouldAutoDestruct` set by default to true. When set to `false` click on close only
emits event and doesn't destruct tag
### 🖍 Changed
###### [CHECKBOX]
- Checkbox host element `nj-checkbox` now has a `display: inline-flex`
### 🐛 Fixed
#### [AUTOCOMPLETE]
- Fix animation not working on opening closing
#### [SELECT]
- Fix issue [#825](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/825)
on `nj-select`: value disappearing when opening select, value not displaying with reactive forms and first element
being auto selected.
- Fix animation not working on opening closing
## 📦 1.2.0 - 2023-05-04
### 🚀 Added
###### [SLIDER]
- Add slider component
### 🐛 Fixed
#### [LIST ITEM]
- [A11Y] `nj-list-item` : fix markup when list item is a button or a link
###### [BADGE]
- ⚠️ Change default `nj-badge` color to `neutral` (grey)
- Add new @Input() `emphasis`:
- Bold: default
- Subtle: `nj-badge--subtle`
- Minimal: `nj-badge--minimal`
- Add new @Input() `variants`:
- Neutral: default
- Information: `nj-badge--information`,
- Danger: `nj-badge--danger`,
- Warning: `nj-badge--warning`,
- Success:`nj-badge--success`,
- Discovery: `nj-badge--discovery`
- Add new @Input() `isUppercase`
###### [TAG]
- Add new `grey` color variant (used to be the default), which is semantically different from neutral (like blue and
brand).
- Changed default to `neutral` color (still grey, no breaking change).
##### ⚠️ Breaking changes
###### [BADGE]
- `nj-badge` default color is now `neutral` (grey) instead of blue. You can use the @Input() `variant`: `information`
instead.
###### [ICON]
- `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` |