@engie-group/fluid-design-system
Version:
The Fluid Design System is ENGIE’s open-source library to create, build and deliver ENGIE digital services in a more efficient way.
1,705 lines (1,148 loc) • 97.4 kB
Markdown
# Changelog
All notable changes to Fluid Design System 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).
## 📦 5.18.1 - 2025-07-11
### 🐛 Fixed
###### [PAGINATION]
- Current item is not interactive anymore. It was not intended to be interactive.
## 📦 5.18.0 - 2025-06-23
### ⚠️ Breaking changes
###### [ICON]
- Change the `xxl` size modifier to `2xl` to match the design system's naming convention.
- Update your code accordingly if you are using the `xxl` size modifier.
```html
<!-- From -->
<span class="nj-icon-material nj-icon-material--xxl">...</span>
<!-- To -->
<span class="nj-icon-material nj-icon-material--2xl">...</span>
```
## 📦 5.17.2 - 2025-04-07
### 🐛 Fixed
###### [SKELETON]
- Fix styles used in skeleton components after token update
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.12.0
## 📦 5.17.1 - 2025-02-12
### 🐛 Fixed
###### [SEGMENTED-CONTROL]
- Animation has been removed to be aligned with design directions
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.11.0
## 📦 5.17.0 - 2024-12-06
### ⚠️ Breaking changes
###### [SELECT]
- Implement the new list for the select options update your select occurrences.
`SelectInput.init()` will no longer work with a deprecated list.
```html
<!-- Before -->
<div class="nj-form-item nj-form-item--select nj-form-item--custom-list">
<div class="nj-form-item__field-wrapper">
...
<ul
class="nj-form-item__list nj-list-deprecated nj-list-deprecated--no-border nj-list-deprecated--sm"
role="listbox"
hidden
aria-label="Example"
tabindex="-1"
>
<li
class="nj-list-deprecated__item nj-list-deprecated__item--clickable"
role="option"
tabindex="-1"
aria-selected="false"
data-value="option-1"
>
Option 1
</li>
...
</ul>
</div>
</div>
<!-- Now -->
<div class="nj-form-item nj-form-item--select nj-form-item--custom-list">
<div class="nj-form-item__field-wrapper">
...
<ul class="nj-form-item__list nj-list" role="listbox" hidden aria-label="Example" tabindex="-1">
<li
class="nj-list__item nj-list__item--interactive"
role="option"
tabindex="-1"
aria-selected="false"
data-value="option-1"
>
Option 1
</li>
...
</ul>
</div>
</div>
```
### 🐛 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 dependency
- @engie-group/fluid-design-tokens@5.10.0
## 📦 5.16.2 - 2024-10-07
### 🐛 Fixed
###### [ALERT & TAG]
- Update font size with the new font size tokens
## 📦 5.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
## 📦 5.16.0 - 2024-10-02
### ⚠️ Breaking changes
###### [PROGRESS]
- Renamed `nj-progress` to `nj-progress-deprecated` and create a new component `nj-progress` instead
```html
<!--From -->
<div class="nj-progress">
<div
class="nj-progress__bar"
role="progressbar"
aria-label="Label of progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
>
<span class="nj-sr-only">25%</span>
</div>
</div>
<!--To-->
<div class="nj-progress-deprecated">
<div
class="nj-progress-deprecated__bar"
role="progressbar"
aria-label="Label of progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
>
<span class="nj-sr-only">25%</span>
</div>
</div>
<!--Or with new progress component-->
<div
class="nj-progress"
role="progressbar"
aria-label="Label of progressbar"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
>
<div class="nj-progress__bar">
<div class="nj-progress__indicator" style="width: 25%"></div>
</div>
</div>
```
### 🚀 Added
###### [BUTTON]
- Add a new modifier for loading state `nj-btn--is-loading` to display the button with a spinner.
Make sure to add the spinner component inside the button.
```html
<button class="nj-btn nj-btn--is-loading" type="button">
<div class="nj-spinner " aria-live="polite" aria-atomic="true">
<p class="nj-sr-only">Loading...</p>
</div>
</button>
```
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.8.2
## 📦 5.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-tokens@5.8.1
## 📦 5.15.3 - 2024-09-11
### 🐛 Fixed
###### [FOOTER]
- Footer style is now displayed correctly
## 📦 5.15.2 - 2024-09-08
### 🐛 Fixed
###### [AVATAR]
- Avatar default icon is now correctly rendered.
###### [STATUS-INDICATOR]
- Status indicator badge is now correctly rendered
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.8.0
## 📦 5.15.1 - 2024-09-06
### 🛠️ Maintained
- Remove unpublished dependency
- Update URLs in README.md
## 📦 5.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.
```html
<!-- tokens.css = Styles to import tokens needed by components -->
<link
href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-tokens/lib/css/tokens.css"
rel="stylesheet"
/>
<!-- fluid-design-system.css = Styles of all components -->
<link
href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/fluid-design-system.css"
rel="stylesheet"
/>
```
or in your JavaScript entry file :
```javascript
import '@engie-group/fluid-design-tokens/css';
import '@engie-group/fluid-design-system/css';
```
###### [TAG]
- Tag's icon's style is now applied to the class `nj-icon-material` instead of `material-icons`.
Make sur that the `nj-icon-material` class is correctly applied to your icon.
```html
<div class="nj-tag">
<a href="#" class="nj-tag__link">tag</a>
<span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
<button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--2xs">
<span class="nj-sr-only">Remove tag XXX</span>
<span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
</button>
</div>
<!-- Becomes -->
<div class="nj-tag">
<a href="#" class="nj-tag__link">tag</a>
<span aria-hidden="true" class="nj-tag__icon nj-icon-material material-icons">check</span>
<button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--2xs">
<span class="nj-sr-only">Remove tag XXX</span>
<span aria-hidden="true" class="nj-icon-btn__icon nj-icon-material material-icons">close</span>
</button>
</div>
```
### 🐛 Fixed
###### [TAG]
- Fix the display of the focus ring when `nj-tag` is clickable
## 📦 5.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).
## 📦 5.13.0 - 2024-07-16
### 🚀 Added
###### [MENU]
- Add separator to `nj-menu` component with hr HTML element.
- Add a `nj-menu--full-width` modifier to take parent full-width.
###### [MENU-GROUP]
- Add a `nj-menu-group` component to group menu items.
### 🐛 Fixed
###### [LIST]
- Solves accessibility issues regarding the focus state
## 📦 5.12.1 - 2024-07-09
### 🐛 Fixed
###### [FORM-ITEM]
- Ensure the `nj-form-item--textarea` uses the correct font (sans-serif)
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.7.2
## 📦 5.12.0 - 2024-06-04
### ⚠️ Breaking changes
###### [FOOTER]
- Update footer styles and html structure.
###### [ICON-BUTTON]
- We added new sizes and update existing ones:
- `2xs`: height `16px`
- `xs`: height `24px` (new default)
- `sm`: height `32px` (old 16px)
- `md`: height `40px` (old default, 24px)
- `lg`: height `48px` (old 32px)
- `xl`: height `56px`
```html
<!-- To apply those changes, search and replace the following: -->
<button class="... nj-icon-button--sm">...</button> -> <button class="... nj-icon-button--2xs">...</button>
<button class="... nj-icon-button--lg">...</button> -> <button class="... nj-icon-button--sm"></button>
```
###### [RADIO-GROUP]
- Remove the `has-danger` class (used to force error styles). Instead, use the new `nj-radio-group--has-error` modifier.
### 🚀 Added
###### [ACCORDION]
- Implement a new `nj-accordion` component
```html
<div class="nj-accordion">
<details class="nj-accordion-item">
<summary>
<span class="nj-accordion-item__label">Header</span>
<span aria-hidden="true" class="material-icons nj-icon-material nj-accordion-item__toggle">expand_more</span>
</summary>
<p class="nj-accordion-item__content">Fatalis advena absolute promissios rumor est.</p>
</details>
</div>
```
###### [AUTOCOMPLETE]
- Add a `success` variant
###### [CHECKBOX]
- Add a `success` variant:
use the `nj-checkbox--success` modifier and add the `nj-checkbox__subscript` element with an `id` linking to the input through a
`aria-describedby`.
- Add a `subcript` variant to pass a hint message. Use the `nj-checkbox__subscript` element with an `id` linking to the input through a
`aria-describedby`.
###### [FORM-ITEM]
- Add a `success` variant
###### [RADIO]
- Add two new `nj-radio` sizes:
- `nj-radio--lg` 24px
- `nj-radio--xl` 32px
- Add a `required` radio-group example.
- Add a `.nj-radio--no-animation` modifier to remove the transition animation.
###### [SELECT]
- Add a `success` variant
###### [TEXTAREA]
- Add a `success` variant
###### [CHECKBOX]
- Add a simple structure for a checkbox without label
```html
<!-- only checkbox, without label -->
<input type="checkbox" id="checkbox-id" class="nj-checkbox" checked />
<!-- or with label -->
<div class="nj-checkbox">
<label for="checkbox-id">
<input type="checkbox" id="checkbox-id" checked />
<span class="nj-checkbox__label">Basic checkbox</span>
</label>
</div>
```
### 🖍 Changed
###### [CHECKBOX]
- We updated how the `nj-checkbox` error state can be implemented. Use the `nj-checkbox--error` modifier and replace the
`nj-checkbox__error` element by a `nj-checkbox__subscript`.
###### [RADIO]
- Update default `nj-radio` size from 20px to 16px.
- Improve `nj-radio-group` error message
## 📦 5.11.0 - 2024-05-07
### ⚠️ Breaking changes
###### [TOOLTIP]
- Rework of the tooltip to be based on a `Tooltip` class exposing methods to update tooltip state.
- `updateTooltipContent()`, `updateTooltipModifiers()` functions have been deleted in favor of the new `setContent()`and `updateOptions()` class methods
- `createTooltipElement()` function has been deleted
- Signatures of `njTooltip` and `initAllTooltips` functions have been updated to return `Tooltip` instances.
Read documentation for further information.
### 🚀 Added
###### [BADGE]
- Add a new `small` size variation (18px) with the `nj-badge--sm` modifier.
###### [MENU]
- Add a `nj-menu` component.
- Implements `openMenu()` function to open a floating menu
```javascript
openMenu(anchor, content, document.body, { placement: 'bottom-end' });
```
###### [TOOLTIP]
- Implement [#1052](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/1052) feature,
You can now show or hide a tooltip with its corresponding `Tooltip` methods.
- Implement function `displayTooltipOnHoverAndFocus` to attach listeners to focus and hover events to display a tooltip.
```javascript
const tooltip = njTooltip(anchor, content, options);
// If you want to manually display and hide the tooltip
tooltip.show();
tooltip.hide();
// If you want the tooltip to be displayed automatically on hover and focus
const unmount = displayTooltipOnHoverAndFocus(tooltip);
// Call the returned function when you want to remove event listeners
unmount();
```
### 🖍 Changed
###### [BADGE]
- Increase the size of the default badge size, from `20px` to `24px`.
###### [TOGGLE]
- Update default `nj-toggle` label font size from 14px to 16px
## 📦 5.10.2 - 2024-04-18
### 🐛 Fixed
###### [BUTTON]
- Fix button variants not rendering correctly
###### [CHECKBOX]
- Prevent checkboxes from initializing more than one checkbox
###### [FORM ITEM]
- Enforce text alignment to the start
## 📦 5.10.1 - 2024-04-12
### ⚠️ Breaking changes
###### [LIST]
- Rename variant `.nj-list__item--clickable` to `.nj-list__item--interactive`
### 🐛 Fixed
###### [GLOBAL]
- Fix border colors on `nj-inline-message`s, `nj-badge`s and `nj-tag`s color variants
## 📦 5.10.0 - 2024-04-12
### ⚠️ Breaking changes
###### [BUTTON]
- Add new `nj-btn--lg` size modifier. Previous `nj-btn--lg` size is now `nj-btn--xl`. Please update your base code to reflect this change if needed.
```html
<button type="button" class="nj-btn nj-btn--lg "></button> ==> <button type="button" class="nj-btn nj-btn--xl"></button>
```
###### [CHECKBOX]
- To standardize our component sizes and for consistency with the design, we had to make modifications to the checkbox sizes:
- ❌ REMOVED small (14px, `nj-checkbox--sm`), use the normal size instead (16px).
- 🖍 UPDATED default (20px) to 16 px.
- 🖍 UPDATED large (30px, `nj-checkbox--lg`) to 24px.
- 🚀 ADDED new extra-large (`nj-checkbox--xl`) with a size of 32px.
- We also removed the animation, and therefor removed the `.nj-checkbox--no-animation` modifier.
### 🚀 Added
###### [INPUT SEARCH]
- Add an `input-search` component with 2 'variations' :
- basic (only the field)
- with button
###### [LIST]
- Add a `nj-list` up to date with new design changes.
### 🖍 Changed
###### [LIST GROUP]
- `nj-list-group` is now deprecated and renamed to `nj-list-deprecated` classes, prefer using the `nj-list` up to date with the new design changes.
## 📦 5.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).
- Following the changes made to the **border color tokens**, all components border color tokens have been updated to their new nomenclature (adding the `-default` suffix).
###### [FORM ITEM PASSWORD]
- Replaced the password icon variant: from `nj-icon-btn--secondary` modifier to `nj-icon-btn--tertiary` modifier.
```html
<div class="nj-form-item nj-form-item--password">
<div class="nj-form-item__field-wrapper">
<input />
<label />
<button type="button" aria-pressed="false" class="nj-form-item__password-button nj-icon-btn nj-icon-btn--lg ">
<!-- swap secondary for tertiary here -->
<span />
<span />
</button>
<p />
</div>
</div>
```
###### [TOOLTIP]
- Refactor of the tooltip component:
- Migrating from popper.js to FloatingUI library
- Reword of HTML attributes for a better contextualization.
- Better handling of the remaining space to display the tooltip where it fit best (remove placement `auto`).
- Remove the auto initialization of all tooltips on `DOMContentLoaded`, you can now use the built-in `initAllTooltips` function to replicate the behavior.
### 🚀 Added
###### [TAB]
- Add the possibility to include a `nj-badge` inside a `nj-tab__item`.
### 🖍 Changed
###### [FORM ITEM]
- Replaced icon variant from `secondary` to `tertiary`
###### [LINK]
- Update the `hovered`, `focused` and `pressed` colors for the `grayed` and `contextual` link variants.
###### [TAG]
- Update the icon color of the neutral tag to use the new `tertiary` token.
## 📦 5.8.0 - 2024-03-05
### 🚀 Added
###### [CHECKBOX]
- Add new size modifiers
- small: `nj-checkbox--sm`
- large: `nj-checkbox--lg`
- Add new optional asterisk element when input is required: `<span aria-hidden="true" class="nj-checkbox__required">*</span>` (check out the storybooks for a detailed example)
### 🖍 Changed
###### [GLOBAL]
- Update dependencies to support Node >= 20
###### [CHECKBOX]
- Update the way we handle `required` and `error` state.
#### ⚠️ Breaking changes
###### [CHECKBOX]
- Remove `.nj-checkbox--inline` modifier. You can inline elements with the `display: flexbox` CSS property on the parent.
- Remove `.has-danger` class (it was previously used to force errors). Use the `aria-invalid="true"` attribute instead.
- Update the Html structure for the label: we now wrap the text of the label with `.nj-checkbox__label`. We updated the documentation with new examples and explanations, make sure to check it out.
```html
<div class="nj-checkbox">
<label for="checkbox-changelog-example">
<input type="checkbox" id="checkbox-changelog-example" />
<span class="nj-checkbox__label">Checkbox label</span>
<!-- New wrapper for the label text -->
</label>
</div>
```
## 📦 5.7.0 - 2024-01-31
### 🖍 Changed
###### [FAB]
- Replace `nj-fab` scss variables by component css variables (`$fab-size` -> `--nj-component-fab-size-base` and `$fab-size-sm` -> `--nj-component-fab-size-sm`)
###### [SEGMENTED-CONTROL]
- Change events suffix to match with the component, now `*.nj.segmented-control`.
- Better types for `select` method signature, now `select(index: number)`.
### 🚀 Added
###### [BADGE]
- Add `nj-badge__icon` element to add icon in the badge:
```html
<p class="nj-badge">
<span aria-hidden="true" class="nj-badge__icon material-icons">outlined_flag</span>
badge with icon
</p>
```
###### [ICON]
- Add new size `nj-icon-material--xs`
### 🐛 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.
## 📦 5.6.0 - 2023-12-15
### 🚀 Added
###### [BADGE]
- Add new `nj-badge--planet` semantic color variation
###### [INLINE MESSAGE]
- Add new `nj-inline-message--planet` and `nj-inline-message--discovery` semantic colors variations
###### [SIDEPANEL]
- Add new `.nj-sidepanel` component
- Add new `.nj-sidepanel-layout` wrapper component to attach a sidepanel aside of a content
###### [STATUS INDICATOR]
- Add new `nj-status-indicator--planet` and `nj-status-indicator--discovery` semantic colors variations
### 🖍 Changed
###### [FORM ITEM]
- Change label color when input is filled from `text-neutral-tertiary` to `text-neutral-secondary`
#### ⚠️ Breaking changes
###### [HEADER]
- Update `nj-header` to use latest Fluid components. This component will be updated in the near future to cover a wider scope of usages.
- The `nj-header` now uses contextual `nj-link`s, `nj-icon-button`s and has some basic keyboard accessibility.
- ⚠️ Breaking changes: Make sure to use the updated html structure, some elements changed / were replaced by Fluid components.
###### [ICON]
- Split `.nj-icon-material--inherit` to its color (`.nj-icon-material--color-inherit`) and size (`.nj-icon-material--size-inherit`) variants.
- Update material icons default color.
Icons no longer inherit color from its context by default.
To keep previous behaviour, add modifier `.nj-icon-material--color-inherit`.
- To inherit icon size from context, use `.nj-icon-material--size-inherit`.
###### [INLINE MESSAGE]
- Rename `nj-inline-message--info` to `nj-inline-message--information` to homogenize with the new token names.
###### [STATUS INDICATOR]
- Rename `nj-status-indicator--info` to `nj-status-indicator--information` to homogenize with the new token names.
## 📦 5.5.3 - 2023-10-27
### 🐛 Fixed
###### [STATUS INDICATOR]
- Fix offline status indicator color
## 📦 5.5.2 - 2023-10-23
### 🖍 Changed
- Update tokens dependencies
## 📦 5.5.1 - 2023-10-23
### 🖍 Changed
- Update tokens dependencies
## 📦 5.5.0 - 2023-10-20
### 🖍 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.
### 🐛 Fixed
###### [LIST ITEM]
- Fix issue [#368](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/368),
focus state display the correct colors and focus ring when used with `role='option'` (autocomplete input, select custom, multi-select).
## 📦 5.4.0 - 2023-09-06
### 🚀 Added
###### [MODAL]
- Add new `.nj-modal--fit-viewport` variant, to fix the modal to the viewport area.
### 🖍 Changed
#### ⚠️ Breaking changes
###### [ICON]
- `--nj-material-icon-color` CSS variable is no longer used to set icon color.
###### [MODAL]
- Change of the default modal behaviour: The modal is now attached to its parent container by default, where it was
attached to the viewport area before.
If you want to keep the old behaviour: please add `.nj-modal--fit-viewport` class to the `.nj-modal` element.
- The default modal position is now `absolute` instead of `fixed`.
- Your modal parent anchor should be **positioned** (position `relative`, `absolute`, `fixed` or `sticky`) in order to
the modal to be attached to it.
- The modal parent anchor is the `.nj-modal` parent container if `data-appendto` is not set, or the selected element if
set.
`data-appendto` can take any valid `querySelector` as it uses `element.querySelector`(
see. [Doc](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)) under the hood
e.g: `data-appendto="body"` or `data-appendto="#element_id"`
### 🐛 Fixed
###### [GLOBAL]
- Correctly export the input number component
###### [AUTOCOMPLETE INPUT]
- Fix issue [#791](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/791),
add possibility to load suggestion dynamically after component loaded
###### [CARD]
- Fix issue [#875](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/875).
Card gradient bottom border is now visible again.
###### [FORM ITEM]
- Fix issue [#873](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/873).
The placeholder in the form item is now correctly hidden in Firefox.
###### [ICON]
- Fix issue [#846](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/846).
Remove the default `color: inherit` and the `--nj-material-icon-color` variable on material icon, so the correct color
is displayed properly.
###### [MODAL]
- Fix issue [#870](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/870),
storybook's canvas on Firefox behave now like in Chrome browsers.
The backdrop remains in the same container as the modal, even when the modal is attached to another container.
## 📦 5.3.0 - 2023-07-06
### 🚀 Added
###### [ICON]
- Add new `nj-icon-material--tertiary` variant (grey 500).
###### [MULTI SELECT]
- Add styles for multi select component
###### [SKELETON]
- Add new `nj-skeleton` component with 3 available children to mock your data as you need:
- `nj-skeleton__rectangle`
- `nj-skeleton__circle`
- `nj-skeleton__area`
- This component is highly customizable:
- pass a custom width and size:
- Css property: style="max-width: 200px;"
- Css variables: style="--nj-skeleton-width: 24px;"
- pass a custom svg in `nj-skeleton__area`
- ⚠️ Make sure to read the documentation provided, as this component needs a bit of work to fulfill accessibility
standards!
###### [TAG]
- Add size `xs` for tags
### 🐛 Fixed
###### [SELECT]
- Fix issue [#843](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/843).
When using Windows, the `option` and `otpgroup` elements should behave properly in dark mode (this bug is related to
OS-dependent styling).
###### [MODAL]
- Fix issue [#809](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/809).
Buttons in the modal now have the correct focus-visible behaviour in React and Angular.
- Fix issue [#824](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/824).
We now check if the event.target has the [data-toggle="modal"] attribute, if not find the closest element to trigger
the modal properly.
###### [SELECT INPUT]
- Fix issue [#800](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/800),
add function `updateOptionsAndListeners()` that you can access
via `window.NJ.SelectInput.getInstance(SELECT_INPUT_ELEMENT).updateOptionsAndListeners()`
### 🖍 Changed
###### [TOOLTIP]
- We now expose the fixTitle() method that allows easier on the flight change to a tooltip title.
#### ⚠️ Breaking changes
###### [AVATAR]
- Rename root tokens for avatar sizes:
- `--nj-avatar-size--sm` -> `--nj-component-avatar-size-sm`
- `--nj-avatar-size--base` -> `--nj-component-avatar-size-base`
- `--nj-avatar-size--lg` -> `--nj-component-avatar-size-lg`
- `--nj-avatar-size--xl` -> `--nj-component-avatar-size-xl`
## 📦 5.2.0 - 2023-05-04
### 🚀 Added
###### [INPUT NUMBER]
- Add the `nj-input-number` component
### 🐛 Fixed
###### [SLIDER]
- Fix some cases where slider track doesn't go all the way
### 🖍 Changed
###### [ICON]
- Add new `.nj-material-icon--secondary` modifier (grey-600)
- Add new `.nj-material-icon--grey` modifier (grey-600)
#### ⚠️ Breaking changes
###### [BADGE]
- ⚠ Change default `nj-badge` color to `neutral` (grey)
- Add new badge emphasis variations:
- Bold: default
- Subtle: `nj-badge--subtle`
- Minimal: `nj-badge--minimal`
- Add new badge color variants according to the latest design
changes: [Figma Badge component](https://www.figma.com/file/uQOeVZTYvOFlGkIpwpffLE/Fluid-5?node-id=50852%3A54647&t=Z7ix3zX2g5qSm7VX-1)
- Neutral: default
- Information: `nj-badge--information`,
- Danger: `nj-badge--danger`,
- Warning: `nj-badge--warning`,
- Success:`nj-badge--success`,
- Discovery: `nj-badge--discovery`
###### [LIST GROUP]
- Change clickable items markup
```html
<ul class="nj-list-group">
<!--
Interactive list items should have the nj-list-group__item--clickable
class and contain only an anchor or a button element.
-->
<li class="nj-list-group__item nj-list-group__item--clickable">
<a href="#"> Lorem ipsum dolor sit amet </a>
</li>
</ul>
```
###### [LIST ITEM]
- [A11Y] `nj-list-item` : fix markup when list item is a button or a link
###### [SIDEBAR]
- Update `nj-sidebar` to match the latest design
- Change `nj-sidebar` html structure to add some modularity
- the `nj-sidebar` element that acts as an outer shell (modifiers : `nj-sidebar--folded` to fold
it, `nj-sidebar--no-motion` to remove animation)
- the `nj-sidebar__brand` element to house the brand logo and act as a return to home button
- a `nj-sidebar__navigation` div to add a nav (multiple nav allowed), with a `sidebar__navigation--footer` variation
that anchors it at the bottom
- a `nj-sidebar__collapse` element to house the button that folds / expands the sidebar if needed
- the `nj-sidebar-content` is the element used for all the content outside the sidebar. You can wrap your content so
that it automatically has the correct margin on the left
Example:
```html
<div class="nj-sidebar">
<div class="nj-sidebar__brand">
<!-- Your logo-->
</div>
<div class="nj-sidebar__navigation">
<!-- Your sidebar nav items-->
</div>
</div>
<div class="nj-sidebar-content">
<!-- Your content goes here-->
</div>
```
- Remove the `.nj-sidebar--sm` modifier
- Removed the `.nj-sidebar--navbar` modifier
- If you need to use the sidebar with a navbar up top, you can override the `--nj-sidebar-top`
and `--nj-sidebar-height` css variables
Example:
```css
.nj-sidebar.nj-sidebar--custom-height {
--nj-sidebar-top: var(--height-of-your-navbar);
--nj-sidebar-height: calc(100% - var(--height-of-your-navbar));
}
```
###### [CHECKBOX]
- Remove `align-self: flex-start;` forced behavior
## 📦 5.1.1 - 2023-04-07
### 🐛 Fixed
###### [TOAST]
- Fix issue on toast content not being aligned
## 📦 5.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
### 🐛 Fixed
###### [GLOBAL]
- Fix issue [#792](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/792),
screenreader not imported in global scss file
###### [CHECKBOX]
- Fix hover & pressed on checked checkbox
###### [FORM ITEM]
- Fix form item in error state label color when input is focused
- Fix issue [#767](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/767)
when input is autofilled background color doesn't go all the way
###### [Radio]
- Remove hover state on checked radio since we can not uncheck them
## 📦 v5.0.1 - 2023-03-09
### 🐛 Fixed
###### [CHECKBOX]
- Remove `.nj-form-group` deprecated class from parent wrapper of checkbox, and place `.has-danger` directly
on `.nj-checkbox`
###### [SEGMENTED CONTROL]
- Fix occurences where hover and focus not working on `.nj-segmented-control-btn`
###### [SELECT]
- Fix option click not work and select not showing active selected item
## 📦 v5.0.0 - 2023-03-02
### 🚀 Added
###### [GLOBAL]
- Added single component export in Javascript, we now have two ways to import
```javascript
// ====> Present before
import NJ from '@engie-group/fluid-design-system';
// If we want to use Alert for e.g
NJ.Alert.init();
// ====> Added
import { Alert } from '@engie-group/fluid-design-system';
// If we want to use Alert for e.g
Alert.init();
```
- Disabled elements now use opacity instead of specific disabled colors
###### [AVATAR GROUP]
- Add new `nj-avatar-group` density (compact)
###### [BUTTON]
- Add new buttons
- 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)
###### [CHECKBOX]
- Add new `.nj-checkbox--no-animation` class to `.nj-checkbox` to toggle animation on and off
###### [FORMS]
- Add new forms `nj-form-item`
- Add new `password` component
- Add new `select-input` with native and custom variants
- Add new `autocomplete-input`
###### [HIGHLIGHT]
- Add highlight component to highlight text for e.g in search
###### [ICON BUTTON]
- Add component icon button
###### [ICON MATERIAL]
- Add size `inherit` `nj-icon-material--inherit` for icons that inherits font-size from parent
###### [INLINE MESSAGE]
- Add new component `nj-inline-message`
###### [LINK]
- Add variant `inverse` `.nj-link--inverse` and `high-contrast` `.nj-link--high-contrast` to `nj-link`
###### [LIST]
- Add options and improve `nj-list`
- Add new `nj-list-group__item--right-border` modifier to display the hover/active border of a list item on the
right
- Add new `nj-list-group__item-right-content`class to display an element on the right side of the list item (icon,
badge, link, ...)
- Add new border animation
###### [PROGRESS]
- Add the `nj-progress--has-transition` modifier
###### [SEGMENTED CONTROL]
- Add new components `nj-segmented-control` and `nj-segmented-control-btn`
###### [SPINNER]
- Add new size `xxs` for `nj-spinner`
###### [STATUS INDICATOR]
- Add new component `nj-status-indicator`
###### [TABS]
- Add new `density` to `nj-tabs`
###### [TAG]
- Add possibility to pass icon to tags
- Add different sizes `sm, md(default), lg`
###### [TOAST]
- Add component `nj-toast`
- Add component `nj-toast__container` (default with a 480px width and its full-width variation)
###### [TOGGLE]
- `nj-toggle` add new size: `nj-toggle--lg`
- Add class `nj-toggle--inherit` to make toggle label color inherit from parent, fixes
issue [#688](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/688
###### [TOOLTIP]
- Add new variant `.nj-tooltip--inverse` for `.nj-tooltip` usable by adding attribute `data-variant='inverse'`
### 🖍 Changed
##### ⚠️ Breaking changes
###### [GLOBAL]
- Update colors to comply with new Engie Global Guidelines
- Update sass and fix breaking changes accordingly
- Update components to be Accessible
- Update dependencies to work with Node latest LTS v16.16 and npm 8.15
- lib/fluid-design-system.js automatically initiate components
- lib/auto-init is included to lib/fluid-design-system.js
- replace web-animation-js dependency for global file
- Replace all radius to use tokens and be compliant with new UI guidelines (no radius)
- Replace all sass variables with tokens
- 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 `nj-bullet` by `nj-status-indicator` in the `nj-avatar` component
- Add new `nj-avatar--xl` size
- `nj-avatar` with pictures should now have modifier `.nj-avatar--picture` like so
```html
<a href="#" class="nj-avatar nj-avatar--picture">
<img class="nj-avatar__picture" src="source" alt="Customer" />
</a>
```
###### [BADGE]
- [A11Y] Change `nj-badge` semantic from `div` to `p`
###### [BUTTON]
- Replace all previous variants `light`, `primary`, `danger`, `success`, `warning` variants with new system listed in
section Added
###### [BULLET]
- `nj-bullet` doesn't take same variants as before,
```html
Before:
<div class="nj-bullet nj-bullet--white"></div>
<div class="nj-bullet nj-bullet--blue-corporate"></div>
<div class="nj-bullet nj-bullet--blue-allports"></div>
<div class="nj-bullet nj-bullet--blue-venice"></div>
<div class="nj-bullet nj-bullet--green-java"></div>
<div class="nj-bullet nj-bullet--green-pine"></div>
<div class="nj-bullet nj-bullet--green"></div>
<div class="nj-bullet nj-bullet--orange-crusta"></div>
<div class="nj-bullet nj-bullet--orange"></div>
<div class="nj-bullet nj-bullet--red-mandy"></div>
<div class="nj-bullet nj-bullet--red"></div>
<div class="nj-bullet nj-bullet--blue-bigstone"></div>
<div class="nj-bullet nj-bullet--blue-rhino"></div>
<div class="nj-bullet nj-bullet--green-fun"></div>
<div class="nj-bullet nj-bullet--green-riogrande"></div>
<div class="nj-bullet nj-bullet--yellow"></div>
<div class="nj-bullet nj-bullet--yellow-bright-sun"></div>
<div class="nj-bullet nj-bullet--purple"></div>
<div class="nj-bullet nj-bullet--violet"></div>
<div class="nj-bullet nj-bullet--violet-eggplant"></div>
<div class="nj-bullet nj-bullet--cerise"></div>
After :
<div class="nj-bullet nj-bullet--brand"></div>
<div class="nj-bullet nj-bullet--teal"></div>
<div class="nj-bullet nj-bullet--pink"></div>
<div class="nj-bullet nj-bullet--orange"></div>
<div class="nj-bullet nj-bullet--red"></div>
<div class="nj-bullet nj-bullet--green"></div>
<div class="nj-bullet nj-bullet--ultramarine"></div>
<div class="nj-bullet nj-bullet--yellow"></div>
<div class="nj-bullet nj-bullet--purple"></div>
<div class="nj-bullet nj-bullet--blue"></div>
<div class="nj-bullet nj-bullet--lime"></div>
```
###### [CARD]
- `nj-card` image `nj-card__img` should now be wrapped in div `nj-card__img-wrapper`
###### [FOOTER]
- `nj-footer` : remove `.nj-footer__link` class it should be replaced by `nj-link nj-link--contextual`
- Remove all utils from `nj-footer`,
Before:
```html
<div class="row mt-5 mb-3">
<div class="col-sm-6 col-md mb-3 mb-md-0">
<h2 class="nj-footer__links-list-title">Title 1</h2>
<ul class="list-unstyled">
<li><a href="#" class="nj-link nj-link--contextual">Link 1</a></li>
<li><a href="#" class="nj-link nj-link--contextual">Link 2</a></li>
<li><a href="#" class="nj-link nj-link--contextual">Link 3</a></li>
</ul>
</div>
<div class="col-sm-6 col-md mb-3 mb-md-0">
<h2 class="nj-footer__links-list-title">Title 2</h2>
<ul class="list-unstyled">
<li><a href="#" class="nj-link nj-link--contextual">Link 1</a></li>
<li><a href="#" class="nj-link nj-link--contextual">Link 2</a></li>
<li><a href="#" class="nj-link nj-link--contextual">Link 3</a></li>
</ul>
</div>
<div class="col-sm-12 col-md">
<h2 class="nj-footer__links-list-title">Title 3</h2>
<ul class="list-unstyled">
<li><a href="#" class="nj-link nj-link--contextual">Link 1</a></li>
<li><a href="#" class="nj-link nj-link--contextual">Link 2</a></li>
<li><a href="#" class="nj-link nj-link--contextual">Link 3</a></li>
</ul>
</div>
</div>
```
After:
```html
<div class="nj-footer__menu">
<div class="nj-footer__menu-section">
<h2 class="nj-footer__links-list-title">Title 1</h2>
<ul class="nj-footer__links-list">
<li><a href="#" class="nj-link nj-link--contextual">Link 1</a></li>
<li><a href="#" class="nj-link nj-link--contextual">Link 2</a></li>
<li><a href="#" class="nj-link nj-link--contextual">Link 3</a></li>
</ul>
</div>
<div class="nj-footer__menu-section">
<h2 class="nj-footer__links-list-title">Title 2</h2>
<ul class="nj-footer__links-list">
<li><a href="#" class="nj-link nj-link--contextual">Link 1</a></li>
<li><a href="#" class="nj-link nj-link--contextual">Link 2</a></li>
<li><a href="#" class="nj-link nj-link--contextual">Link 3</a></li>
</ul>
</div>
<div class="nj-footer__menu-section">
<h2 class="nj-footer__links-list-title">Title 3</h2>
<ul class="nj-footer__links-list">
<li><a href="#" class="nj-link nj-link--contextual">Link 1</a></li>
<li><a href="#" class="nj-link nj-link--contextual">Link 2</a></li>
<li><a href="#" class="nj-link nj-link--contextual">Link 3</a></li>
</ul>
</div>
</div>
```
###### [HEADER]
- Remove all utils from `nj-header`, you now have to add classes `nj-header__search-input` on search input
and `nj-header__search-button` on search button as well as `nj-header__sub-nav` instead of `list-unstyled`
###### [ICON MATERIAL]
- `.material-icons` now inherits color by default
- Remove material icon `link` usage.
- To use material icons variations, use the `nj-icon-material` class and its modifiers:
- `md--{color}` is now `nj-icon-material--{color}`
- ⚠️Breaking change: reworked colors: primary (grey-800), inverse (grey-0), brand (ex blue-corporate), grey,
teal,
pink, orange, red, green, ultramarine, yellow, purple,
- `md--{size}` is now `nj-icon-material--{size}`
###### [LINK]
- `nj-link` now inherits its parent font-size
- `nj-link` rename class `.nj-link--no-text-decoration` to `.nj-link--contextual`. Links are all
underlined except for link variant`contextual`
- Make link easier to interact with by adding some padding
###### [MODAL]
- Update `nj-modal`:
- now uses the `nj-icon-button`
- new html structure
- remove old `.nj-close` icon, replace it with the new `nj-icon-button` with the `.nj-modal__close`
###### [NAVBAR]
- Remove all utils from `nj-navbar`, you know have to add classes `nj-navbar__search-input` on search input
and `nj-navbar__search-button` on search button
###### [PAGINATION]
- `nj-pagination` : remove `.nj-pagination__link--next`, `.nj-pagination__link--prev`, `.nj-pagination__link__nav` class
it should be replaced by an `nj-icon-btn`
###### [SPINNER]
- `nj-spinner`
- `light` variant has been renamed `inverse` icon
- `gray` variant has been renamed `grey` icon
###### [TAB]
- [A11Y] add `aria-label` on tablist element and `tabindex` and `role` on tabpanel elements
###### [TAG]
- Update `nj-tag` with new UI:
- Replace `nj-tag__icon` with component `nj-icon-btn` with class `nj-tag__close`
- Class `nj-tag__icon` is now set to the tag's icon
- Variants have been replaced with new colors, here are the new tokens:
```
.nj-tag (grey default),
.nj-tag--brand,
.nj-tag--teal,
.nj-tag--pink,
.nj-tag--orange,
.nj-tag--red,
.nj-tag--green,
.nj-tag--blue,
.nj-tag--ultramarine,
.nj-tag--yellow,
.nj-tag--purple
.nj-tag--lime
```
- All tags are now filled, remove classes `.nj-tag--filled-VARIANT`
- Remove margin on tags
- [A11Y] change structure of `nj-tag` and order of its children
###### [TOGGLE]
- `nj-toggle` minor changes: animation
- Rename toggle icon class `.nj-toggle__icon-dm` to `.nj-toggle__icon`
- To correctly disable a `nj-toggle` you will need to add class `.nj-toggle--disabled` in addition of having property
on child input
### 🐛 Fixed
###### [AVATAR]
- [A11Y] Add text alternatives to `nj-avatar` (user name, status, number of notifications)
###### [AVATAR LIST]
- [A11Y] Make avatar list "show more" a `button`
###### [BUTTON]
- Fix button disabled state not applied on click
###### [CHECKBOX]
- [A11Y] Add `aria-invalid` and `aria-describedby` when needed on `nj-checkbox` to link error messages
###### [MODAL]
- [A11Y] Fix `nj-modal` focus management (trap focus inside the modal and refocus trigger element when the modal is
closed)
###### [PAGINATION]
- [A11Y] Fix semantic of `nj-pagination` and display focus ring on active item
###### [PROGRESS]
- update `nj-progress` markup to include accessible label
###### [RADIO]
- [A11Y] Update markup structure of `nj-radio-group` with `fieldset`, `legend` and `span` for error message if needed
- [A11Y] Link label and input with `for` and `id` attributes on `nj-radio`
###### [TAB]
- [A11Y] Fix keyboard events and semantic on `nj-tab`
###### [TAG]
- [A11Y] Fix keyboard events and semantic on `nj-tab`
###### [TOGGLE]
- [A11Y] Link label to input in `nj-toggle`, add `switch` role and better handle icons.
###### [TOOLTIP]
- [A11Y] Describe `nj-tooltip` host element with `aria-describedby`
### 👎 Deprecated
###### [REBOOT.CSS]
- Deprecate `reboot.css`,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
###### [ALERT]
- `nj-alert` is deprecated. You should use `nj-inline-message` or `nj-toast` instead
###### [FORMS]
- All underlined forms are deprecated, you should use new `nj-form-item`
###### [SWITCH]
- `nj-switch` is deprecated. You should use `nj-segmented-control` instead
###### [UTILS]
- Deprecate component `utils`, utils will no longer be maintained and are available in
package `@engie-group/fluid-4-deprecated`
- Remove deprecated `globals` from `globals/scss`, move them to `@engie-group/fluid-4-deprecated` and replace all
usages in code with tokens from `@engie-group/fluid-design-tokens`
- Remove `_color-dark.scss`
- Remove `_spacing.scss`
- Remove `_typography.scss`
- Remove `_motion.scss`
- Remove `_colors.scss`
- Remove unused utils from `_util.scss`
- Remove `tokens/color.scss`
### ❌ Removed
##### ⚠️ Breaking changes
###### [GLOBAL]
- remove webComponent initialization
###### [REBOOT.CSS]
- Reboot.css has been moved to another package
- remove `<a>` styles from `reboot.css`
###### [AVATAR]
-`nj-avatar`:
- Remove `nj-avatar--xs` size
- Remove right margin on `avatar`
###### [BADGE]
- `nj-badge`: remove color variants
- Remove right margin on not only child `nj-badge`
###### [BUTTON]
- remove classes `.nj-btn--outline`, `.nj-btn--ghost`,`.nj-btn--warning`, `.nj-btn--success`
, `.nj-btn--error`, `.nj-btn--block`, `.nj-btn--alone`, `.nj-btn--icon-before` and `.nj-btn--icon-after` (It is
recommended to place icons
before text)
###### [CHECKBOX]
- `nj-checkbox`: remove variants `.has-warning` and `.has-success`
###### [FAB]
- Remove variants `.nj-fab--success` and `.nj-fab--warning`, `.nj-fab--danger`
###### [RADIO]
- `nj-radio` Remove variants `.has-warning` and `.has-success`
- ⚠️ Breaking changes `nj-radio`: remove variants `.has-warning` and `.has-success`
- ⚠️ Breaking changes `nj-toggle` :
- Rename toggle icon class `.nj-toggle__icon-dm` to `.nj-toggle__icon`
- Remove possibility to have one label before and one after the toggle. Toggles now only have one label which is
placed after the toggle
- To correctly disable a `nj-toggle` you will need to add class `.nj-toggle--disabled` in addition of having
property
on child input
###### [TOGGLE]
- `nj-toggle` theme colors removed (`nj-toggle--primary`, `nj-toggle--success`, `nj-toggle--warning`
, `nj-toggle--danger`, `nj-toggle--light`)
- `nj-toggle` deprecation of the utility classes (`mr-1`, `ml-1`) on label. Replaced with flex and gap behaviour.
- Remove possibility to have one label before and one after the toggle. Toggles now only have one label which is
placed after the toggle
## 📦 v5.0.0 FOR THOSE MOVING FROM RC2 - 2023-03-02
### 🚀 Added
- Added single component export in Javascript, we now have two ways to import
```javascript
// ====> Present before
import NJ from '@engie-group/fluid-design-system';
// If we want to use Alert for e.g
NJ.Alert.init();
// ====> Added
import { Alert } from '@engie-group/fluid-design-system';
// If we want to use Alert for e.g
Alert.init();
```
- [A11Y] `nj-form-item` Warning icon is now added on subscript labels for forms in error state
### 🖍 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..
- Apply radius tokens to all components
- Make link easier to interact with by adding some padding
- Always display all options when not filtering field in `nj-autocomplete-input`
##### ⚠️ Breaking changes
- 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
- `nj-card` image `nj-card__img` should now be wrapped in div `nj-card__img-wrapper`
- `nj-avatar` with pictures should now have modifier `.nj-avatar--picture` like so
```html
<a href="#" class="nj-avatar nj-avatar--picture">
<img class="nj-avatar__picture" src="source" alt="Customer" />
</a>
```
- `nj-bullet` doesn't take same variants as before,
```html
Before:
<div class="nj-bullet nj-bullet--white"></div>
<div class="nj-bullet nj-bullet--blue-corporate"></div>
<div class="nj-bullet nj-bullet--blue-allports"></div>
<div class="nj-bullet nj-bullet--blue-venice"></div>
<div class="nj-bullet nj-bullet--green-java"></div>
<div class="nj-bullet nj-bullet--green-pine"></div>
<div class="nj-bullet nj-bullet--green"></div>
<div class="nj-bullet nj-bullet--orange-crusta"></div>
<div class="nj-bullet nj-bullet--orange"></div>
<div class="nj-bullet nj-bullet--red-mandy"></div>
<div class="nj-bullet nj-bullet--red"></div>
<div class="nj-bullet nj-bullet--blue-bigstone"></div>
<div class="nj-bullet nj-bullet--blue-rhino"></div>
<div class="nj-bullet nj-bullet--green-fun"></div>
<div class="nj-bullet nj-bullet--green-riogrande"></div>
<div class="nj-bullet nj-bullet--yellow"></div>
<div class="nj-bullet nj-bullet--yellow-bright-sun"