diff --git a/MIGRATION.md b/MIGRATION.md index e79900f5a..5ba650002 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,11 +1,119 @@

Migration Guide

+- [From version 2.3.x to 3.0.0](#from-version-23x-to-300) + - [Title (from layout)](#title-from-layout) + - [Modal](#modal) + - [Form](#form) - [From version 2.2.0 to 2.3.0](#from-version-220-to-230) - [From version 2.0.x to 2.1.0](#from-version-20x-to-210) - [From version 1.x to 2.0.x](#from-version-1x-to-20x) - [Date Input](#date-input) - [All](#package-react-toolkit-all) +# From version 2.3.x to 3.0.0 + +This version has some breaking changes. Please read the following to update your project. + +## Title (from layout) + +The `Title` component from the layout-header package has been renamed. Another component was also named `Title` in the title package. To avoid conflicts, the `Title` component from the layout-header package has been renamed to `HeaderTitle`. + +```diff +- import { Title } from '@axa-fr/react-toolkit-layout-header'; ++ import { HeaderTitle } from '@axa-fr/react-toolkit-layout-header'; + +- import '@axa-fr/react-toolkit-layout-header/dist/Title/af-title-bar.css'; ++ import '@axa-fr/react-toolkit-layout-header/dist/HeaderTitle/af-title-bar.css'; + +- ++ <HeaderTitle title="Titre de mon application" /> +``` + +## Modal + +The `Modal` component has been fully refactored.\ +In a technical standpoint, we removed the use of `react-modal` library and replaced it with a simple `dialog` html element. This change allows us to have a better accessibility and a better performance.\ +In a functional standpoint, we removed the `isOpen` prop as the `dialog` element doesn't work that way. To open a dialog you have to call the `showModal` function that will set the `open` attribute on the `dialog` element. To close the dialog you have to call the `closeModal` function that will set the `open` attribute to `false`.\ +In order to do that, you can use `ref` to get the `dialog` element and call the `showModal` and `closeModal` functions. + +```diff +- <Modal isOpen={isOpen} onOutsideTap={onClose}> ++ const modalRef = useRef<HTMLDialogElement>(null); ++ <Modal ref={modalRef} onOutsideTap={onClose}> +``` + +```diff +- <button onClick={() => setIsOpen(true)}>Open Modal</button> ++ <button onClick={() => modalRef.current.showModal()}>Open Modal</button> +``` + +```diff +- <button onClick={() => setIsOpen(false)}>Close Modal</button> ++ <button onClick={() => modalRef.current.closeModal()}>Close Modal</button> +``` + +Also we removed the prefix `Modal` for the subcomponents of the `Modal` component.\ +For example, `Modal.HeaderBase` is now `HeaderBase`, `Modal.Body` is now `Body`, `Modal.Footer` is now `Footer`. + +```diff +- <Modal.HeaderBase>My Header</Modal.HeaderBase> ++ <HeaderBase>My Header</HeaderBase> +``` + +Keep in mind that those components should be wrapped inside a `Modal` component. + +Lastly, for your tests to keep working, you will need to define what the `showModal` and `close` functions do. For that you can use the following code in your `setupTests.ts` file : + +```javascript +window.HTMLDialogElement.prototype.showModal = vi.fn(function mock( + this: HTMLDialogElement +) { + this.open = true; +}); + +window.HTMLDialogElement.prototype.close = vi.fn(function mock( + this: HTMLDialogElement +) { + this.open = false; +}); +``` + +## Form + +In this version, we refactored the form `onChange` event. Previously we used to override the native `onChange` event of the input. Now we use the native `onChange` event to keep it simplier and reduce the codebase and possible issues.\ +For your forms to still work, you need to change the way you handle the `onChange` event. + +Before to get the value of the input, you would do something like this : + +```typescript +const handleChange = (event) => { + changeSomeProperty(event.value); +}; +``` + +Now you can directly get the value from the native event : + +```typescript +const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { + changeSomeProperty(event.target.value); +}; +``` + +This change has to be done on all the form components that you use in your project : + +- `Card` +- `Checkbox` +- `Choice` +- `Date` +- `File` +- `Number` +- `Pass` +- `Radio` +- `MultiSelect` +- `Select` +- `Text` +- `Textarea` + # From version 2.2.0 to 2.3.0 ## Title