`) to display a visible label and status text above the progress bar
- Add `nj-progress--{variant}` modifier to set the bar color (`information`, `success`, `error`)
- Add `nj-progress--subscript-{variant}` modifier to set the subscript color and icon (`information`, `success`, `error`)
```html
` for the `nj-inline-message__body` element:
```html
Message description
Message description
```
- Remove the title, the inline-message now only accepts a content (can be multiline, with some bold elements etc ...). You can use the new `nj-heading` and `nj-text` components to style it however you want.
```html
Title error Message
Message description
```
### π Added
###### [INLINE-MESSAGE]
- Add a new `action` element, in which you can specify an action (for example, a link "Learn more" or "Undo action"):
```html
```
- You can also specify the action placement through the `nj-inline-message--action-placement-right` modifier:
```html
```
### π Fixed
###### [STATUS-INDICATOR]
- Update status indicator sizes to account for borders. Status indicators sizes are now 2px smaller:
- `sm`: 14px -> 12px,
- `md`: 18px -> 16px,
- `lg`: 26px -> 24px
## π¦ 6.0.0-next.1 - 2024-10-07
### π οΈ Maintained
- Update codebase with last current version
## π¦ 6.0.0-next.0 - 2024-10-04
### π Added
###### [HEADING]
- Added a new `nj-heading` component to the design system
`nj-heading` 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.
```html
Hello World
```
###### [TEXT]
- Added a new `nj-text` component to the design system
`nj-text` 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.
```html
Hello World
```
## π¦ 5.18.2 - 2025-11-13
### π Fixed
###### [TAB]
- Fix `font-family` for `Tab` component to match the design specifications.
### π οΈ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.13.0
## π¦ 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
...
...
```
## π¦ 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
```
### π 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
```
### π 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
```
### π οΈ 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
```
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
tag
check
Remove tag XXX
close
tag
check
Remove tag XXX
close
```
### π 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
... ->
...
... ->
```
###### [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
Header
expand_more
Fatalis advena absolute promissios rumor est.
```
###### [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
Basic checkbox
```
### π 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.com/FluidDesignSystem/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
==>
```
###### [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
```
###### [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: `
* ` (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
Checkbox label
```
## π¦ 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
outlined_flag
badge with icon
```
###### [ICON]
- Add new size `nj-icon-material--xs`
### π Fixed
###### [AUTOCOMPLETE]
- Fix issue [#900](https://github.com/FluidDesignSystem/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.com/FluidDesignSystem/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.com/FluidDesignSystem/fluid-design-system/issues/791),
add possibility to load suggestion dynamically after component loaded
###### [CARD]
- Fix issue [#875](https://github.com/FluidDesignSystem/fluid-design-system/issues/875).
Card gradient bottom border is now visible again.
###### [FORM ITEM]
- Fix issue [#873](https://github.com/FluidDesignSystem/fluid-design-system/issues/873).
The placeholder in the form item is now correctly hidden in Firefox.
###### [ICON]
- Fix issue [#846](https://github.com/FluidDesignSystem/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.com/FluidDesignSystem/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.com/FluidDesignSystem/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.com/FluidDesignSystem/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.com/FluidDesignSystem/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.com/FluidDesignSystem/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
```
###### [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
```
- 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.com/FluidDesignSystem/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.com/FluidDesignSystem/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](
###### [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
```
###### [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:
After :
```
###### [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
```
After:
```html
```
###### [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 `` 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
```
- `nj-bullet` doesn't take same variants as before,
```html
Before:
After :
```
- Deprecate component `utils`, utils will no longer be maintained and are available in
package `@engie-group/fluid-4-deprecated`
- 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
- Rename `v5-autocomplete` to `autocomplete-input`
- Rename `v5-select` to `select-input`
- 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`
- 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
- Remove all utils from `nj-footer`,
Before:
```html
```
After:
```html
```
- Remove all utils from `nj-header`, you know 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`
### π Fixed
- Fix issue where checkbox without label doesn't have correct
outline [#731](https://github.com/FluidDesignSystem/fluid-design-system/issues/731)
- Fix segmented control not having correct active background positionner whene first element is selected
- Fix missing export of Segmented Control in `fluid-design-system.ts`
- [A11Y] Remove `aria-label` on close button in `nj-modal`
- [A11Y] Use semantic `` tags for hidden content in `nj-avatar`
- [A11Y] Make ellipsis icon accessible in `nj-pagination`
- [A11Y] Add space before external notice in `nj-link`
- [A11Y] Add labels to buttons in icon-only version of `nj-segmented-control`
- Fix issue on cards
cover [#735](https://github.com/FluidDesignSystem/fluid-design-system/issues/735)
- [A11Y] Add `required` attribute on fields in `nj-form`
- [A11Y] Separators don't use `content` CSS property anymore in `nj-breadcrumb`
- [A11Y] Use `span` for `nj-spinner` when inside a button
- [A11Y] Improve `nj-card` stories markup: empty `alt` on decorative images, remove unnecessary `role` attributes and
use semantic `p` tags for content.
- Display option's label instead of value inside input in `nj-custom-select`
- [A11Y] Improve accessibility of `nj-autocomplete-input`
### π Changed
- β οΈBreaking change `icon-engie`:
- Change `nj-icon` default color from Engie's gradient to ultramarine-900
- Change `nj-icon--blue-corporate` name to `nj-icon--brand`
- Change `nj-icon--white` name to `nj-icon--inverse`
## π¦ v5.0.0-rc.2 - 2022-12-08
### π Added
- Add size `inherit` for icon that inherit font-size from parent
- 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
- Add class `nj-toggle--inherit` to make toggle label color inherit from parent, fixes
issue [#688](
- Add new `onchange` event on `nj-autocomplete` and return an object containing name and
value: `{ name: string, value: string }`
- [A11Y] Add `data-*` attributes on `nj-form-item--password` for visibility button label and notice
- [A11Y] Dynamically toggle visibility button label and `aria-pressed` attribute and live region message
### π Changed
- Fix card cover overlay width
- Update `list` item icon color based on state (neutral -> gray, hover | active -> brand)
- [A11Y] Required form items asterisk are not handle by CSS anymore. It should be added inside the label
- [A11Y] Change `nj-badge` semantic from `div` to `p`
- [A11Y] Use `nj-icon-btn` for password button and add live region notice in `nj-form-item--password`
- [A11Y] Remove unnecessary `tabindex` on `nj-segmented-control` buttons and force visible focus
##### β οΈ Breaking changes
- β οΈBreaking change `icon`:
- `.material-icons` now inherits color by default
- Removed 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}`
- β οΈBreaking change: icons used in the `list` now need the `nj-list-group__item-icon` class to behave with the right
color.
- [A11Y] β οΈBreaking change: add `aria-label` on tablist element and `tabindex` and `role` on tabpanel elements
- [A11Y] β οΈBreaking change: change structure of `nj-tag` and order of its children
### π Fixed
- [A11Y] Add `aria-invalid` and `aria-describedby` when needed on `select` element in `nj-form-item` and `id` on
error/hint messages
- [A11Y] Add `aria-invalid` and `aria-describedby` when needed on `nj-checkbox` to link error messages
- [A11Y] Add `aria-expanded` to `nj-fab` and accessibly hide sub buttons when menu is closed
- [A11Y] Fix `nj-status-indicator` semantic structure
- [A11Y] Link label to input in `nj-toggle`, add `switch` role and better handle icons.
- [A11Y] Fix `nj-modal` focus management (trap focus inside the modal and refocus trigger element when the modal is
closed)
- [A11Y] Link label and input with `for` and `id` attributes on `nj-radio`
- [A11Y] Update markup structure of `nj-radio-group` with `fieldset`, `legend` and `span` for error message if needed
- [A11Y] Add text alternatives to `nj-avatar` (user name, status, number of notifications)
- [A11Y] Make avatar list "show more" a `button`
- [A11Y] Fix semantic of `nj-pagination` and display focus ring on active item
- [A11Y] Fix semantic in `nj-footer` with `contentinfo` role for wrapper element, `p` tag for slogan and `h2` tag for
headings
- [A11Y] Add `aria-live` and `aria-atomic` to `nj-spinner` wrapper element and update semantic of inner element
- [A11Y] Change DOM order and add description to close button in `nj-toast` and make `nj-toast-container` a live region
- [A11Y] Fix keyboard events and semantic on `nj-tab`
- [A11Y] Fix `nj-tag` semantic structure
- [A11Y] Describe `nj-tooltip` host element with `aria-describedby`
- [A11Y] β οΈBreaking change: fix `nj-autocomplete` semantic structure and keyboard navigation.
##### β οΈ Breaking changes
- [A11Y] β οΈBreaking change: update `nj-progress` markup to include accessible label
- [A11Y] β οΈBreaking change: fix `nj-custom-select` semantic structure and keyboard navigation.
## π¦ v5.0.0-rc.1 - 2022-10-18
### π Added
- Add new status `info` `.nj-status-indicator--info` for `.nj-status-indicator`
- Add new component `nj-inline-message`
- Add variant `inverse` `.nj-link--inverse` and `high-contrast` `.nj-link--high-contrast` to `nj-link`
- Add new size `xxs` for `nj-spinner`
- Add new components `nj-segmented-control` and `nj-segmented-control-btn`
- Add new `density` to `nj-tabs`
### π Changed
- Use new spacing tokens
- Update `nj-modal`:
- new color tokens
- now uses the `nj-icon-button`
- new html structure
- β οΈBreaking change: remove old `.nj-close` icon, replace it with the new `nj-icon-button` with
the `.nj-modal__close`
div
- Update `nj-tag` with new UI:
- Add possibility to pass icon to tag
- Add different sizes `sm, md(default), lg`
- Replace `nj-tag__icon` with button icon with class `nj-tag__close`
- Class `nj-tag__icon` is now set to the tag 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--ultramarine,
.nj-tag--yellow,
.nj-tag--purple
```
- All tags are now filled, remove classes `.nj-tag--filled-VARIANT`
- Remove margin on tags
- Update `nj-progress`
- v5 color tokens
- Add the `nj-progress--has-transition` modifier
- Update `nj-card` with new colors and ui
- Update `nj-spinner`:
- new color tokens
- β οΈBreaking change:
- `light` variant has been renamed `inverse` icon
- `gray` variant has been renamed `grey` icon
- Update `nj-tabs` with new colors and ui
- Update `nj-footer` with new colors and ui
- Update `nj-header` with new background colors
- Update `nj-table` with new colors
- Update `nj-pagination` with new colors and ui
- Update `nj-fab` with new colors and ui
- Update `nj-slider` with new colors and ui
- Update `nj-sidebar` with new color tokens
- Update `nj-navbar` with new color tokens
### π Deprecated
- β οΈDeprecation: `nj-switch` is deprecated. You should use `nj-segmentedControl` instead
### β Removed
- β οΈBreaking changes: remove `nj-progress` color variants classes
- β οΈBreaking changes: remove `` styles from `reboot.css`
- β οΈBreaking changes `nj-footer` : remove `.nj-footer__link` class it should be replaced
by `nj-link nj-link--contextual`
- β οΈBreaking changes `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`
- β οΈ Breaking changes `nj-fab`: remove variants `.nj-fab--success` and `.nj-fab--warning`, `.nj-fab--danger`
## π¦ v5.0.0-beta.1 - 2022-09-30
### π Added
- 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)
- Add icon button
- Add new `nj-avatar--xl` size and `nj-avatar--initials`, `nj-avatar--picture` modifiers
- Add new `.nj-checkbox--no-animation` class to `.nj-checkbox` to toggle animation on and off
- Add new variant `.nj-tooltip--inverse` for `.nj-tooltip` usable by adding attribute `data-variant='inverse'`
### π Changed
- Update `nj-avatar` :
-### -οΏ½ Changed
- Update html structure (see below the removed section - avatar breaking changes)
- To pass an image, add `` and `
` elements from the structure
to
simplify it
- β οΈ Breaking changes `nj-checkbox`: 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
## π¦ v5.0.0-beta.0 - 2022-09-13
### π Added
- Add new `nj-avatar-group` density (compact)
- Add new `nj-status-indicator` component (in replacement of `bullet`)
### π Changed
- Apply new color tokens and refresh UI for `nj-form-item` and `nj-list`
- Replace `nj-bullet` by `nj-status-indicator` in the `nj-avatar` component
- Replace all radius to use tokens and be compliant with new UI guidelines
- Replace all colors to use new primary
- Replace $spacer sass variable with css variables
### β Removed
- Remove right margin on `avatar`
- Remove right margin on not only child `nj-badge`
- β οΈ Breaking changes remove utils classes `.rounded`
- Remove classes:
`.rounded`, `.rounded--sm`, `.rounded--lg`, `.rounded-top`, `.rounded-bottom`, `.rounded-left`, `.rounded-right`
- β οΈ Breaking changes remove variants from link `.nj-link`
- Remove classes:
`.nj-link--primary`,`.nj-link--success`,`.nj-link--danger`,`.nj-link--warning`, `.nj-link--light`
## π¦ v5.0.0-alpha.5 - 2022-08-03
### π Added
- Add toast scss import to `fluid-design-system.scss`
- Add highlight css class
### π Changed
- Update sass and fix breaking changes accordingly
- Update dependencies to work with Node latest LTS v16.16 and npm 8.15
- Update form-item to support custom list appended anywhere on the dom
### π Fixed
- Fix floating form labels being misplaced
- Fix deprecated select css overriding all selects
- Fix deprecated textarea default selector to only select `textarea` with `.nj-form-control` class as
follows `textarea.nj-form-control`
## π¦ v5.0.0-alpha.4 - 2022-07-19
### π Added
- Add new `nj-toast`
- Add new `nj-toast__container` (default with a 480px width and its full-width variation)
- Add new `nj-link--md`
- Add new autocomplete
### π Changed
- `nj-link` now inherits its parent font-size
- `btn--lg` is now applying `var(--nj-font-weight-bold)`
- Change CSS variables naming conventions from `--var-margin` and `--var-padding` to `--var-mar` and `--var-pad` for all
components
## π¦ v4.10.1 - 2022-07-06
### π Added
- New Nuclear icon
## π¦ v5.0.0-alpha.3 - 2022-05-17
### π Added
- Add new select with native and custom variants
### π Changed
- Rename form-control folder and class to form-item
- `nj-toggle` new size: `nj-toggle--lg`
- `nj-toggle` minor changes: animation
### β Removed
- β οΈ Breaking changes `nj-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.
## π¦ v4.10.0 - 2022-05-16
### π Changed
- Remove class `.nj-radio--inline`, `.nj-radio-group` now handles display of radios, it is by default set to column you
can toggle row display by adding class `.nj-radio-group--row`
- Remove margin from `.nj-radio` spacing is now handled by parent class `.nj-radio-group`
### π Fixed
- Fix radio not working properly with custom content
- Fix radio focus not showing
## π¦ v5.0.0-alpha.2 - 2022-04-22
### π Fixed
- Add dark theme for ghost button for button
- Set correct font-size and line-height for form-item
## π¦ v5.0.0-alpha.1 - 2022-04-15
### π Added
- Add new `nj-form-item`
- Add new `password` component
### π Fixed
- Fix button disabled state not applied on click
## π¦ v4.9.1 - 2022-04-15
### π Fixed
- Changed Badge margins to be used only when multiple badges are used together
## π¦ v4.9.0 - 2022-02-25
### π Fixed
- Fix checkbox styles not allowing custom content as label
- Add z-index property on the Autocomplete component
### π Changed
- Add support for fab menu with size sm fab
- Add `data-appendTo` option to modal to allow rendering the modal in another element. `data-appendTo` takes a string
value which is a selector.
Ex:
```html
```
## π¦ v4.8.1 - 2022-02-16
### π Fixed
- Fix issue [#523](https://github.com/FluidDesignSystem/fluid-design-system/issues/523),
add robustness to modal methods by checking if element is defined before doing any action
## π¦ v5.0.0-alpha.0 - 2022-02-04
- Update button
β οΈ Breaking changes
- `light` variant (`.nj-btn--light` `.nj-btn--ouline-light`) has been removed and is now replaced
by `.nj-btn--inverse` class
- `.nj-btn--tertiary` has been renamed `.nj-btn--ghost`
- Variants are now `danger`, `warning`, `success`. `light` and `primary` are deprecated, `primary` being now default
- Variants have now classes of their own `nj-btn--danger`, `nj-btn--warning` and `nj-btn--success` and can be set
for
default and outline buttons only
ex: `.nj-btn nj-btn--danger`, `.nj-btn-outline nj-btn--danger`
- remove webComponent initialization
- replace web-animation-js dependency for global file
- lib/auto-init is included to lib/fluid-design-system.js
- lib/fluid-design-system.js automatically initiate components
## π¦ v4.8.0 - 2022-02-03
### π Changed
- Breadcrumb update
## π¦ v4.7.0 - 2021-12-16
### π Fixed
- Input in error keep the border colored focused or not
### π Added
- Bullet component
- Add a parameter data-close-on-link-click="true" in Header component to close the menu after clicking a nav-link or
menu-link
- Fire events: show, shown, hide, hidden for modal. Can be used like this: EVENT_NAME.nj.modal
```typescript
document.querySelector('exampleModal').addEventListener('shown.nj.modal', () => {
console.log('shown');
});
```
### π Changed
- Rework modal component : confirmation modal and information modal, modified padding
- Avatar update : new size (xs) and integration with badge and bullet components, avatar group basic layout
- Build: Fix linting scripts not working on windows
- Update to webpack 5 and Typescipt 4
- Update link component and add new options
- Badge update
## π¦ v4.6.3 - 2021-10-05
### π Added
- Fix packages version
- Fix issue with abstract forms accessing undefined element
## π¦ v4.6.2 - 2021-09-01
### π Added
- Tag differentiate close adding closeAndDestroy
### π Changed
- Alert close and closeAndDestroy function
## π¦ v4.6.1 - 2021-07-12
### π Fixed
- Test snapshot persistence
## π¦ v4.6.0 - 2021-06-03
### π Added
- Button focus line update
- Tertiary button
- Icon link hover and active background
### π Changed
- Engie Icons update
### π Fixed
- Autocomplete dispose improvement
- Autocomplete add padding top for form-group
- Padding update for checkbox and radio
## π¦ v4.5.0 - 2021-05-04
### π Added
- classes for responsive font: t-base-sm t-tera-lg... t-{font-size}-{breakpoint}
### π Fixed
- svg color inside buttons
## π¦ v4.4.2 - 2021-04-08
### π Fixed
- Fix ts config to copy JS imports to lib-esm
- add animation.js ts module definition to lib
## π¦ v4.4.1 - 2021-04-02
### π Fixed
- Navbar javascript
## π¦ v4.4.0 - 2021-03-22
### π Added
- nj-radio-group\_\_row class
- auto-init.js do not need root id (but it still works)
- window.NJ.config.rootElementId global variable to configure auto-init root id
- Sidebar close on click out and escape
- Sidebar prop data-close-on-interact-out default to true
### π Fixed
- auto-init improvements
- data-toggle events duplication
## π¦ v4.3.3 - 2021-03-03
### π Fixed
- revert reboot token path
## π¦ v4.3.2 - 2021-03-01
### π Fixed
- reboot token path to avoid red underline
- material icons color to css var
- Tag dispose function
- header z-index and mobile bug
## π¦ v4.3.1 - 2021-02-15
### π Changed
- Modal css adjustments
- Modal has centered css modifier .nj-modal--vertical-centered
### π Fixed
- auto-init bug
## π¦ v4.3.0 - 2021-02-02
### π Added
- auto-init.js handles component destroy on removal
- Possible to add placeholder attribute with input label floating
- Components unit test available from tests folder
### π Fixed
- auto-init.js init all components including tooltips and bug
- Placeholder input focus color changed to `--nj-color-text-body`
## π¦ v4.2.2 - 2020-12-04
### π Changed
- Alert dispose function removes events
## π¦ v4.2.1 - 2020-11-10
### π Fixed
- Slider dispose function removes events
- Dropdown arrow visibility
- auto-init.js destroys components on remove
## π¦ v4.2.0 - 2020.11.10
### π Added
- new tokens: space, font weight, icon size, button height
- fluid-design-tokens package dependency
### π Changed
- `reboot.scss` import `tokens.scss` (sass) from fluid-design-tokens package
- css 4 variable `--nj-size-navbar-height*` renamed to `--nj-size-height-navbar-*`
### β Removed
- remove `/tokens`folder
## π¦ v4.1.1 - 2020.11.03
### π Fixed
- Add Toggle disabled
- Navbar search focusing and closing
- Card Cover touch hover / link overlap
## π¦ v4.1.0 - 2020.10.19
### π Added
- Tab component
### π Fixed
- Fix underline effect on multiline for the link component
- Change `red-mandy`,`violet`, `violet-eggplant` color token value
- reset `a` tag outline to default behavior
## π¦ v4.0.3 - 2020.09.28
### π Fixed
- restore `a` tag outline focus for accessibility
## π¦ v4.0.2 - 2020.08.27
### π Fixed
- Change `yellow` and `yellow-bright-sun` color token value
- Fix auto init for autocomplete web component version 4.0.1
## π¦ v4.0.1 - 2020.08.13
### π Fixed
- add `tokens` folder to fluid node package
## π¦ v4.0.0 - 2020.08.12
### π Added
- add Old Browser Support build `lib/fluid-design-system-obs.js` to support IE11 browser
- Input autocomplete search and filter
- `reboot.scss` now import `tokens.css` variables instead of `_vars.scss`
- `Header` and `Sidebar` single component javascript
- add `auto-init.js`: automatic initialization of components regardless framework
### π Changed
- renamed global css4 variables to CTI
tokens [See our dedicated page](https://www.engie.design/fluid-design-system/getting-started/dev-lib-migration/)
- `_vars.scss` does not exist anymore, replaced by `tokens.css`
### π Fixed
- Slider float value create a gap between track line and track point
## π¦ v4.0.0-beta.3 - 2020.07.30
### π Added
- Input autocomplete search and filter
### π Changed
- Prefix all css4 variables with `nj`
- Renamed global variables from css4 to css4
token [See our dedicated page](https://www.engie.design/fluid-design-system/getting-started/dev-lib-migration/)
### β Removed
- `_shadow-dark.scss` `$shadows` `$shadows-X-dp`
### π Fixed
- Add missing `px` in shadows value for dark mode
## π¦ v4.0.0-beta.2 - 2020.06.30
### π Added
- `--disabled-background` variable
- Lib update: Form component offers access to its sub components PasswordInput, TextInput...
### π Changed
- Tag: Wired hover color
- Checkbox Radio Tag Disabled color
- move `$prefix: "nj"` variable from `_token.scss` to `_color.scss`
- remove `@nj-form-color` mixin third parameter
- renamed global variables from sass to css4:
- `$zindex-dropdown` to `--zindex-dropdown`
- `$zindex-sticky` to `--zindex-sticky`
- `$zindex-fixed` to `--zindex-fixed`
- `$zindex-modal-backdrop` to `--zindex-modal-backdrop`
- `$zindex-modal` to `--zindex-modal`
- `$zindex-popover` to `--zindex-popover`
- `$zindex-tooltip` to `--zindex-tooltip`
- `$border-width` to `--border-width`
- `$border-radius` to `--border-radius`
- `$navbar-height` to `--navbar-height`
- `$navbar-height-sm` to `--navbar-height-sm`
### π Fixed
- Fab: dial light mode background color
- Slider: edge 18 now works properly light and dark
### β Removed
- `_token.scss`
- Remove token global
variables [See our dedicated page](https://www.engie.design/fluid-design-system/getting-started/dev-lib-migration/)
## π¦ v4.0.0-beta.1 - 2020.06.15
### π Added
- Header component
### π Changed
- Progress: Change css (no more before selector)
### π Fixed
- Sidebar: fix border disappears for non dark mode users
## π¦ v4.0.0-beta.0 - 2020.06.04
### π Added
- Add `--text-on-gradient-primary` variable
- Background color css util class
_`.bg-gray-light`
_`.bg-gray-dark`
- Text color css util class
_`.text-on-x` (x=color name or theme name)
_`.text-gray-light` \*`.text-gray-dark`
- Opacity of black
`--black-400` and `$black-400`
`--black-600` and `$black-600`
`--black-700` and `$black-700`
`--black-900` and `$black-800`
- Opacity of white
`--white-200` and `$white-200`
`--white-400` and `$white-400`
`--white-600` and `$white-600`
`--white-800` and `$white-800`
`--white-900` and `$white-900`
- Toggle : A specific version for dark mode toggle has been added
### π Changed
- `--input-placeholder-color-hover` `--input-placeholder-color` color update
- disabled: udpate disabled color for light and dark
- Card: update .nj-card--border with gradient border of 7 pixels height
- Tag: update cross color for dark and light and remove unnecessary background
- Toggle: New design and css, no more JS.
- Add `vars.scss` variables: `--color-gradient-primary`
### β Removed
- Material icons: remove opacity on white version
### π Fixed
- Card cover: fix arrow color
- Button: fix icon color on button with icon only
## π¦ v4.0.0-alpha.0 - 2020.05.15
### π Added
We introduce CSS4 variables and a specific attribute to handle the dark mode.
- Add `data-theme="dark"` to use on the body tag, or on a parent tag to switch to the css4 dark variables
- Add `color-dark.scss` for the dark palette color
- Add `vars.scss` containing all css4 variables and tokens
- `--body-text-color`
- `--body-text-color-inverted`
- `--body-background-color`
- `--text-on-background`
- `--text-on-light`
- `--text-on-x` (x=color name or theme name)
- `--components-background-color`
- `--components-background-color-active`
- `--label-color`
- `--label-color-focus`
- `--label-color-inner-focus`
- `--input-border-color`
- `--input-border-color-disabled`
- `--input-placeholder-color`
- `--input-placeholder-color-hover`
- `--input-placeholder-color-focus`
- `--input-placeholder-color-disabled`
- `--input-icon-color`
- `--hr-color`
- `--text-on-disabled`
- `--disabled-color`
- `--modal-backdrop-color`
- Add alpha black & white variables `--black-x` and `--white-x` (x=100-900)
- Fab, DropDown, Checkbox, Modal, Slider, List, Form, NavBar, Button, SideBar, Footer: add local dark mode css variable
- New lib build to endorse browser requirement
- New lib-esm modules installation needed web-animations-js
- add classes undependable from dark/light mode
_`.text-gray-light-x` (x=100-900)
_`.text-gray-dark-x`
_`.bg-gray-dark-x`
_`.bg-gray-light-x`
- Background color css util class `.bg-primary` `.bg-success` `.bg-warning` `.bg-light`
- Text color css util class `.text-primary` `.text-success` `.text-warning` `.text-light`
and `.text-on-primary` `.text-on-success` `.text-on-warning` `.text-on-light`
### π Changed
Components are now using CSS4 variables while it is necessary for the dark mode. Classes color react to dark mode:
background utils, text utils.
- Alert: remove round border and reset color toggle for cross
- Avatar: corrections to comply with guidelines
- Badges: add black border, resolve font color problem
- Breadcrumb: remove transition when switching to dark mode
- Card: update title and paragraph color
- Tag: fix style and conform to guidelines
### β Removed
- List of SCSS variables removed
- `$white-corporate`
- `$dark`
- `$caret-with`
- Remove yiq function for Badge and Tag components
- Navbar: remove the blue version
- Tooltip: remove `$tooltip-bg` and `$tooltip-arrow-color`
- Switch: remove `$switch-slider-bg` `$switch-slider-bg-disabled` `$switch-checked-part-color`
### π Fixed
- fix browser requirement version
## π¦ v3.4.0 - 2020.04.23
### π Added
- New component: Stamp (Act with ENGIE)
- Button: you can add an icon before the text now
- Fluid icons: new white and blue-corporate color variation
- Pagination: add `.nj-pagination__link--prev` and `.nj-pagination__link--next` css class on previous and next link
- Tag: add a new filled version
- Spinner: new gray color variation
- Css util class `.bg-gray-x` (x=100-900) is now available
### π Changed
- Avatar: add status, change colors of default avatar, better badge position
- Badge: add 1px white border
- Button:
- Update size of buttons and font-size
- Update `.nj-btn--outline-light` button hover and focus status
- Card: Two new versions
- Horizontal card
- Cover card
- Fluid icons: ENGIE gradient is now the default version
- **Footer has been refactored to match with engie.com**
- Pagination: no more background on previous and next items
- Sidebar: fix css selector when `nj-sidebar` tag is used
- Switch: update disabled background and color
- Tag: remove hover effect on a not clickable tag
### β Removed
- **Divider component has been removed**
- Avatar: remove `.nj-avatar-bordered` and `.nj-avatar-bordered-x` class for color variation
- Components variation color won't use `blue-engie` anymore. **`blue-engie` should be only used for ENGIE logo**
- Several CSS classes have been automatically deleted due to the removal of `blue-engie` in the color palette
- `.nj-avatar--bordered-blue-engie`
- `.nj-badge--blue-engie`
- `.md--blue-engie`
- `.nj-progress--blue-engie`
- `.nj-tag--blue-engie`
- `.text-blue-engie`
- `.bg-blue-engie`
- Fluid icons: remove border, circle and color variation
## π¦ 3.3.2 - 2020.04.02
### π Fixed
- Fix npm package publication
## π¦ 3.3.1 - 2020.04.02
### π Fixed
- Import sidebar component in fluid-design-system TS and SCSS file
- Minor the z-index of the sidebar component
## π¦ 3.3.0 - 2020.03.30
### π Added
- New component: Sidebar
### π Changed
- Add 1px transparent to plain buttons to be vertically aligned with outline buttons
### β Removed
- Remove margin top and bot on `.nj-list-group`
## π¦ 3.2.0 - 2020.03.11
### π Added
- Icon has a new modifier `.nj-icon--gradient`
### π Changed
- The ENGIE gradient has an angle of 135 degree
- Alert has no more border-radius
- Button has no more border-radius
- Card has no more border-radius
- Dropdown has no more border-radius
- Modal has no more border-radius
- Pagination has no more border-radius
- Tooltip has no more border-radius
## π¦ 3.1.0 - 2019.12.20
### π Added
- **Components can be dynamically injected into the DOM with Web Component approach, making it easier to use the library
within popular frameworks and libraries, such as Angular, React or Vue.js**
- Share SCSS color variables with JavaScript (**Design Tokens**)
### π Fixed
- Compatibility with browsers that do not support the `:scope` CSS4 selector
- Remove background when form elements are focused
- [Dropdown] Missing `onchange` event to retrieve the selected value
## π¦ 3.0.1 - 2019.12.13
### π Added
- ENGIE Design System website to the package metadata
### π Fixed
- [Toggle] Wrong css property value (uncompiled SASS function)
## π¦ 3.0.0 - 2019.12.04
### π Fixed
- The components did not have their public API when the entire library was imported
- The Modal component was not initialized when using the `Autoinit()` method of the library
## π¦ 3.0.0-beta.0 - 2019.12.04
### π Added
- Engagement message once the package has been installed
### π Changed
- Popper.js is no more required to use the Tooltip component
- Rename body-and-reset.scss file to reboot.scss
### π Fixed
- Add vendor prefixes to CSS rules on build
- Missing `code`, `pre` and `kbd` styles (import into `body-and-reset.scss`)
### β Removed
Several classes, SCSS mixins and variables have been removed:
- Class
- .nj-img-fluid
- Mixin
- size()
- shadow()
- border-radius()
- Variable
- Table component variables
- Tag component variables
## π¦ 3.0.0-alpha.4 - 2019.12.02
### π Added
- Reusable components with an easily unique import:
- Floating Action Button
- Progress
- Add three new colors (`orange-crusta`, `red-mandy` and `yellow-bright-sun`) for the Progress component
- TypeScript declaration files (\*.d.ts)
### π Changed
- Standardized SCSS variable names, by removing the `nj-` prefix
- Switch back to webpack for building scripts (instead of Rollup)
### π Fixed
- Single import of the Modal component
- Missing TypeScript definition file
- Style conflicts of icon colour between Alert component and material
## π¦ 3.0.0-alpha.3 - 2019.11.25
### π Changed
- Update README: update URLs, emphasis the npm installation step
## π¦ 3.0.0-alpha.2 - 2019.11.22
### π Added
- Reusable components with an easily unique import:
- Card
- Icon
- Slider
- Spinner
- Add three new colors (`orange-crusta`, `red-mandy` and `yellow-bright-sun`) for these components:
- Avatar
- Badge
- Icon
- Progress
- Tag
- Util `text-*` and `bg-*`
- Improve backward compatibility .scss file import
- Components assets (fonts, imagesβ¦) are build with Gulp
### π Changed
- Update the colors according to the new ENGIE identity
- Improve package description
- Cleanup of .scss files
- Update dependencies
### π Fixed
- TypeScript build directory
- Missing linters
## π¦ 3.0.0-alpha.1 - 2019.11.20
### Added
- Add Storybook to document and test UI components
- Add Contribution guide
- Add linters :
- ESLint for TypeScript component files and Vanilla JS stories
- StyleLint for SASS files
- Conventional commit for readable meaning to commit messages
### π Changed
- Replace Webpack with Rollup for TypeScript files and Gulp for style files
- Components are now written in TypeScript instead of plain JavaScript
- Refact into reusable components with an easily unique import:
- Alert
- Avatar
- Badge
- Breadcrumb
- Button
- Checkbox
- Collapse
- Divider
- Dropdown
- Floating Action Button (FAB)
- Footer
- Form
- Grid
- Link
- List group
- Modal
- Navbar
- Pagination
- Progress
- Radio
- Select
- Switch
- Table
- Tag
- Toggle
- Tooltip
- Util
### β Removed
- $gradient-secondary and $gradient-tertiary
- Several components will be added in a future version (reusable and unique import):
- Card
- Floating Action Button
- Icon
- Progress
- Slider
- Spinner
## π¦ 2.4.4 - 2019-XX-XX
### π Fixed
- Input label color now have the correct gray
- Remove v2 folder in scss folder
## π¦ 2.4.3 - 2019-11-12
### π Fixed
- Click event for password (visible icon) and search input (erase icon)
## π¦ 2.4.2 - 2019-10-29
### π Added
- Add decoration text css class utility
- Add hover behavior for the card component
## π¦ 2.4.1 - 2019-10-16
### π Fixed
- Inconsistency between the source and compiled assets of the NPM library.
## π¦ 2.4.0 - 2019-10-11
### π Added
- Single dropdown component
- New Modal component
- Spinner component
### π Changed
- Pagination buttons now have small rounded corners, instead of being entirely round
- Navbar can now be displayed as small
### π Fixed
- Fix icon color in the button component
- Fix progress bar in slider component
## π¦ 2.3.0 - 2019-06-28
### π Added
- Inputs with icon on the left and right
- Input with a search icon and a clear icon to reset the input value
- Input type password with an eye icon to reveal the password
- Components test with the Jest library
### π Changed
- The Lato font is removed as NPM dependency, now called from the HTML header
- Fix amperstand selector in form component
## π¦ 2.2.0 - 2019-06-06
### π Added
- Library is now available trough CDN assets.design.digital.engie.com
- Overflow classes utilities
### π Changed
- SCSS variables components have been prefixed with 'nj'
- Change horizontal padding value from 3rem to 2 rem for Navbar component
- Alert component width a new style
- Lato fonts is now imported as a package
## π¦ 2.1.2 - 2019-05-21
### π Fixed
- fix missing `src/js` folder and files in published package
## π¦ 2.1.1 - 2019-05-21
### π Fixed
- Fix export of stylesheets filename
## π¦ 2.1.0 - 2019-05-21
### π Added
- FAB (Floating Action Button) component with menu interaction
### π Changed
- Disabled state of input and select
- Change order of tag for the select component
- Fix a regression on the link component
- Npm setup guide (new artifactory url)
### Deprecated
- `nj-label-floating` should be replace by `nj-label-static` for the select label tag
## π¦ 2.0.3 - 2019-05-06
### π Changed
- Update footer component by adding hr tag
## π¦ 2.0.2 - 2019-04-30
### π Added
- Stretched link utility
- Add color theme to Toggle component
### π Changed
- Fix background button of list group item
- Renamed range component as slider component
- Reduce the padding of navbar on mobile
## π¦ 2.0.1 - 2019-04-18
### π Changed
- Exclude js folder when package is installed as a dependency
## π¦ 2.0.0 - 2019-04-17
### π Added
- AbstractComponent as a base component to extends for all components
- Components are now globally or individually instanciated at the bottom of the page
- Pagination component
- Gradient utility class modifier for horizontal gradient
- Text gradient mixin
- Fix blue-bigstone color value
- Progress Bar component
- List group
- Switch (new) component
- Range component
- Tooltip component
### π Changed
- Webpack export `NJ` as an umd, window, and global var
- The js components are no longer self-initialized. You must do it manually
- Fix the color in the navbar navbar
- Increase logo size in the navbar
- Change gardient variables and mixin
- New palette of colors (21 > 19)
- Gradients colors and variables updated
- Rewrite old remaining components to apply our javascript component model: Alert, Checkbox, CollapseSearchBar, Radio,
Select, Switch, Tag, Text, Textarea
- Buttons radius and focus style updated
- Footer style updated
- Switch renamed to toggle
### π Fixed
- Fix the font link by adding a scss variable $fonts-path
### β Removed
- enable-gradient variable and condition
- Flux bar component
### π¦ 1.5.6 - 2019-02-27
### π Changed
- Fix shadow issue on showcase navigation
- Fix background size on showcase homepage
### π¦ 1.5.5 - 2019-02-26
### π Added
- Mobile navigation on design system pages
### π Changed
- Images on showcase
- Navigation on showcase
- Form refactored
- Collapse refactored
- Prefix collapse class
- Fix transparent navbar
- Update sketch file
### β Removed
- Css nano rule for zindexing
- Remove useless scss file (variables, components, mixins)
### π¦ 1.5.4 - 2019-02-07
### π Changed
- Update node and npm version to fix of linters that's does not works as expected
### π¦ 1.5.3 - 2019-02-07
### π Changed
- Start algolia search only on documentation
### π¦ 1.5.2 - 2019-02-07
### π Added
- Search for the documentation
- Card component
- Table component
- New template page named Articles
- Add a dedicated Jenkinsfile to tests all the buids actions during development
### π Changed
- Fix sketch color palette url
- Change jenkins file to publish npm package on expose repository
### β Removed
- Unnecessary css file in documentation folder
### π¦ 1.5.1 - 2019-01-22
### π Added
- Page for user testing
### π Changed
- New version of sketch
- Getting started page for designers
### β Removed
- Remove jQuery from the showcase pages
### π¦ 1.5.0 - 2019-01-18
### π Added
- Js polyfills
- Xml rss file to add sketch as a library
### π Changed
- Translate checkbox, radio and switch components in vanilla js
### β Removed
- Remove bootstrap from package.json
- Remove legacy js components
- Remove nj-components-old.js generation
### π¦ 1.4.2 - 2019-01-08
### π Added
- Add checkout template
- Add sigin template
- Add cover template
### π Changed
- Change content in several pages
- Make spelling corrections
- Reduce the sketch file size (26mo -> 8mo)
- Change our core size (mega to giga and giga to tera)
### β Removed
- Remove useless screenshots for the thumbnails in page examples
### π¦ 1.4.1 - 2018-12-21
### π Changed
- Change application.min.css by application.css for prod build
### π¦ 1.4.0 - 2018-12-21
### π Added
- Add slider section in the homepage
- Add ux principles section in the experience page
- Add accessibility page
- Add methodology pdf
- Add new sketch file
- Add engie font icons
- Add alert component
### π Changed
- Change showcase pages style and pictures
- Change the form from jQuery to vanilla JS
- Change the collapse utility from jQuery to vanilla JS
- Review the documentation content pages
### β Removed
- Remove progress bar page
- Remove cards page
### π¦ 1.3.2 - 2018-12-20
### π Changed
- Fix npm version in package-lock.json
### π¦ 1.3.1 - 2018-12-20
### π Changed
- Change name of the artifact by adding the version for prod build
### π¦ 1.3.0 - 2018-12-18
### π Added
- Add webpack
- Add the tag component
- Add the navbar component
- Add the footer component
- Create showcase pages with content
- Add content into design system
### π Changed
- Change the name of font-map (based on metric now)
- Change the CI workflow thanks to Jenkinsfile
### π¦ 1.2.0 - 2018-11-26
### π Added
- Add build folder
- Add showcase pages in Jekyll
- Add commands to publish on NPM
- Add component status page
- Add Google Analytics tracking
### π Changed
- Change the build commands in package.json
- Change tree structure
- Update breadcrumb component
- Update badge component
- Update link component
- Add source files to zip file
### β Removed
- Remove the version folder for documentation
- Remove operation/customer themes
### π¦ 1.1.0 - 2018-09-28
### π Added
- Add card component
- Add navbar component
- Add a navigation to the documentation
- New examples pages with pictures
- Add sketch palette to download
- Add shades of black and white
### π Changed
- Change the tree documentation
- Rename b2c to customer
- Rename b2b to operation
- Move the assets directory to assets in site/
- Review the whole colors page documentation
### β Removed
- Remove assets/img (use base64 for svg)
- Remove assets task in package.json
### π¦ 1.0.0 - 2018-08-23
First launch of ENGIE design system and documentation