Skip to content

MIGRATION-GUIDE-TOOLKIT.md

Latest commit

 

History

History
191 lines (140 loc) · 5.26 KB

MIGRATION-GUIDE-TOOLKIT.md

File metadata and controls

191 lines (140 loc) · 5.26 KB
Raw

Migration from @axa-fr/react-toolkit

If you are using @axa-fr/react-toolkit and want to migrate to @axa-fr/design-system, you can follow this guide. Most components work the same way, and migrating should be painless. There are however a few exceptions.

Tooling changes

React 17

Support for react 17 has been dropped. This package now requires react 18 or higher.

👋 CSS imports

Importing CSS is no longer required as components bring their own styles. You can remove the following line from your project:

- import '@axa-fr/react-toolkit-all/dist/style/af-toolkit-core.css';
- import '@axa-fr/react-toolkit-core/dist/assets/fonts/icons/af-icons.css';

For retrieving the design system sass variables (for colours, etc.), we use to import a scss file into the scss file inside the projet. The import has to be changed in order to still get those variables.

- @import '@axa-fr/react-toolkit-core/dist/assets/scss/core.scss';
+ @import '@axa-fr/design-system-slash-css/dist/common/common.scss';

However we now require sass support in your project. If you don't have it, you can install it with:

npm install sass

If you are using vite, it will automatically pickup on sass being present.

SVG

The import of the axa logo has to be changed as well. The logo is now in the @axa-fr/design-system-slash-css package.

- @import logo from '@axa-fr/react-toolkit-core/dist/assets/logo-axa.svg';
+ import logo from '@axa-fr/design-system-slash-css/logo-axa.svg';

Visual changes

Alert

The default icon for the Alert in error component has changed. It now uses the glyphicon glyphicon-minus-sign instead of glyphicon-exclamation-sign.

Before:

Alert uses glyphicon-exclamation-sign

After:

Alert uses glyphicon-minus-sign

Deleted components

🚮 CardGroupCheckbox and CardGroupRadio

The CardGroupCheckbox and CardGroupRadio components have been removed. They were barely used and UX designers have decided to remove them.

🚮 FileLine

The FileLine component has been removed.

🚮 SwitchInput

The SwitchInput component has been removed.

Props breaking changes

👮‍♂️ Multiselect

The Multiselect component now enforces stricter prop types for the options. It used to accept any object, but now it requires an object with only a label and value property. Any other property was ignored so there was no point in allowing them.

🧹 Steps

The Steps component has been updated to only have the new look. The old look was already deprecated in the toolkit package and has now been removed.

🧹 Popover

The Popover component has been updated to use string unions for the mode and placement props intead of enums. Also Popover.Pop and Popover.Over have been removed. Now the popoverElement is the content inside the popover, and children is now the content that will trigger the popover.

Placement are now more complete and can be all allowed values in popper.js.

Here's a example of how to update your code:

<Popover
-    mode={PopoverModes.hover} placement={PopoverPlacement.top}
+    mode="hover" placement="top"
+    popoverElement={
+      <>
+        <h1>Content of the popover</h1>
+        <p>Text of the modal element</p>
+      </>
>
- <Popover.Pop>
-    <h1>Content for the popover</h1>
-    <p>modal text</p>
- </Popover.Pop>
- <Popover.Over>
    <div
        hovered element
    </div>
-</Popover.Over>
</Popover>

🧹 HelpButton

The HelpButton component has been updated to use string unions for the mode and placement props intead of enums just like Popover.

🧹 Accordion

The CollapseCard component has been simplified. Before you needed to use the Header and Body components, but now you can use the CollapseCard component directly.

- <CollapseCard>
-    <CollapseCard.Header>Header</CollapseCard.Header>
-    <CollapseCard.Body>
-        <p>Body</p>
-    </CollapseCard.Body>
- </CollapseCard>
+ <CollapseCard
+    title="Header"
+ >
+    <p>Body</p>
+ </CollapseCard>

🧹 Footer

The Footer component has been simplified. Before you needed to use the copyright property to pass a content, but now you can directly put that content as child of the component.

- <Footer copyright="© 2024 Tous droits réservés — v1.0.0" />
+ <Footer>© 2024 Tous droits réservés — v1.0.0</Footer>

🧹 Action

The Action component has had a change in the role of the element. Before, if you didn't pass any role to the component, the default role was button. Now, if you don't pass any role to the component, the default role won't be button anymore. The element is an a element, so the default role is link if you pass an href attribute. If you don't pass that attribute, you can pass link to the role property.

Note as well that the ActionCore component has been removed. Use the Action component instead.

- <ActionCore
-    icon="menu-left"
-    aria-label="Retour à l'accueil"
-    onClick={() => {}}
- />
+ <Action
+    icon="menu-left"
+    aria-label="Retour à l'accueil"
+    role="link"
+    onClick={() => {}}
+ />