@engie-group/fluid-design-system-react

## V1 to V2 Migration guide ### 🖍 Changed ##### ⚠️ Breaking changes ###### [GLOBAL] * All exported components and services are now prefixed with `NJ` for e.g: `<Button>` becomes `<NJButton>`. You will have to replace all usages and imports in your project. * Update dependencies to work with Node latest LTS v16.16 and npm 8.15 * Importing `@engie-group/fluid-design-system/reboot.css` is now deprecated, reboot imported tokens and added a cleanslate for css. You should now import tokens as shown in the `README.md` Unfortunately this is not a good practice for a component library. In our case some of our components were relying on some global styles when each component should be responsible for its own styles. It can also cause some website to have some side effects when importing `reboot.css` in order for fluid components to work properly. From now on components rely on their own styles and `reboot.css` is removed from this package and moving it to package `@engie-group/fluid-4-deprecated` in case you website was relying on some rules present in `reboot.css`, you should import if from `@engie-group/fluid-4-deprecated` or replace the rules in your styles. We are also adding an optional `base.css` file that you can import and which sets the correct font-family and color to the html and body. Please report to `README.md` to see how to import correctly * When installing the package via npm or importing it via CDN we recommend fixing the version with the exact package version to avoid breaking change affecting your live website. With never-ending topics like Accessibility and BRAND GUIDELINES we also have to include some minor breaking changes in some minor versions ###### [AVATAR] * Replace `Bullet` by `StatusIndicator` in the `Avatar` component to display status * You can now pass a `statusTitle` and have access to more `status` prop options ("success", "warning", "offline", "online", "away", "do_not_disturb", "busy", "unknown", "error" and "in_progress")` * [A11Y] ⚠️ Breaking change: add required `label` prop to `NJAvatar` ###### [BADGE] * Replace the `value` prop in `Badge` by a `children` to display the value * Set `primary` as the default variant for `badge`, was `blue-corporate` before ###### [BREADCRUMB] * Rename prop from `active` to `isActive` ###### [BULLET] * `NJBullet` doesn't take same variants as before, ``` Before: white blue-corporate blue-allports blue-venice green-java green-pine green orange-crusta orange red-mandy red blue-bigstone blue-rhino green-fun green-riogrande yellow yellow-bright-sun purple violet violet-eggplant cerise After : brand teal pink orange red green ultramarine yellow purple blue lime ``` ###### [CARD COVER] * Rename prop from `link` to `href` * Rename prop from `targetLink` to `target` ###### [CHECKBOX] * Rename prop from `check` to `isChecked` * Rename prop from `disabled` to `isDisabled` * Rename prop from `required` to `isRequired` * [A11Y] `NJCheckbox`: rename `id` prop to `inputId` and make it required ###### [FAB] * [A11Y] `NJFab`: Rename `ariaLabel` prop to `label` and make it required ###### [LINK] * Rename `NJLink` size props value `m` to `md` ###### [ICON] * `NJIcon` now has no default role nor tabIndex (previously role="button" and tabIndex="0") * `NJIcon` changed `variant` props values: primary (grey-800), inverse (grey-0), brand (ex blue-corporate), grey, teal, pink, orange, red, green, ultramarine, yellow, purple ###### [LIST] * `NJListGroup` renamed to `NJList` ###### [PAGINATION] * [A11Y] `NJPagination`: make `ariaLabelPrevious` and `ariaLabelNext` props required ###### [PROGRESS] * [A11Y] `NJLinearProgress`: add `label` required prop ###### [RADIO] * Rename prop from `check` to `isChecked` * Rename prop from `disabled` to `isDisabled` * Rename prop from `required` to `isRequired` ###### [TABS] * [A11Y] add required `label` prop to `NJTabs` ###### [TOGGLE] * Rename prop from `check` to `isChecked` * Rename prop from `disabled` to `isDisabled` * [A11Y] add `label` required prop to `NJToggle` * [A11Y] `NJToggle`: make `id` prop required ###### [TOOLTIP] * [A11Y] `NJTooltip`: make `children` prop required ###### [SPINNER] * `light` variant has been renamed `inverse` icon * `gray` variant has been renamed `grey` icon ###### [SWITCH] * Rename prop from `check` to `isChecked` * Rename prop from `disabled` to `isDisabled` ### ❌ Removed ##### ⚠️ Breaking changes ###### [GLOBAL] * Remove displayNames from components, somehow it breaks storybook props * Drop support for React < 18 * Remove exported types `TColors` and `TColorsPalette` ###### [AVATAR] * Remove `notificationColor` prop * Remove `xs` size variants ###### [BADGE] * Remove `variant` prop ###### [BUTTON] * Remove `NJButtonBase`, `NJButtonOutline` and `NJButtonGhost`. `NJButton` now handles all variants * Remove `isInverse` props from `NJButton`. (Replaced by `variant="inverse"`) * Remove `variant` values `'danger' | 'warning' | 'success'` * Remove possibility to have a `NJButton` with an icon only. (Should be replaced by specific component `NJIconButton`) * Remove `iconPosition` props from `NJButton`. (Buttons should always have their icon on the left now) * Remove `size="block"` props from `NJButton` ###### [FAB] * Remove variants `success` and `warning`, `danger` ###### [ICON] * Remove `title`,`href`, `target`, `role` and `tabIndex` prop * Deprecates `onClick` and `onKeyPress` prop ###### [ICON ENGIE] * Remove `title`,`href`, `target`, `role` and `tabIndex` prop * Deprecates `onClick` and `onKeyPress` prop ###### [LINEAR PROGRESS] * Remove color `variant` prop ###### [LINK] * Remove variants: `primary`, `success`, `danger`, `warning`, `light` * Remove prop `isUnderlined` from `NJLink`. Links are all underlined except for link `variant="contextual"` ###### [MODAL] * Remove `ariaLabelledBy` prop ###### [RADIO] * Remove `tabIndex` prop ###### [SWITCH] * Remove NJSwitch unsupported light option theme variants ###### [TOGGLE] * Toggle component color theme variant removed (`primary`, `success`, `warning`, `danger`, `light`) * Remove possibility to have one label before and one after the toggle. Toggles now only have one label which is placed after the toggle * Remove `label` prop, label should now be passed as child of the component * Change value of `values` prop from * ``` { left: string | number | boolean; right: string | number | boolean } ``` to ``` { off: string | number | boolean; on: string | number | boolean } ``` * Icons are also passed as children and should have attribute `data-child-name="njToggleIcon"` * Remove `notificationColor` prop ###### [TEXTAREA] * Remove textarea component, Textarea is now usable by passing propos: `isMultiLine` to `NJFormItem` component ### 👎 Deprecated ###### [FORMS] * `Dropdown`, `Select` and `GroupSelect` are now deprecated, use `NJSelectInput` instead * `Input` is deprecated, use `NJFormItem` instead * `NJAutocomplete` is deprecated please use `NJAutocompleteInput` ###### [ALERT] * `NJAlert` is deprecated. You should use `NJInlineMessage` or `NJToast` instead ###### [SWITCH] * `NJSwith` is deprecated. You should use `NJSegmentedControl`