@engie-group/fluid-design-system-react
Version:
Fluid Design System React
1,553 lines (1,010 loc) • 116 kB
Markdown
# Changelog
## 📦 6.0.0 - 2025-12-10
Major release of `Fluid 6`.
All changes since `2.16.9` can be found above in details and are summarized in [the migration guide](https://fluid.design.digital.engie.com/fluid-design-system/storybook/react/index.html?path=/docs/docs-migrations-v2-to-v6--documentation).
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-types@6.0.0
- @engie-group/fluid-design-tokens@6.0.0
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).
## 📦 6.0.0-rc.0 - 2025-12-09
### ⚠️ Breaking changes
###### [GLOBAL]
- Migrate library from React 18 to React 19
- Project with version of React inferior to 19 are no longer supported.
###### [FORM-ITEM]
- Renamed `isClearable` prop to `clearable` for consistency across the design
###### [RADIO]
- Remove `isDisabled` prop. Now you can use the native HTML `disabled` attribute directly on the `NJRadio` component.
- Remove `isChecked` prop. Now you can use the native HTML `checked` attribute directly on the `NJRadio` component.
- Remove `ariaLabel` prop. Now you can use the native HTML `aria-label` attribute directly on the `NJRadio` component.
- Remove `ariaLabelledBy` prop. Now you can use the native HTML `aria-labelledby` attribute directly on the `NJRadio` component.
- Remove `isRequired` prop. Now you can use the native HTML `required` attribute directly on the `NJRadio` component.
###### [RADIO-GROUP]
- Removed `isDisabled` prop. Now you can use the native HTML `disabled` attribute directly on the `NJRadioGroup` component.
- Removed `hasError` prop. Now you can use the native HTML `aria-invalid` attribute directly on the `NJRadioGroup` component.
###### [SEGMENTED-CONTROL]
- Rework `NJSegmentedControl`:
- Switch to controlled/uncontrolled mode using `value`/`initialValue` and `onChange` event.
- Rename `size` prop to `scale`.
- Remove `label` prop, use `aria-label` instead.
- Rework `NJSegmentedControlButton`:
- Remove `label` prop, use children instead.
- Remove `isDisabled` prop in favor of native button `disabled` prop.
- Change `onClick` event in favor of native button `onClick` event.
- Remove `iconClass` prop, if you need to override the icon, use `icon` props instead.
```tsx
// Before
<NJSegmentedControl value={value} size="md" label="Choose an option">
<NJSegmentedControlButton value="option1" label="Option 1" />
<NJSegmentedControlButton value="option2" label="Option 2" />
<NJSegmentedControlButton value="option3" iconName="bolt" iconClass="custom-class" label="Option 3" />
</NJSegmentedControl>
// After
<NJSegmentedControl initialValue={value} scale="md" aria-label="Choose an option">
<NJSegmentedControlButton value="option1" >Option 1</NJSegmentedControlButton>
<NJSegmentedControlButton value="option2" >Option 2</NJSegmentedControlButton>
<NJSegmentedControlButton value="option3" icon={<NJIcon name="bolt" className="custom-class" />}>Option 3</NJSegmentedControlButton>
</NJSegmentedControl>
```
###### [SLIDER]
- Remove `isDisabled` prop. Now you can use the native HTML `disabled` attribute directly on the `NJSlider` component.
###### [TAB-PANEL]
- Remove `ariaLabelledBy` prop. Now you can use the native HTML `aria-labelledby` attribute directly on the `NJTabPanel` component.
- Rename `isActive` prop to `active` for consistency with other components.
### 🚀 Added
###### [AVATAR-LIST]
- Add native HTML div element attributes support
###### [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
###### [CHECKBOX]
- Add native HTML input element attributes support
###### [FAB-MENU]
- Add native HTML div element attributes support
###### [FOOTER]
- Add native HTML footer element attributes support
###### [MENU-ITEM]
- Add native HTML button element attributes support.
- HTML attributes can now be passed directly to the button element when `asChild` is false
- When `asChild` is true, only component-specific props are available and HTML attributes should be passed to the child element
###### [RADIO]
- Add native HTML input attributes support for `NJRadio` and native HTML fieldset attributes support for `NJRadioGroup`.
- Pass a ref for label element. This allows to access the label element directly if needed.
- Pass a ref for root (div) element. This allows to access the root element directly if needed.
###### [SEGMENTED-CONTROL]
- Add `icon` prop to `NJSegmentedControlButton` to allow passing a custom icon element.
- Add `asChild` prop to `NJSegmentedControlButton` to render a custom component instead of a button.
```tsx
<NJSegmentedControl initialValue={value} scale="md" aria-label="Choose an option">
<NJSegmentedControlButton value="option1" asChild>
<a href="#option1">Option 1</a>
</NJSegmentedControlButton>
<NJSegmentedControlButton value="option2" asChild>
<button>Option 2</button>
</NJSegmentedControlButton>
</NJSegmentedControl>
```
###### [SLIDER]
- Add native HTML input attributes support.
- Pass a ref for label element. This allows to access the label element directly if needed.
- Pass a ref for root (div) element. This allows to access the root element directly if needed.
###### [TAB-PANEL]
- Add native HTML div attributes support
###### [TAG]
- Transform `NJTag` root element from a `div` to a `span`. This change improves semantic correctness and allows for better inline behavior of the `NJTag` component.
- Updated `NJTagProps` type to extend `React.HTMLAttributes<HTMLSpanElement>` instead of `React.HTMLAttributes<HTMLDivElement>`. This change ensures that the props passed to `NJTag` are appropriate for a `span` element.
###### [TOAST]
- Add native HTML div attributes support for `NJToastContainer` and `NJToast` components.
- Pass a ref for close button element. This allows to access the close button element directly if needed.
###### [TOGGLE]
- Add `handleIcon` prop 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
###### [GLOBAL]
- Improve some component type which was returning `any` type due to incorrect import in source files (Breadcrumb item, Card cover, Fab & Tab).
###### [AUTOCOMPLETE]
- Passed down some props to `NJFormItem` component. It fixes some issues with the display of error and success states, static labels, and subscript messages.
- labelKind
- hasError
- hasSuccess
- subscriptMessage
###### [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 icons are now vertically centered
###### [ICON]
- Icon component with inherit color variant now correctly inherits color from parent elements.
###### [PAGINATION]
- Fixed item font family to `Lato` font.
###### [SIDEBAR]
- Fix a bug that prevent the sidebar to correctly display leading icons of its items when collapsed.
###### [TABS]
- Renamed and transform `ITabsProps` **interface** to `NJTabsProps` **type** for consistency with other components.
- Renamed `TabProps` type to `NJTabProps` type for consistency with other components.
###### [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-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]
- Complete removal of deprecated components and props
This major release removes all deprecated components and props that were marked for removal.
## Removed Deprecated Components
The following deprecated components have been completely removed:
- **Alert Components**: `NJAlert`
- **Icon Components**: `NJIconEngie`, `NJIconBase`
- **Input Components**: `NJInput`
- **Layout Components**:
- `NJListDeprecated`, `NJListItemDeprecated`
- `NJSidebarDeprecated`, `NJSidebarBrandDeprecated`, `NJSidebarCloseDeprecated`, `NJSidebarContentDeprecated`, `NJSidebarDividerDeprecated`, `NJSidebarItemDeprecated`, `NJSidebarMenuDeprecated`
- **Modal Components**: `NJDeprecatedModal`, `NJDeprecatedModalBase`, `NJDeprecatedModalInformation`
- **Form Components**:
- `NJSwitch`
- `NJTextarea`
- **Progress Components**: `NJLinearProgressDeprecated`
## Removed Deprecated Props
The following deprecated props have been removed from stable components:
- **NJAutocomplete**: Udpated to use HTML `onChange` instead of `onOptionSelect`
- **NJAvatarRoot**: Updated to use `scale` instead of `size`
- **NJAvatarList**: Updated to use `scale` instead of `size`
- **NJBadge**: Updated to use `scale` instead of `size`
- **NJBreadcrumbItem**: Updated to use HTML `aria-current` instead of `isActive`
- **NJButton**: Updated to use `scale` instead of `size`
- **NJCard**: `headerText` : Use the `headline` prop on the `NJCardBody`component instead
- **NJCheckbox**: `errorMessage` : Use `subscriptMessage` with `hasError={true}`
- **NJIcon**:
- Updated to use `scale` instead of `size`
- Updated to use HTML `aria-label` instead of`ariaLabel`
- **NJSpinner**: Updated to use `scale` instead of `size`
- **NJStatusIndicator**: Updated to use `scale` instead of `size`
- **NJTab**:
- Updated to use HTML `aria-selected` instead of `isActive`
- Updated to use HTML `disabled` instead of `isDisabled`
- Updated to use HTML `aria-controls` instead of `ariaControls`
- **NJTabs**: Updated to use HTML `aria-selected` instead of `isActive`
- **NJTag**: `hasClose` : If `onClose` prop is set, tag will have a close icon
- **NJToggle**:
- `isChecked`
- Updated to use `scale` instead of `size`
- Updated to use HTML `aria-label` instead of `ariaLabel`
- Updated to use HTML `aria-labelledby` instead of `ariaLabelledBy`
- Updated to use HTML `disabled` instead of`isDisabled`
## Migration
- Review deprecation warnings in your current version before upgrading
- Replace deprecated components with their modern equivalents
- Update prop names according to the latest documentation
- Test thoroughly as this is a breaking change that may affect existing implementations
###### [AVATAR]
- Remove `nj-avatar` background for picture avatars.
###### [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 link properties to `NJButton` component. If you want to render `NJButton` component as a link, use `asChild` property and pass a HTML `a` element.
If `NJButton` component doesn't have a `asChild` props, it is always render as a button.
```tsx
// Before
<NJButton href="#" label="Button link" />
// After
<NJButton asChild>
<a href="#">Button link</a>
</NJButton>
```
###### [PAGINATION]
- Added `NJPagination.Item` component to encapsulate individual pagination items.
- Added `NJPagination.Arrow` component to encapsulate pagination arrow controls.
- Added namespace `NJPagination` to all exports from the package. This change improves code organization and clarity by grouping all pagination-related components and utilities under a single namespace.
###### [TAG]
- Rename `size` property to `scale`
- `NJTag` would no longer accept interactive props (onClick and href), you must use the `actionAsChild` pattern to render it as a button or link, enhancing accessibility and user experience.
```tsx
// before
<NJTag href="http://www.engie.fr>Clickable Tag</NJTag>
// now
<NJTag actionAsChild>
<a href="http://www.engie.fr">Clickable Tag</a>
</NJTag>
```
### 🐛 Fixed
###### [FORM-COMPONENTS]
- Fixed an issue where standard React events (onBlur, onFocus, onClick, etc.) were not properly propagated to internal DOM elements in form components. This affected:
- NJAutocomplete
- NJSelect
- NJMultiSelect
These components now correctly forward all standard React event handlers to their underlying input and button elements, allowing developers to attach application logic to native events as expected.
###### [FORM-ITEM]
- Fix `NJFormItem` components to correctly handle floating label behavior when the `id` prop is not set. Previously, the floating label would not behave as expected when the id was empty, leading to inconsistent UI behavior.
### 🚀 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.
###### [AUTOCOMPLETE]
- Add clear button to NJAutocomplete component with `clearable` prop
- Add `onClear` prop to handle clear button click event
###### [AVATAR]
- Add `asChild` prop to NJAvatar component to render it as a different HTML element or custom component while preserving its styles and behaviors.
###### [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.
###### [BREADCRUMB-ITEM]
- Add `asChild` prop to NJBreadcrumbItem component to render it as a different HTML element or custom component while preserving its styles and behaviors.
###### [BUTTON]
- Add `asChild` prop to NJButton to allow rendering as a different component while preserving styles and behavior.
###### [CARD-COVER]
- Add `asChild` prop to NJCardCover component to render it as a different HTML element or custom component while preserving its styles and behaviors.
###### [FAB]
- Add `asChild` prop to NJFab component to render it as a different HTML element or custom component while preserving its styles and behaviors.
###### [LINK]
- Add `asChild` prop to NJLink component to render it as a different HTML element or custom component while preserving its styles and behaviors.
###### [NAVBAR]
- The `NJNavbar` and `NJNavbarItem` components are deleted. Please refer to the new `NJHeader` component for an alternative.
###### [PAGINATION]
- Added `renderPageAs` prop to allow custom rendering of page elements.
```tsx
<NJPagination.Root
count={8}
renderPageAs={({ index, current, onClick, 'aria-label': ariaLabel }) => (
<NJPagination.Item index={index} current={current} asChild>
<button aria-label={ariaLabel} onClick={onClick}>
{index}
</button>
</NJPagination.Item>
)}
/>
```
This prop provides greater flexibility in how pagination items are displayed, enabling developers to customize the appearance and behavior of each page link according to their application's needs.
- Added `renderArrowAs` prop to allow custom rendering of arrow elements.
```tsx
<NJPagination.Root
count={8}
renderArrowAs={({ arrowType, onClick, disabled }) => (
<NJPagination.Arrow arrowType={arrowType} disabled={disabled} asChild>
<button onClick={onClick} />
</NJPagination.Arrow>
)}
/>
```
This prop allows developers to define how the navigation arrows are rendered, providing the ability to tailor the user interface to better fit the design requirements of their applications.
###### [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`
###### [TAB]
- Add `asChild` prop to NJTab component to render it as a different HTML element or custom component while preserving its styles and behaviors.
###### [TAG]
- Add `actionAsChild` prop to `NJTag` component to allow rendering as a different HTML element or custom component while preserving styles and behavior.
- 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
### ⚠️ Breaking changes
###### [ICON-BUTTON, CHAT-INPUT-BUTTON]
- The icon button has been entirely revamped to handle the asChild pattern. You can now pass any component and it will behave like an icon button.
- Notable changes are:
- HTML attributes can now be passed to the `NJIconButton` directly. They will be applied to the parent button element.
- If the `asChild` property is truthy, HTML attributes must be applied directly to the child.
- The required `label` property as been entirely removed in favor of the optional native `aria-label` property.
- Custom icon are no longer passed as child, but through the `customIcon` property. It is no longer needed to add `[data-child-name]="customIcon"` attribute.
- The most important changes concern the icon button currently used as a link. It must now pass the link element as a child.
- All `aria-*` properties can now be passed directly. You can no longer pass aliases: `ariaDescribedby` -> `aria-describedby`
- Icon ref are now forwarded through the `iconRef` property;
```tsx
// Before
<NJIconButton label="Accessible button" icon="settings"/>
<NJIconButton label="Accessible button">
<svg data-child-name="customIcon">...</svg> //For custom icon
</NJIconButton>
<NJIconButton label="Accessible button" href="/link" icon="settings"/>
// Now
<NJIconButton icon="settings" aria-label="Accessible button"/>
<NJIconButton customIcon={ <svg>...</svg> } aria-label="Accessible button"/>
<NJIconButton icon="settings" asChild>
<a href="/link" aria-label="Accessible button"></a>
</NJIconButton>
```
###### [SEARCH-INPUT]
- Remove deprecated `onSearchChange` handler please use `onChange` instead.
- Remove `label` property.
- Remove `resetButtonTitle` property. If you need to change reset button aria-label (or any other attribute), use forwarded `resetButtonRef`.
- Passed HTML attributes are now applied to the `div` root element. To pass attributes to input, manipulate input with the forwarded `ref`.
- When `buttonOption` property is set, displayed button ref are forwarded through `buttonRef` property.
### 🐛 Fixed
###### [MENU-ITEM, SELECT-ITEM, SIDEBAR-ITEM]
- Menu item are now displaying icon when `leadingIcon` props is set.
###### [BADGE]
- Default `emphasis` for AI `variant` is now correctly applied.
###### [MENU-GROUP]
- Correct line-height of header element is now applied.
### 🚀 Added
###### [DIVIDER]
- Implement `NJDivider` component.
###### [HEADER]
- Implement `NJHeader` component.
###### [MENU]
- `NJMenuAnchor` now apply `[aria-expanded]=true` to the anchor when menu is open.
###### [HEADER-DRAWER]
- Implement `NJHeaderDrawer` component.
###### [NAVIGATION-ACTION]
- Implement `NJNavigationAction` component. Used in the `NJHeader`.
###### [NAVIGATION-TAB]
- Implement `NJNavigationTab` component. Used in the `NJHeader`.
###### [NAVIGATION-GROUP]
- Implement `NJNavigationGroup` component. Used in the `NJHeaderDrawer`.
###### [NAVIGATION-MENU-GROUP]
- Implement `NJNavigationMenuGroup` component. Used in the `NJHeaderDrawer`.
###### [RAY]
- Implement `NJRay` component.
###### [SUB-HEADER]
- Implement `NJSubHeader` component.
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-types@0.1.0-next.5
## 📦 3.0.0-next.12 - 2025-07-12
### 🐛 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
### 🛠️ 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`
###### [CHAT-INPUT-FILE-CARD]
- Fix close icon color
###### [DISPLAY, HEADING, TEXT]
- Add missing neutrals variations `primary`, `secondary`, `tertiary`, `contrast`, `inverse`.
###### [INLINE-MESSAGE]
- Fix `information` variant not working properly
###### [SPINNER]
- Make `aria-label` property optional
### 🛠️ 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
```tsx
<!-- Before -->
<NJHeading scale="2xl">Previous heading 2xl ➡️ doesn't exist anymore</NJHeading>
<NJHeading scale="xl">Previous heading xl ➡️ font size reduced</NJHeading>
<NJHeading scale="lg">Previous heading lg ➡️ font size reduced</NJHeading>
<!--Now-->
<NJDisplay scale="xl">Previous heading 2xl ➡️ Now display xl</NJDisplay>
<NJDisplay scale="md">Previous heading xl ➡️ Now display md</NJDisplay>
<NJHeading scale="xl">Previous heading lg ➡️ Now heading xl</NJHeading>
```
###### [SPINNER]
- Remove, no longer used, `isBlock` property.
- Remove `isLoading` property, stop rendering the component if not loading
```tsx
<!-- Before, no longer working -->
<NJSpiner isLoading="isLoading" />
<!--Now-->
isLoading && <NJSpinner />
```
### 🚀 Added
###### [DISPLAY]
- Implement `NJDisplay` component. See documentation for a better understanding of the component usage.
###### [HEADING]
- Add `ai` variant which colors the text with Engie's `ai` gradient
###### [SELECT]
- `NJSelect` now supports the `null` value as a valid option. This is useful when you want to select an option that has no real value.
```jsx
<NJSelect.Root>
<NJSelect.Item value={null}>Select an option</NJSelect.Item>
<NJSelect.Item value="1">Option 1</NJSelect.Item>
<NJSelect.Item value="2">Option 2</NJSelect.Item>
</NJSelect.Root>
```
###### [SKELETON-CIRCLE]
- Rename `variant` property to `scale`.
###### [SKELETON-RECTANGLE]
- Rename `size` property to `scale`.
###### [SPINNER]
- Add default value to the `aria-label` property for assistive technologies.
### 🐛 Fixed
###### [CHECKBOX]
- Fix checkbox scale `xl` displaying in `md`
###### [MULTI-SELECT]
- Add scroll behavior to the dropdown.
- Change tag's displaying order from list order to selection order. (Thank you, Richie MBENGUI, from Engie Digital in Paris, for your contribution)
###### [SELECT]
- Add scroll behavior to the dropdown
###### [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-04
### ⚠️ Breaking changes
###### [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.
###### [TOOLTIP]
- Add the possibility to delay the display or hiding of the tooltip with the `displayDelay` and `hideDelay` props. (Thank you, Bernard RIBEIRO, from Engie Solucoes in Brazil, for your contribution)
### 🐛 Fixed
###### [SIDEBAR]
- Export sidebar components in root
### 🛠️ 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
### ⚠️ Breaking changes
###### [AUTOCOMPLETE]
- Changed `initialValue`, `value` and `onOptionSelect` property types. Values are no longer `string` but `NJAutocompleteValue` (same type as `data` property items)
- Deprecated `onOptionSelect` in favor of `onChange` callback for a better consistency through the library.
### 🚀 Added
###### [AUTOCOMPLETE]
- Changed `id` property, it is no longer mandatory
- Added controlled and uncontrolled state to `inputValue` representing the typed value state changes are emitted with `onInputValueChange` callback.
###### [DEPRECATED-COMPONENTS]
- Ref are now forwarded to deprecated components
### 🐛 Fixed
###### [AUTOCOMPLETE]
- Rollback functional changes from last version, dropdown menu does open even if the input is empty or if a value is selected.
###### [TOGGLE]
- Fixed toggle not changing state on click when no label in parents
### 🛠️ Maintained
- Updated dependencies:
- @engie-group/fluid-design-system@6.0.0-next.5
## 📦 3.0.0-next.6 - 2025-02-12
### ⚠️ Breaking changes
###### [AUTOCOMPLETE]
- Deprecated `NJAutocomplete` component has been removed from library.
- `NJAutocompleteInput` component has been renamed to `NJAutocomplete`.
- Dropdown menu does no longer open if the input is empty or if a value is selected.
###### [AVATAR]
- `size` property 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 NJAvatar with composition
- NJAvatar.Root replace the NJAvatar component and is now the main component
- NJAvatar.Status is now a sub-component of NJAvatar.Root and is used to display the status indicator
- NJAvatar.Badge is now a sub-component of NJAvatar.Root and is used to display the notifications
- NJAvatar.Picture is now a sub-component of NJAvatar.Root and is used to display the avatar picture
```jsx
<NJAvatar.Root label="some person">
<NJAvatar.Picture src="https://www.example.com/avatar.jpg" alt="some person" />
<NJAvatar.Status status="online" />
<NJAvatar.Badge>3</NJAvatar.Badge>
</NJAvatar.Root>
```
###### [BUTTON]
- The `label` is now shown on the button when loading.
###### [DROPDOWN]
- Deprecated `NJDropdown` component has been removed from library.
###### [INLINE-MESSAGE]
- Remove the inline-message unmount animation.
- Updated default visibility of the status icon: the `hasStatus` property default value is now `true`.
- Removed the inline-message `isVisible` prop. Please use an external state to manage whether the inline message is visible or not, like so:
```tsx
const ParentComponent = () => {
const [showInlineMessage, setShowInlineMessage] = useState(false);
return (
<>
...
{showInlineMessage && <NJInlineMessage>Inline message content</NJInlineMessage>}
...
</>
);
};
```
###### [LIST]
- `NJListItemNavigation` & `NJListItemSelection` components has been removed. You can directly use the generic `NJListItem` or `NJList.Item` component.
- `NJList` component now leverage the composition API. It has been renamed `NJListRoot` or `NJList.Root`. Refers to the documentation to see usages.
###### [MENU]
- `NJMenu` component has been updated to leverage the composition API. It has been renamed to `NJMenuRoot` or `NJMenu.Root`. Refers to documentation to see usages.
###### [MODAL]
- Changed the `NJModalContent`'s `onClose` property signature.
- The `source` parameter is removed because `onClose` is now only called when the modal is closed by a click on the close button.
- If the `onClose` is `undefined`, the modal will not have a close button.
```ts
// Before
type onClose = (source: 'keyboard' | 'button' | 'backdrop') => void;
// Now
type onClose = () => void;
```
- Native HTML attributes are now directly forwarded to the dialog element instead of the root element.
###### [MULTISELECT]
- `NJMultiSelect` component has been updated to leverage the composition API. It has been renamed to `NJMultiSelectRoot` or `NJMultiSelect.Root`. Refers to documentation to see usages.
###### [POPOVER]
- `NJPopover` component has been updated to leverage the composition API. It has been renamed to `NJPopoverRoot` or `NJPopover.Root`. Refers to documentation to see usages. usages.
###### [SELECT]
- Deprecated `NJSelect` component has been removed from library.
- `NJSelectInput` component has been renamed to `NJSelect`
- `NJSelect` component has been updated to leverage the composition API. It has been renamed to `NJSelectRoot` or `NJSelect.Root`. Refers to documentation to see usages.
###### [SIDEBAR]
- `NJSidebar` component has been deprecated and renamed to `NJSidebarDeprecated`. A new `NJSidebar` component has been implemented. Please refers to the documentation.
###### [SIDEPANEL]
- Removed `hasCloseIcon` property from `NJSidepanelHeader` component. Close icon is displayed if `onCloseIconClicked` handler is set.
###### [SIDEPANEL-LAYOUT]
- `NJSidepanelLayout` component has been deleted as it was not aligned with the library philosophy. Fluid doesn't aim to provide layout components.
```tsx
<!-- Before -->
import { NJSidepanel } from './NJSidepanel';
<NJSidepanelLayout sidepanel={<NJSidepanel>Content</NJSidepanel>}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</NJSidepanelLayout>
<!-- After (example) -->
<div style={{ display: 'flex' }}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<NJSidepanel>Content</NJSidepanel>
</div>
```
###### [TOOLTIP]
- Deleted `NJTooltip`'s `isAlwaysDisplayed` property. Please use the new `displayed` property instead.
### 🚀 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.
###### [AUTOCOMPLETE]
- `NJAutocomplete`'s value can now be controlled with the `value` property or can be self managed. We introduced `initialValue` property which set the initial value of the autocomplete in self managed state.
###### [CHAT-INPUT]
- Add new `NJChatInput` component
- It provides a user-friendly text entry field with features such as placeholder text, a send button,
and optional voice input capabilities.
- There is two ways to use it:
```jsx
// Using namespaced components
import { NJChatInput } from '@engie-group/fluid-design-system-react
<NJChatInput.Root
suggestions={
<NJChatInput.Suggestion onClick={() => {}}>Suggestion text</NJChatInput.Suggestion>
}
/>
// Using standalone components
import { NJChatInputRoot, NJChatInputSuggestion } from '@engie-group/fluid-design-system-react
<NJChatInputRoot
suggestions={<NJChatInputSuggestion onClick={() => {}}>Suggestion text</NJChatInputSuggestion>}
/>
```
- It comes with subcomponents to handle specific features:
- `NJChatInput.Suggestion` to display a suggestion in the input field
- `NJChatInput.ActionButton` to handle the "primary action" button
- `NJChatInput.Button` to handle the secondary button
- `NJChatinput.FileCard` to display a file card in the input field
###### [CHECKBOX]
- `inputId` property is now optional and will be randomly generated if not provided.
###### [INLINE-MESSAGE]
- Add new optional `scale` property.
###### [FAB-MENU]
- Added a new `openOnHover` property which open the menu when hovering it.
- Open state can now be controlled with the `opened` property or can be self managed. We introduced `initialOpened` property which set the initial opening state of the menu in self managed state.
###### [MENU]
- `NJMenuRoot`'s open state can now be controlled with the `opened` property or can be self managed. We introduced `initialOpened` property which set the initial opening state of the menu in self managed state.
###### [MODAL]
- Added a new `NJModalContent` property `onEscape` to handle the escape key press event. This callback will be called if the user press the escape key.
- Added a new `NJModalContent` property `onBackdropClick` to handle the backdrop click event. This callback will be called if the user click away of the modal.
- `NJModalContent`'s `id` property is now optional and will be randomly generated if not provided.
###### [MULTI-SELECT]
- `NJMultiSelect`'s value can now be controlled with the `value` property or can be self managed. We introduced `initialValue` property which set the initial value of the multi-select in self managed state.
###### [POPOVER]
- `NJPopoverRoot`'s open state can now be controlled with the `opened` property or can be self managed. We introduced `initialOpened` property which set the initial opening state of the popover in self managed state.
###### [SELECT]
- `NJSelect`'s value can now be controlled with the `value` property or can be self managed. We introduced `initialValue` property which set the initial value of the select in self managed state.
###### [SIDEBAR]
- Implemented a new `NJSidebar` component up to date with the design library. It leverage the composition API and can be used with third party routing libraries. Please refer to the documentation for usages.
###### [SIDEPANEL]
- Native HTML properties are now forwarded to the encapsulated component for the `NJSidepanel` and the `NJSidepanelHeader` components.
###### [TAG]
- `hasClose` property has been deprecated. We now refers to the presence of the onClose callback to display or not a close icon
###### [TOOLTIP]
- `NJTooltip`'s displayed state can now be controlled with the `displayed` property or can be self managed. We introduced `initialDisplayed` property which set the initial displaying state of the tooltip in self managed state.
### 🐛 Fixed
###### [GLOBAL]
- Fixed some component properties not exposed by component types.
###### [MULTI-SELECT]
- Fixed `onChange` callback not being called with the right values
### 🛠️ Maintained
- Updated dependencies:
- @engie-group/fluid-design-system@6.0.0-next.4
## 📦 3.0.0-next.5 - 2024-12-09
### ⚠️ Breaking changes
###### [BUTTON]
- Remove deprecated props: `isDisabled`, `hrefTarget`, `hrefRel`, `ariaLabel`
- Update `size` value for a better consistency throughout the design system.
- `xsmall` -> `xs`
- `small` -> `sm`
- `medium` -> `md`
- `normal` -> `md`
- `large` -> `lg`
- `xlarge` -> `xl`
Please update your code accordingly
```tsx
<!-- Before -->
<NJButton size="xsmall" .../>
<!-- Now -->
<NJButton size="xs" .../>
```
###### [SPINNER]
- Update `scale` value from `xxs` to `2xs`
```tsx
<!-- Before -->
<NJSpinner size="xxs" />
<!-- Now -->
<Spinner scale="2xs" />
```
### 🚀 Added
###### [BADGE]
- Add new `ai` value for the `variant` prop.
- Deprecate `size` prop, use `scale` prop instead with same values.
###### [BUTTON]
- Add new `ai` value for the `variant` prop.
- Deprecate `size` prop, use `scale` prop instead with converted values.
###### [ICON]
- Add new color values for the `variant` prop: `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` prop
- Deprecate `size` prop, please use `scale` prop instead with same values.
###### [STATUS-INDICATOR]
- Add new `ai` value for the `variant` prop
- Deprecate `size` prop, use `scale` prop instead with same values.
###### [TOGGLE]
- Extends native `input` html attributes to the `NJToggle` component
- Add new `ai` value for the `variant` prop
- Deprecate props in favor of native html attribute ones : `isDisabled`, `ariaLabel`, `ariaLabelledBy`, `isChecked`
- Deprecate `size` prop, use `scale` prop 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 deprecated `variant` value: `fatal_error`. Use `fatal-error` instead.
- Remove the ability to pass a title with `data-child-name='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.
```tsx
// OLD
<NJInlineMessage>
<span data-child-name="njInlineMessageTitle">
Title
</span>
Message description
</NJInlineMessage>
// NEW: remove title
<NJInlineMessage>
<strong>Title</strong> Message description
</NJInlineMessage>
```
### 🚀 Added
###### [INLINE-MESSAGE]
- Add new `action` prop, in which you can specify an action (for example, a link "Learn more" or "Undo action").
- use the `action` optional prop and pass your component
- modify its position with `actionPlacement` prop ('bottom' | 'right')
```tsx
<NJInlineMessage actionPlacement="right" action={<NJLink href="#">Learn more</NJLink>}>
<div>Message content</div>
</NJInlineMessage>
```
### 🐛 Fixed
###### [INLINE-MESSAGE]
- When using the inline message with the `hasStatus={true}` prop, the displayed status indicator size will now appear larger to match design updates.
fix(status-indicator)
- Update `<NJStatusIndicator />` sizes to account for borders. Status indicators sizes are now 2px smaller:
- `sm`: 14px -> 12px,
- `md`: 18px -> 16px,
- `lg`: 26px -> 24px
###### [SELECT-INPUT]
- Selected item is now displayed as in the list when `NJListItemNavigation`'s `value` props is set.
### 🛠️ 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` component 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
<NJHeading scale="md" variant="primary">
Hello World
</NJHeading>
```
###### [TEXT]
- Added a new `Text` component to the design system
`NJText` component 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 sizes and variants to adapt to the context.
```jsx
<NJText scale="md" variant="primary">
Hello World
</NJText>
```
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-system@6.0.0-next.0
## 📦 3.0.0-next.1 - 2024-09-13
### ⚠️ Breaking changes
###### [MODAL]
- Previous `NJModal` as been deprecated and renamed to `NJDeprecatedModal`.
- Added `NJModalTrigger`, `NJModalContent` and `NJModalContentInformation` to complete the new modal system.
- Please switch to the new `NJModal` when possible, or rename your occurrences to the new name.
```jsx
<!--From (not working anymore)-->
<>
<NJButton label="modal" onClick={openModal}/>
<NJModal onClose={closeModal} footer={footerElement} {...props}>
{children}
</NJModal>
</>
<!--To-->
<>
<NJButton label="modal" onClick={openModal}/>
<NJDeprecatedModal onClose={closeModal} footer={footerElement} {...props}>
{children}
</NJDeprecatedModal>
</>
<!--Or with new NJModal component-->
<NJModal isOpen={isOpen} setIsOpen={setIsOpen}>
<NJModalTrigger>Modal Button</NJModalTrigger>
<NJModalContent footer={footerElement} onClose={closeModal} {...props}>
{children}
</NJModalContent>
</NJModal>
```
### 🚀 Added
###### [POPOVER]
- Add a `isAlwaysOpened` prop to keep the popover always opened
- Add a `openOnClick` prop to open the popover on click. (`true` by default)
- Add a `openOnHover` prop to open the popover on hover. (`false` by default)
- Add a `openOnFocus` prop to open the popover on focus. (`false` by default)
###### [SLIDER]
- Rework of the `NJSlider` component to remove the dependency of Vanilla lib and use `NJTooltip` component instead.
###### [TOOLTIP]
- Rework of the `NJTooltip` component to remove the dependency of Vanilla lib and use FloatingUI lib instead.
- Add a `offset` prop to set the distance between the tooltip and the target element
- Add a `shift` to prevent the tooltip from overflowing along its axis of alignment (see [FloatingUI](https://floating-ui.com/docs/shift) doc for more details)
- Add a `flip` to prevent the tooltip from overflowing along its side axis by flipping it to the opposite side by default (see [FloatingUI](https://floating-ui.com/docs/flip) doc for more details)
- Add a `hide` that allows you to hide the tooltip in applicable situations (see [FloatingUI](https://floating-ui.com/docs/hide) doc for more details)
- Destruct the `options` prop to standalone props (`placement`, `isColorInverse`, `hasArrow`, `isAlwaysDisplayed`)
- Align features and behavior with Vanilla and Angular lib
- Add a `arrowPlacement` prop to set the arrow position. It could be `start`, `center` or `end`
- The `text` prop is now a ReactNode instead of a string, so you can pass any HTML element or component
- The `isContentHtml` prop has been removed
### 🐛 Fixed
###### [TOOLTIP]
- `arrowPlacement` prop is now optional. It could be `start`, `center` or `end` and the default value is `center`.
### 🛠️ Maintained
###### [FAB]
- Remove the dependency of Vanilla lib and use `NJPopover` component instead.
## 📦 3.0.0-next.0 - 2024-07-16
### ⚠️ Breaking changes
###### [GLOBAL]
- Drop support from React 14
###### [LIST]
- Previous `NJList` and `NJListItem` components as been deprecated and renamed to `NJListDeprecated` and `NJListItemDeprecated`.
- Please switch to the new `NJList` and `NJListItem` components when possible, or rename your occurrences with the new names.
```jsx
<!--From-->
<NJList>
<NJListItem>Apolloniates, brabeuta, et nomen.</NJListItem>
</NJList>
<!--To (to keep your current version)-->
<NJListDeprecated>
<NJListItemDeprecated>Apolloniates, brabeuta, et nomen.</NJListItemDeprecated>
</NJListDeprecated>
<!--Or keep the original name to update to the new version-->
<NJList>
<NJListItem>Apolloniates, brabeuta, et nomen.</NJListItem>
</NJList>
```
### 🚀 Added
###### [MENU]
- Create a new `NJMenu` component to add a floating menu to your application.
- Create a new `NJMenuTrigger` component on which the floating menu will be attached.
- Create a new `NJMenuDropdown` component which is the floating element.
- Create a new `NJMenuItem` component to create an item inside a floating menu.
- Create a new `NJMenuGroup` component to create a list of `NJMenuItem`.
```jsx
// Basic example of use
<NJMenu>
<NJMenuTrigger>Trigger Button</NJMenuTrigger>
<NJMenuDropdown>
<NJMenuGroup>
<NJMenuItem>Menu item 1</NJMenuItem>
<NJMenuItem>Menu item 2</NJMenuItem>
</NJMenuGroup>
<hr />
<NJMenuGroup>
<NJMenuItem>Menu item 3</NJMenuItem>
</NJMenuGroup>
</NJMenuDropdown>
</NJMenu>
```
### 🚀 Added
###### [LIST]
- Create new `NJList` component to create a list and 'group' items
- Create a new `NJListItem` component to create an item for a list
- Create a new `NJListItemNavigation` component which is a supercharged `NJListItem` with a specific layout which can have an icon, a secondary text, a trailing element and/or a trailing arrow (see. [Figma element](https://www.figma.com/file/uQOeVZTYvOFlGkIpwpffLE/Fluid-Web-Components?type=design&node-id=22331-26859))
- Create a new `NJListItemSelection` component which is a supercharged `NJListItem` with a specific layout which can have an icon and/or a leading checkbox (see. [Figma element](https://www.figma.com/file/uQOeVZTYvOFlGkIpwpffLE/Fluid-Web-Components?type=design&node-id=80684-102821))
## 📦 2.16.9 - 2025-11-13
### 🚀 Added
###### [SIDEBAR]
- The `listItemId` prop is now deprecated, use `id` instead.
- The `id` prop is now optional for using the `onClick` function.
### 🐛 Fixed
###### [BREADCRUMB]
- Fixed behavior when there are less than 4 items.
- If `isMinified` is true and there are more than 3 items, all items except the first and last one will be hidden.
- If `isMinified` is false, all items will always be displayed.
###### [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.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