@engie-group/fluid-design-system-react/CHANGELOG.md

Fluid Design System React

# Changelog

All notable changes to Fluid Design System React 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).

## 📦 2.16.8 - 2025-07-11

### 🐛 Fixed

###### [CHECKBOX]

- Emit `onChange` event when `onKeyDown` is triggered with `Space` key.

###### [PAGINATION]

- Current item is not interactive anymore. It was not intended to be interactive.

###### [SEARCH-INPUT]

- Emit `onChange` event when the user clears the input with the clear button.

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@5.18.1

## 📦 2.16.7 - 2025-06-23

### 🐛 Fixed

###### [ICON]

- Fix icon size `2xl` not working properly

###### [SELECT]

- Update type definition of the `size` property

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@5.18.0

## 📦 2.16.6 - 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.16.5 - 2025-02-12

### 🚀 Added

###### [FOOTER]

- `links` property extends now `NJLink` properties. You can now pass more properties, like `target` which allow the opening of the link on a new tab (or window).

### 🐛 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.16.4 - 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.16.3 - 2024-11-04

### 🐛 Fixed

###### [AUTOCOMPLETE-INPUT]

- Fix `NJAutocompleteInput` to be able to handle the `value` prop after first rendering.

###### [INLINE-MESSAGE]

- `NJInlineMessage` now properly extends native html attributes

###### [PAGINATION]

- `NJPagination` now properly extends native html attributes

## 📦 2.16.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.16.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.16.0 - 2024-10-02

### ⚠️ Breaking changes

###### [PROGRESS]

- Renamed `NJLinearProgress` to `NJLinearProgressDeprecated` and create a new component `NJProgress` instead

  ```jsx
  <!--From -->
  <NJLinearProgress value={25} />

  <!--To-->
  <NJLinearProgressDeprecated value={25} />

  <!--Or with new Progress component-->
  <NJProgress value={25} />
  ```

### 🚀 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.

  ```jsx
  <NJButton isLoading />
  ```

###### [SPINNER]

- Updated background color of the spinner to use the new core color `--nj-core-color-white-300`

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-tokens@5.8.2
  - @engie-group/fluid-design-system@5.16.0

## 📦 2.15.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.15.3 - 2024-09-11

### 🐛 Fixed

###### [FOOTER]

- Footer style is now displayed correctly

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@5.15.3

## 📦 2.15.2 - 2024-09-06

### 🐛 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.15.1 - 2024-09-06

### 🛠️ Maintained

- Remove unpublished dependency
- Update URLs in README.md
- Updated dependencies
  - @engie-group/fluid-design-system@5.15.1

## 📦 2.15.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.
  CSS tokens and component styles are now bundled together.
  You do no longer need to be dependent of `@engie-group/fluid-design-tokens` package.

  ```js
  // CSS file is now accessible with /css paths
  import '@engie-group/fluid-design-system-react/css';
  ```

### 🐛 Fixed

###### [BUTTON]

- Button's `size` variant is now working properly

###### [TAG]

- Fix the display of the focus ring when `NJTag` is clickable

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@5.15.0

## 📦 2.14.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).

###### [CARD]

- Replace `title` prop by `heading` for `NJCardBody` and `NJCardCover`

### 🚀 Added

###### [GLOBAL]

- Forward native HTML attributes for the following components: `NJCard`, `NJCardBody`, `NJCardCover`, `NJBreadcrumb`,`NJSegmentedControl`, `NJSegmentedControlButton`, `NJSelectInput`, `NJTabs` and `NJTab`
  - You can now pass any native prop to those elements, e.g. `<NJCard data-test-id='my-card-custom-testing-id'>...</NJCard>`

###### [BREADCRUMB]

- Add new `maximumItemsBeforeMinification` optional prop to let the user chose the maximum number of breadcrumb items
  to be displayed before it minifies. By default, `NjBreadcrumb` displays up to 4 children, and minifies the view
  when 5 or more are provided.

###### [CARD]

- _Deprecated_ `headerText` prop. Use the NJCardBody `heading` prop instead.
- Add new NJCardBody's `headingElement` optional prop to customize the `heading` semantic element (defaults to `h4`). Example below.

```jsx
// If you want the heading of the cardbody to be a <p> element:
<NJCardBody heading="Hello world" headingElement="p" />
```

- Add new NJCardCover's `headingElement` optional prop to customize the `heading` semantic element (defaults to `h4`). Example below.

```jsx
// If you want the heading of the CardCover to be a <p> element:
<NJCardCover heading="Hello world" headingElement="p" />
```

###### [SELECT]

- Add specific styles for `readOnly` state.

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@5.14.0

## 📦 2.13.2 - 2024-07-25

### 🐛 Fixed

###### [NAVBAR]

- Fix issue [#1126](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/1126),
  navbar active bar are now updating correctly when `activeItemId` prop is updated.

### 🛠️ Maintained

- Better handling of undefined values by applying TypeScript strict mode.

## 📦 2.13.1 - 2024-07-16

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@5.13.0

## 📦 2.13.0 - 2024-07-09

### 🚀 Added

###### [CHECKBOX]

- Add a new boolean `isIndeterminate` prop to set the indeterminate state of the checkbox

### 🐛 Fixed

###### [ICON]

- Remove default `size` prop value (stay `undefined` if not set)

###### [FORM-ITEM]

- Ensure that when `NJFormItem`'s `isMultiline` prop is set to `true`, it uses the correct font (sans-serif)

###### [UTILS]

- The `highlightTextAsHtml` function now properly escapes special characters.

### 🛠️ Maintained

- Bundle `@engie-group/fluid-design-system` with our library, you no longer need to depend on it.

  - Please remove `@engie-group/fluid-design-system` from your dependencies.

- Updated dependencies
  - @engie-group/fluid-design-tokens@5.7.2
  - @engie-group/fluid-design-system@5.12.1

## 📦 2.12.0 - 2024-06-04

### ⚠️ Breaking changes

###### [ICON-BUTTON]

- We updated the `size` prop 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`)

```html
<!-- To apply those changes, search and replace the following: -->

<!-- From -->
<NJIconButton size="small" />
<!-- To -->
<NJIconButton size="2xs" />

<!-- From -->
<NJIconButton size="large" />
<!-- To -->
<NJIconButton size="sm" />
```

### 🚀 Added

###### [AUTOCOMPLETE]

- Add new `hasSuccess` prop to trigger success state when a `subscriptMessage` is provided

###### [CHECKBOX]

- Add new `subscriptMessage` prop to add some hint below the Checkbox
- Add new `hasSuccess` prop to trigger success state when a `subscriptMessage` is provided

###### [FORM-ITEM]

- Add new `hasSuccess` prop to trigger success state when a `subscriptMessage` is provided

###### [MULTI-SELECT]

- Add new `hasSuccess` prop to trigger success state when a `subscriptMessage` is provided

###### [RADIO]

- Add two new `NJRadio` sizes:
  - `lg`: 24px
  - `xl`: 32px

###### [SELECT]

- Add new `hasSuccess` prop to trigger success state when a `subscriptMessage` is provided

###### [TEXTAREA]

- Add new `hasSuccess` prop to trigger success state when a `subscriptMessage` is provided

### 🖍 Changed

###### [FOOTER]

- Update footer styles.
- Remove default links and social links

###### [RADIO]

- Update default `NJRadio` size from 20px to 16px.

### 🐛 Fixed

###### [RADIO]

- Update `NJRadioGroup` error message not displaying correctly

## 📦 2.11.0 - 2024-05-07

### 🚀 Added

###### [BADGE]

- Add a new `small` size variation with a height of `18px`, through the `size='sm'` prop.

###### [ACCORDION]

- Added a new group of components `NJAccordionXXX`:
  - `NJAccordion` is the global container to encapsulate your accordion components.
  - `NJAccordionItem` represents a single collapsible item within the NJAccordion component.
  - `NJAccordionItemHeader` represents the header section of an NJAccordionItem.
  - `NJAccordionItemContent` represents the content section of an NJAccordionItem.
  - `NJAccordionActions` is the container to add actions to your accordion.
  - `NJAccordionAction` represents a single action within the NJAccordionActions component.

```jsx
// Basic example of use
<NJAccordion>
  <NJAccordionActions>
    <NJAccordionAction label="Expand All" action="expand" />
    <NJAccordionAction label="Collapse All" action="collapse" />
  </NJAccordionActions>
  <NJAccordionItem>
    <NJAccordionItemHeader>Header</NJAccordionItemHeader>
    <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
  </NJAccordionItem>
  <NJAccordionItem>
    <NJAccordionItemHeader>Header</NJAccordionItemHeader>
    <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
  </NJAccordionItem>
  <NJAccordionItem>
    <NJAccordionItemHeader>Header</NJAccordionItemHeader>
    <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
  </NJAccordionItem>
</NJAccordion>
```

### 🖍 Changed

###### [BADGE]

- Update the medium size (`size='md'`) to `24px`. Old was `20px`.

## 📦 2.10.2 - 2024-04-18

### 🐛 Fixed

###### [STATUS INDICATOR]

- Fix issue [#1043](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/1043),
  wrong icon for information status

### 🖍 Changed

###### [INLINE MESSAGE]

- Replace `fatal_error` variant to `fatal-error`, use of `fatal_error` is now deprecated.
  Please update your codebase accordingly before deletion of `fatal_error` value.

## 📦 2.10.1 - 2024-04-12

### 🐛 Fixed

###### [GLOBAL]

- Fix border colors on `NJInlineMessage`s, `NJBadge`s and `NJTag`s color variants

## 📦 2.10.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.

```html
<!-- From -->
<NJButton size="large"></NJButton>
<!-- To -->
<NJButton size="xlarge"></NJButton>
```

###### [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` prop.

###### [INPUT SEARCH]

- Remove `clear` prop, the field always have a clear button when it's filled.

###### [SELECT]

- Close issue [#1002](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/1002),
  Rollback fix for [#848](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/848), this change, made in `2.8.0` dropped the support of React 14, which was an unwanted side effect.
  This fix will be planned for the next major release.
- `NJSelectInput` can no longer detach the dropdown from the input and will not expand it automatically on top if not enough space is available below.

### 🚀 Added

###### [INPUT SEARCH]

- export native `input` HTML attributes.

### 🖍 Changed

###### [GLOBAL]

- Close issue [#1018](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/1018), CSS class names are no longer hashed as this was causing problems
  **If you are using `nj-*` classname in your project it may lead to side effects.**

###### [INPUT SEARCH]

- Update the design of the component

###### [TOAST]

- Close issue [#1003](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/1003) Children are no longer encapsulated by a p tag if not a string.

###### [SIDEBARITEM]

- Fix redirection not working on click when item was a link.

## 📦 2.9.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).

###### [TOOLTIP]

- Refactor of the tooltip component:
  - Use of the new vanilla tooltip
  - Simplification of the component props.
  - Remove placement `auto`, tooltip will already take best position if it doesn't fit in the specified placement.

### 🚀 Added

###### [TOOLTIP]

- Export native `div` attributes in props.

###### [TAB]

- Add `badgeOptions` prop to implement a badge inside the tab item.

### 🖍 Changed

###### [BADGE]

- Add Explicit `neutral` option for `variant` prop.

###### [FORM ITEM PASSWORD]

- Changed the password icon variant from `secondary` to `tertiary` to match design changes.

###### [BUTTON]

- Close issue [#962](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/962),
  export native HTML attributes. Export a new type `TButtonProps` including `IButtonBaseProps` and the right HTML attributes depending on the context:
  `anchor` or `button` attributes

## 📦 2.8.0 - 2024-03-05

### 🚀 Added

###### [CHECKBOX]

- Add new checkbox size: `sm`

###### [LIST]

- Export native `ul` attributes in props.

###### [LIST ITEM]

- Export native `li` attributes in props.

###### [SELECT INPUT]

- Close issue [#848](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/848),
  `NJSelectInput` can now detach the dropdown from the input and expand it automatically on top if not enough space is available below.
  To choose on which element the dropdown must be attached, use the `attachDropdownTo` property:
  - Set `parent` if you don't want the dropdown to be detached from it's parent.
  - Set an HTMLElement id as string if you want to attach it to another element.
  - Set the HTMLElement node or a React ref to attach it to another element.
  - The dropdown will be attached to the body by default.

### 🖍 Changed

###### [GLOBAL]

- Update dependencies to support Node >= 20

###### [CHECKBOX]

- Update the way we handle `required` and `error` state. `isRequired` now properly displays an asterisk after the label and does not trigger the error state anymore.

#### ⚠️ Breaking changes

###### [CHECKBOX]

- Remove the `isInline` prop. You can inline elements with the `display: flexbox` CSS property on the parent.

### 🐛 Fixed

###### [AUTOCOMPLETE INPUT]

- Fix issue [#856](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/856),
  trigger render on data prop update, syncing input value. (useful for i18n)

## 📦 2.7.0 - 2024-01-31

### 🚀 Added

###### [BADGE]

- Add `iconName` props to add material icon in the badge.
- Add possibility to add a custom icon in the badge:

  ```jsx
  <NJBadge>
    <svg data-child-name="customIcon">...</svg>
    badge label
  </NJBadge>
  ```

###### [ICON]

- Add new icon size `xs`

### 🖍 Changed

###### [CARDBODY]

- Fix issue [#886](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/886),
  `NJCardBody` now accepts strings as well as JSX elements for its `title` and `paragraph` properties.

```jsx
<NJCard>
  <NJCardBody title={<MyTitleComponent />} paragraph="Lorem ..."></NJCardBody>
</NJCard>
```

### 🐛 Fixed

###### [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.

## 📦 2.6.1 - 2024-01-04

### 🐛 Fixed

###### [BUTTON]

- Fix issue [#943](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/943),
  `NJButton` type is now `button` by default when a href is not provided.

###### [ICON BUTTON]

- `NJIconButton` type is now `button` by default when a href is not provided.

###### [TOOLTIP]

- `NJTooltip` tooltip no longer displays itself without being triggered during rerender.

## 📦 2.6.0 - 2023-12-15

### 🚀 Added

###### [BADGE]

- Add new `planet` semantic color variant

###### [ICON]

- Add `inherit` color variant to inherit color from context

###### [INLINE MESSAGE]

- Add new `planet` and `discovery` semantic colors variants

###### [SIDEPANEL]

- Add new `NJSidepanel` component
- Add new `NJSidepanelHeader` component to display a title, a close button, and some action buttons in the sidepanel.
- Add new `NJSidepanelLayout` component to attach a sidepanel aside of a content

###### [MODAL]

- Export `IModalInformationProps` from `NJModalInformation`

###### [STATUS INDICATOR]

- Add new `planet` and `discovery` semantic colors variants

### 🖍 Changed

###### [BREADCRUMB]

- Change the number of displayed elements in minified mode (from 3 to 2 elements)

### 🐛 Fixed

###### [FORM ITEM]

- Change `onChange` prop type to `React.ChangeEventHandler<HTMLElement>`

###### [INPUT SEARCH]

- Remove `console.log` on key pressed

###### [LIST]

- Change `onKeydown` prop type to `React.KeyboardEventHandler<HTMLUListElement | HTMLDivElement>`

###### [RADIO]

- Change `onChange` prop type to `React.ChangeEventHandler<HTMLInputElement>`

###### [SEGMENTED CONTROL BUTTON]

- Fix icon not resizing when changing size property

###### [SLIDER]

- Fix tooltip not working when no tooltip has been loaded before

##### ⚠️ Breaking changes

###### [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.5.3 - 2023-10-27

### 🖍 Changed

###### [GLOBAL]

- Update fluid dependencies

## 📦 2.5.2 - 2023-10-23

### 🖍 Changed

###### [GLOBAL]

- Update fluid dependencies

## 📦 2.5.1 - 2023-10-23

### 🖍 Changed

###### [GLOBAL]

- Update fluid dependencies

## 📦 2.5.0 - 2023-10-20

### 🚀 Added

###### [LIST ITEM]

- Add new `isCLickable` prop that adds the `nj-list-group__item--clickable` modifier (used in custom select, autocomplete, multi select)

### 🖍 Changed

###### [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.

## 📦 2.4.0 - 2023-09-06

### 🚀 Added

###### [ICON]

- Add new value for the `size` prop: `inherit`

###### [INLINE MESSAGE]

- Fix issue [#885](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/885),
  accept now only one child in addition of a child array.

###### [MODAL]

- Add new `shouldFitViewport` prop. Modal is fixed to the viewport area when set to `true`. Default to `true`.
- Add new `appendTo` prop. This represents the selector of the component to which the modal should be attached.
  `appendTo` uses `element.querySelector`(see. [Doc](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)) under the hood, hence it supports any `querySelector`
  e.g: `appendTo="body"` or `appendTo="#element_id"`

###### [TOOLTIP]

- Add new `hasArrow` prop. Hides the arrow on the tooltip when set to `true`.

### 🖍 Changed

##### ⚠️ Breaking changes

###### [MODAL]

- Fix issue [#872](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/872),
  `NJModal` no longer closes itself, the opening state is entirely managed by the `isOpen` props.
  The `onClose` callback is called for all close events with the closing cause as parameter :
  - `keyboard` if a closing keyboard touch is pressed (escape key for now).
  - `button` if the cross button is clicked.
  - `backdrop` if the backdrop is clicked.
    Make sure to handle modal closing in `onClose` callback.

### 🐛 Fixed

###### [GLOBAL]

- Fix issue [#861](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/861),
  you can now correctly pass additional `className` props in `NJSelectInput`, `NJMultiSelect`, `NJAutocompleteInput`

###### [LIST]

- Fix issue [#864](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/864)
  When `NJListItem` is a button, it now has the `type="button"` (default used to be `submit`)

###### [MULTISELECT]

- Fix issue [#866](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/866),
  we can now change `NJMultiSelect` value outside component via value props.

###### [TOOLTIP]

- Fix issue [#829](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/829),
  you can now update the Tooltip text by changing the `text` prop.

## 📦 2.3.1 - 2023-07-07

###### [GLOBAL]

### 🐛 Fixed

- Fix issue [#857](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/857),
  build fails when using vite with `@fluid-design-system/react` package

## 📦 2.3.0 - 2023-07-06

### 🚀 Added

###### [CHECKBOX]

- Add prop `isPresentational` to `NJCheckbox`. 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.

###### [FORM ITEM]

- Add `@Input() size: 'small' | 'medium' | 'large' | 'xlarge'` for `NJFormItem`. This also adds the size for all the
  components depending on `NJFormItem`:
  `NJSelectInput, NJAutocompleteInput`

###### [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 `NJMulti-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

###### [SKELETON]

- Add new `NJSkeletonContainer`, `NJSkeletonRectangle`, `NJSkeletonCircle` and `NJSkeletonArea` components

###### [ICON]

- Add new color variant: `tertiary` (grey-500)

### 🐛 Fixed

###### [GLOBAL]

- Fix issue [#847](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/847),
  you can now pass custom classNames to NJFormItem components and related (NJSelectInput, NJAutocompleteInput,
  NJMultiSelect)

- Fix issue [#832](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/832),
  correctly export NJSidebar components

## 📦 2.2.0 - 2023-05-04

### 🚀 Added

###### [GLOBAL]

- Add new types:
  - `TEmphasisVariants` ('bold' | 'subtle' | 'minimal')
  - `TSemanticVariants` ('danger' | 'warning' | 'success' | 'information' | 'discovery')
  - `TNeutralExtendedSemanticVariants` (TSemanticVariants | 'neutral')
  - `TBrandExtendedColorVariants` (TColorVariants | 'brand')
  - `TTypeVariants` ('primary' | 'secondary' | 'destructive' | 'inverse')

### 🐛 Fixed

###### [SEGMENTED CONTROL]

- Fix
  issue [#807](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/807), `NJSegmentedControl`
  onChange and onClick not being triggered

### 🖍 Changed

#### [LIST ITEM]

- [A11Y] `nj-list-item` : fix markup when list item is a button or a link

##### ⚠️ Breaking changes

###### [GLOBAL]

- Rename typescript type `TVariants` to `TDeprecatedVariants`
- Rename typescript type `TComponentsVariants` to `TColorVariants`

###### [BADGE]

- Add new `variant` prop `neutral` | `information` | `discovery` | `danger` | `warning` | `success`
- Add new `emphasis` prop: `bold` | `subtle` | `minimal`
- Add new `isUppercase` prop to force content to be uppercase

###### [SIDEBAR]

- Add new components:
  - `NJSidebar`: wrapper you can fill with the other Sidebar components. It can be folded with the `isFolded` prop.
  - `NJSidebarContent`: wrapper for the content outside the sidebar. You can decide if the sidebar must be displayed
    above it when opened or if it should push the content with the `isAboveContent` prop.
  - `NJSidebarBrand`: sidebar element that houses the logo
  - `NJSidebarMenu`: wrapper for the navigation elements
  - `NJSidebarItem`: navigation elements
  - `NJSidebarDivider`: divider that can be used to separate navigation element within a NJSidebarMenu
  - `NJSidebarClose`: element used to collapse / expand the sidebar

## 📦 2.1.1 - 2023-04-07

### 🐛 Fixed

###### [TOAST]

- Fix
  issue [#803](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/803), `NJToastService`
  not being bundled
- Fix react dev error setting `false` as id

## 📦 2.1.0 - 2023-04-04

### 🚀 Added

###### [ICON BUTTON]

- Add variants tertiary and brand

### 🖍 Changed

##### ⚠️ Breaking changes

###### [ICON BUTTON]

- Change default value from (blue icon) to primary (black icon)
- Primary takes now the color of old secondary, and current variant secondary use `var(--nj-color-icon-secondary)`
- All components using icon buttons have been updated to use correct variant

###### [FORM ITEM & FORMS]

- Rename `helpText` prop to `subscriptMessage` to be more concise. Message is placed under input if set and is displayed
  in red alongside an icon when `hasError` is set to `true`

### 🐛 Fixed

###### [GLOBAL]

- Fix issue [#793](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/793),
  add back common js since jest doesn't fully support ESModules yet

###### [Form Item]

- Fix issue [#782](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/782),
  do not display warning icon on helpText when form is not in error state
- Fix issue [#779](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/779),
  move hasError prop to `ICommonFormItemProps`

## 📦 2.0.1 - 2023-03-09

### 🚀 Added

###### [Select]

- Add prop `shouldCloseOnSelect`, and explain

### 🐛 Fixed

###### [Toggle]

- Set `children` prop optional

## 📦 2.0.0 - 2023-03-02

### 🚀 Added

###### [GLOBAL]

- Add tree shaking to bundled package and reduce components file sizes
- Add `ForwardRef` to every non-deprecated component
- Add `className` prop for optional additional classNames on every component
- Add support for React 18
- Make components accessible

###### [AUTOCOMPLETE INPUT]

- Add component `NJAutocompleteInput`

###### [AVATAR]

- Add propos `target` and `rel` props to `NJAvatar`
- Add `isRemainingCount`, `onClick`, `onMouseEnter` and `onMouseLeave` properties to `Avatar` component
- Add `NJAvatar` new `xl` size variants
- [A11Y] Add accessible label to `NJAvatar`
- [A11Y] Add optional `notificationUnitLabel` prop to `NJAvatar`

###### [AVATAR GROUP]

- Add new `NJAvatarGroup` component

###### [BADGE]

- [A11Y] Add optional `unitLabel` prop to `NJBadge`

###### [BUTTON]

- Add button size xsmall
- Add possibility to pass custom label and icon to `NJButton`
- Add new variants to `NJButton`
  - Buttons have now 4 variants: `primary` (default), `secondary`, `destructive` (previously danger) and `inverse`. For
    each variant it is possible to have 3 alternate buttons `bold` (default), `subtle` (previously outline)
    and `minimal` (previously ghost)
- Add prop `iconClassName` to `NJButton` to pass additional custom classes to child `NJIcon`

###### [BREADCRUMB]

- Add "navigation" role to breadcrumb element
- Add text alternative to the "show more" button
- Add text alternative to "icon only" breadcrumb items
- When user clicks the "show more" button, focus the first revealed item
- [A11Y] Add `ariaLabel` prop to `NJBreadcrumb`
- [A11Y] Add `showMoreLabel` prop to `NJBreadcrumb`

###### [BREADCRUMB ITEM]

- [A11Y] Add `label` prop to `NJBreadcrumbItem`

###### [CHECKBOX]

- Add new prop `isAnimated` to `NJCheckbox` to toggle animation on and off
- [A11Y] Add `hasError` and `errorMessage` props to `NJCheckbox`

###### [ICON BUTTON]

- Add new component `NJIconButton`

###### [ICON]

- [A11Y] Add `ariaLabel` prop to `NJIcon`

###### [ICON ENGIE]

- Add `nuclear` icon to the NJIconEngie list
- [A11Y] Add `ariaLabel` prop to `NJIconEngie`

###### [INLINE MESSAGE]

- Add new component `NJInlineMessage`

###### [LINEAR PROGRESS]

- New`valueMin` and `valueMax` props are now used to properly calculate the percentage to display when `hasDescription`
  is true
- New `decimalPrecision` prop (number of digits after the coma shown)
- New `hasTransition` prop (whether an transition is played on width changed)

###### [LINK]

- Add new `isExternal` prop to NJLink
- Add `NJlink` variant `contextual`
- Add variant `inverse` and `high_contrast` to `NJLink`
- [A11Y] Add `externalLabel` prop to `NJLink`

###### [LIST]

- [A11Y] Add optional `listId` prop to `NJList`

###### [LIST ITEM]

- `NJListitem`: add new props
  - `hasRightBorder` to trigger the right border on hover and active states
  - `rightContent` to display an element on the right side
  - `icon` to display a material icon on the left side
- [A11Y] Add optional `listItemId` prop to `NJListItem`

###### [MODAL]

- [A11Y] Add `closeLabel` prop to `NJModal`
- [A11Y] Add `role` prop to `NJModal`

###### [RADIO GROUP]

- [A11Y] Add `legend`, `hasError` and `errorMessage` props to `NJRadioGroup`

###### [SPINNER]

- Add new size `xxs` for `NJSpinner`
- [A11Y] Add an optional `isBlock` prop to `NJSpinner`
- [A11Y] `NJSpinner`: add `isLoading`

###### [STATUS INDICATOR]

- Add new `NJStatusIndicator` component
- [A11Y] Add optional `hideLabel` prop to `NJStatusIndicator`

###### [TABS]

- Add props `density` to `nj-tabs`

###### [TAG]

- Add possibility to pass icon to tag via prop `iconName`
- Add different sizes `sm, md(default), lg`

###### [TOAST]

- Add new Toast component
- Add new ToastContainer component
- Add new ToastService() service

###### [TOGGLE]

- Add component new size props:
  - `md` (default),
  - `lg`

###### [TOOLTIP]

- Add prop `variant` to `NJTooltip`. `variant` can be `default` or `inverse`
- Add prop `isColorInherited` to `NJToggle` to make toggle label color inherit from parent, fixes
  issue [#688](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/688)

### 🖍 Changed

###### [GLOBAL]

- Update all components with new brand guidelines and latest UI design
- Disabled elements now use opacity instead of specific disabled colors

###### [MODAL]

- Update `NJModal` with new color tokens and to use `NJIconButton`
- [A11Y] Fix `NJModal` keyboard navigation. Cycle the focus in the modal and focus the trigger element if any when the
  modal is closed.

###### [SEARCH]

- Update search component with new input design and add clear value on clear icon enter keypress

###### [TAG]

- All tags are now filled, remove prop `filled`
- Variants have been replaced with new colors, here are the new tokens:

      ```
        grey (default),
        brand,
        teal,
        pink,
        orange,
        red,
        blue
        green,
        ultramarine,
        yellow,
        purple,
        lime
      ```

- Remove margin on tags

###### [TOGGLE]

- Toggle component structure : label now uses a flex layout instead of margins
- [A11Y] Link label to input and add `switch` role to `NJToggle`

##### ⚠️ 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`

### 🐛 Fixed

###### [BREADCRUMB]

- [A11Y] Fix `NJBreadcrumb` and `NJBreadcrumbItem` accessibility issues
  - Add "navigation" role to breadcrumb element
  - Add text alternative to the "show more" button
  - Add text alternative to "icon only" breadcrumb items
  - When user clicks the "show more" button, focus the first revealed item

###### [BUTTON]

- [A11Y] Fix `nj-button` accessibility issues
  - Add `aria-hidden` attribute to the icon

###### [CARD COVER]

- Fix issue on cards
  cover [#735](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/735)

###### [FAB]

- Fix undefined error on dispose of Fab

###### [FOOTER]

- [A11Y] Fix semantic in `NJFooter` with `contentinfo` role for wrapper element, `p` tag for slogan and `h2` tag for
  headings

###### [LINK]

- [A11Y] Fix `NJLink` accessibility issues
  - Hide the icon from assistive technologies
  - Add a hidden text alternative to external link
- [A11Y] Add space before external notice in `NJLink`

###### [LIST ITEM]

- [A11Y] Add `aria-current="true"` on `NJListItem` if it renders a link and `isActive` is `true`.

###### [MODAL]

- [A11Y] Fix `NJModal` accessibility issues
  - Link the `aria-labelledby` attribute to the modal title
  - Replace title `<h4>` element with `<h1>`
- [A11Y] Fix `NJModal` keyboard navigation. Cycle the focus in the modal and focus the trigger element if any when the
  modal is closed.

###### [ICON]

- [A11Y] Always set `aria-hidden` to `NJIcon`

###### [PAGINATION]

- [A11Y] Make ellipsis icon accessible in `NJPagination`
- [A11Y] Fix semantic of `NJPagination` with `navigation` role on wrapper and `aria-current` on active item

###### [RADIO]

- [A11Y] Link label and input with `for` and `id` attributes on `NJRadio`

###### [RADIO GROUP]

- [A11Y] Update markup structure of `NJRadioGroup` with `fieldset`, `legend` and `span` for error message if needed

###### [SPINNER]

- [A11Y] Add `aria-live` and `aria-atomic` to `NJSpinner` wrapper element and update semantic of inner element

###### [TAG]

- [A11Y] Fix `NJTag` semantic structure

### 👎 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`

### ❌ 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

## 📦 2.0.0 FOR THOSE MOVING FROM RC2 - 2023-03-02

### 🚀 Added

- Add tree shaking to bundled package and improve components sizes
- [A11Y] Add an optional `isBlock` prop to `NJSpinner`
- [A11Y] `NJFormItem` Warning icon is now added on subscript labels for forms in error state
- Add an optional `labelClassName` prop to `NJFormItem`

### 🐛 Fixed

- [A11Y] Always set `aria-hidden` to `NJIcon` and only show password notice when needed in `NJFormItem`
- [A11Y] Make ellipsis icon accessible in `NJPagination`
- [A11Y] Add space before external notice in `NJLink`
- Fire `onBlur()` and `onClick()` events in `NJSelectInput`, fixes
  issue [#739](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/739)
- Display option's label instead of value inside input in `NJSelectInput`

### 🖍 Changed

- Remove focus ring on all elements on click since accessibility guidelines requires it only on keyboard navigation
- Disabled elements now use opacity instead of specific disabled colors
- Apply new transparent tokens for components needing transparency
  E.g: icon-button, button etc..
- Remove css utils usage from `NJNavbar`
- Remove css utils usage from `NJFooter`
- Always display all options when not filtering field in `NJAutocompleteInput`

##### ⚠️ Breaking changes

- 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.
- `NJCard` image should now be passed as prop and not in children and you don't have to specify class `nj-card__img` on
  image
- `NJIconEngie`:
  - Add new values for the `variant` prop: `default` (ultramarine-900) | `brand` (brand-600) | `inverse` (grey-0)
  - Remove old variant prop values: `gradient` | `blue-corporate` (use 'brand') | `white` (use 'inverse')
- `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
```

### 🐛 Fixed

- Fix issue on cards
  cover [#735](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/735)
- [A11Y] Remove unnecessary `aria-required` attribute on `NJFormItem`
- [A11Y] Improve accessibility of `NJAutocompleteInput`

### ❌ Removed

##### ⚠️ Breaking changes

- Remove types `TColors` and `TColorsPalette`

## 📦 2.0.0-rc.2 - 2022-12-08

### 🚀 Added

- Add component `NJAutocompleteInput`
- Add prop `isColorInherited` to `NJToggle` to make toggle label color inherit from parent, fixes
  issue [#688](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/688)
- Add `inputRef` prop to `NJFormItem`
- `NJListitem`: add new props
  - `hasRightBorder` to trigger the right border on hover and active states
  - `rightContent` to display an element on the right side
  - `icon` to display a material icon on the left side
- Add `iconClassName` on `NJFormItem`
- [A11Y] Add `ariaLabel` prop to `NJIcon`
- [A11Y] Add `ariaLabel` prop to `NJIconEngie`
- [A11Y] Add `ariaLabel` prop to `NJBreadcrumb`
- [A11Y] Add `showMoreLabel` prop to `NJBreadcrumb`
- [A11Y] Add `label` prop to `NJBreadcrumbItem`
- [A11Y] Add `hasError` and `errorMessage` props to `NJCheckbox`
- [A11Y] Add `externalLabel` prop to `NJLink`
- [A11Y] Add `closeLabel` prop to `NJModal`
- [A11Y] Add `role` prop to `NJModal`
- [A11Y] Add `passwordButtonLabelShow`, `passwordButtonLabelHide`, `passwordNoticeIsVisible`
  and `passwordNoticeIsHidden` props to `NJFormItem`
- [A11Y] Add `ariaPressed` prop to `NJIconButton`
- [A11Y] Add `legend`, `hasError` and `errorMessage` props to `NJRadioGroup`
- [A11Y] Add optional `notificationUnitLabel` prop to `NJAvatar`
- [A11Y] Add optional `unitLabel` prop to `NJBadge`
- [A11Y] Add optional `hideLabel` prop to `NJStatusIndicator`
- [A11Y] Add required `showMoreLabel` prop to `NJAvatarList`
- [A11Y] Add optional `ariaDescribedby` prop to `NJIconButton`

##### ⚠️ Breaking changes

- [A11Y] ⚠️Breaking changes `NJLinearProgress`: add `label` required prop
- [A11Y] ⚠️Breaking changes `NJSegmentedControl`: add `label` required prop
- [A11Y] ⚠️ Breaking change: add `label` required prop to `NJToggle`
- [A11Y] ⚠️ Breaking change: add required `label` prop to `NJAvatar`
- [A11Y] ⚠️Breaking changes: add required `label` prop to `NJTabs`
- [A11Y] Add optional `listId` prop to `