` Web Component, or rename `.nj-modal*` and sub-classes to `.nj-modal-deprecated*` to continue using legacy styles.
- **Action:**
- Update template and class names accordingly.
- Recommended: migrate to new web component for future compatibility.
### 2.5. **Tag**
- **Actionable Elements:**
- `.nj-tag__link` and `.nj-tag__button` replaced with `.nj-tag__action`.
- **Action:**
- Replace relevant classes for buttons/links inside tags.
### 2.6. **Sidebar & SidePanelLayout**
- **Sidebar:**
- Old `.nj-sidebar*` classes deprecated; use `.nj-sidebar-deprecated*` to avoid visual breaks, but migrate to updated sidebar soon.
- **SidePanelLayout:**
- `.nj-sidepanel-layout` class removed. Use standard CSS flex layouts.
### 2.7. **Menu Group**
- **Structure Change:**
- All menu groups must have a container with `.nj-menu-group` and headers must use `.nj-menu-group__header`.
- **Action:**
- Refactor HTML structure for menu groups.
### 2.8. **Spinner**
- **Change:**
- Use `.nj-spinner--2xs` (was `xxs`).
- **Action:**
- Update all usages:
```html
```
### 2.9. **Heading & Display Component**
- **Heading:**
- Font sizes for `lg` and `xl` reduced.
- `2xl` removed—use `Display` component instead.
- New `ai` gradient variant added.
- **Action:**
- For previous `2xl`, use `.nj-display--xl`.
- For previous `xl`, use `.nj-display--md`.
- For previous `lg`, use `.nj-heading--xl`.
- **Display:**
- Add `Display` component where big headings are needed.
### 2.10. **Footer & Header**
- **Footer:**
- Deprecated, update accordingly.
- **Header:**
- Rename `.nj-header*` classes to `.nj-header-deprecated*`.
### 2.11. **Icon Button, Skeleton, Inline Message, etc.**
- **Icon-Button:**
- Default size is now `sm` (was `xs`).
- **Skeleton:**
- New circle scales: `2xl`, `3xl`
- Previous defaults updated (see. Avatar changes).
- **Inline Message:**
- Main content: change `` to `
` for `.nj-inline-message__body`.
- Remove inline-message title; use external heading/text components as needed.
- Add action slot as needed.
---
## 3. **CSS Token Changes**
- **Use New Responsive Tokens:**
- Replace legacy desktop/mobile text/heading/line-height tokens with:
- `--nj-semantic-font-size-text-`
- `--nj-semantic-font-size-heading-`
- `--nj-semantic-line-height-text-`
- `--nj-semantic-line-height-heading-`
---
## 4. **Deprecated & Removed Components**
- Navbar is now deprecated, please use Header Web Component
- Deprecated list: Replace by new version of the same component. The deprecated have now `-deprecated` suffix.
- Footer
- Sidebar
- Header
- List
- Progress
- Removed list
- Alert
- Bullet
- Dropdown
- Fluid Icon
- Forms (`.nj-form-group`)
- Switch
---
## 5. **Recommended Migration Steps**
1. **Update all dependencies**, especially `@engie-group/fluid-design-tokens`.
2. **Refactor icon class names** everywhere.
3. **Refactor modal, sidebar, tag, list, avatar** components as described.
4. **Update all deprecated components** by renaming with `-deprecated` suffix to preserve appearance during migration.
5. **Adjust for all token changes** in custom and extended stylesheets.
6. **Remove any external font imports** that are now embedded.
7. **Test visually and functionally at each stage** - most breaking changes are CSS - and template-level.
8. **Consult Fluid’s documentation** for new component APIs when migrating behavior.
---
## 6. **New Features to Leverage**
- Display component for large headings.
- New Badge, Button, Icon, Spinner, Status-indicator `ai` variant.
- Responsive tokens for better scaling.
---
## 7. **Testing & QA**
- Regression-test visually across all major components (Avatar, Badge, Modal, Tag, List, Sidebar, Spinner, Heading, etc.).
- Test interaction for Segmented Control, Menu, Sidebar.
- Review Icon usage everywhere (both static HTML and dynamically rendered templates).
---
## 8. **For Further Help**
- Some component refactors recommend checking the [documentation](https://fluid.design.digital.engie.com/fluid-design-system/storybook/vanilla/index.html?path=/docs/docs-getting-started--documentation) for full usage examples.
---
**If you have custom Fluid-based themes or re-exports in your codebase, review all relevant overrides for token/class/HTML changes above. If you need clarification on any migration aspect, let us know!**