Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(migration): fix close dialog function #1206

Merged
merged 1 commit into from
Oct 8, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions MIGRATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ The `Title` component from the layout-header package has been renamed. Another c

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.
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 `close` 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 `close` functions.

```diff
- <Modal isOpen={isOpen} onOutsideTap={onClose}>
Expand All @@ -49,7 +49,7 @@ In order to do that, you can use `ref` to get the `dialog` element and call the

```diff
- <button onClick={() => setIsOpen(false)}>Close Modal</button>
+ <button onClick={() => modalRef.current.closeModal()}>Close Modal</button>
+ <button onClick={() => modalRef.current.close()}>Close Modal</button>
```

Also we removed the prefix `Modal` for the subcomponents of the `Modal` component.\
Expand Down
Loading