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: move Modal to Dialog/Drawer conversion docs to v10 migration #1921

Merged
merged 1 commit into from
Jan 16, 2023
Merged
Show file tree
Hide file tree
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
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,26 @@ v10 of @dnb/eufemia contains _breaking changes_. As a migration process, you can
1. Find the `data-test-id` property and replace it with `data-testid`.
The usage of `data-test-id` will most likely be found in your tests.

### [Modal](/uilib/components/modal), [Dialog](/uilib/components/dialog) and [Drawer](/uilib/components/drawer)

When you convert from `<Modal mode="drawer" />` to `<Drawer />` – follow these steps:

- All `trigger_*` props are not supported for Drawer, use `triggerAttributes` instead to pass in props for the trigger button.
- Change prop `trigger_hidden` to `omitTriggerButton` to omit the default trigger button from Modal.
- Only camelCase props are supported for Drawer, so you will need to update the prop names.
- `Modal.Inner` or `Modal.Content` converts to `Drawer.Body`.
- `Modal.Bar` converts to `Drawer.Navigaton`.
- `Modal` was a class component and `Drawer` is a functional component.

When you convert from `<Modal />` to `<Dialog />` – follow these steps:

- All `trigger_*` props are not supported for Dialog, use `triggerAttributes` instead to pass in props for the trigger button.
- Change prop `trigger_hidden` to `omitTriggerButton` to omit the default trigger button from Modal.
- Only camelCase props are supported for Dialog, so you will need to update the prop names.
- `Modal.Content` converts to `Dialog.Body`.
- `Modal.Bar` converts to `Dialog.Navigaton`.
- `Modal` was a class component and `Dialog` is a functional component.

### [Lists](/uilib/elements/lists)

1. New **Definition List** layout direction: `direction="horizontal"` including `Dl.Item` [demo](https://eufemia.dnb.no/uilib/elements/lists/#definition-list-in-horizontal-direction).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,3 @@ To provide custom content to parts of the Dialog, a set of component parts are p
### More detailed information

For more details regarding the component functionality, check out the [Modal documentation](/uilib/components/modal).

#### Converting from Modal

If you are converting from `<Modal />` to `<Dialog />`, there are a few differences you need to take into consideration:

- All `trigger_*` props are not supported for Dialog, use `triggerAttributes` instead to pass in props for the trigger button.
- Change prop `trigger_hidden` to `omitTriggerButton` to omit the default trigger button from Modal.
- Only camelCase props are supported for Dialog, so you will need to update the prop names.
- `Modal.Inner`/`Modal.Content` converts to `Dialog.Body`.
- `Modal.Bar` converts to `Dialog.Navigaton`.
- `Modal` was a class component and `Dialog` is a functional component.
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,3 @@ To provide custom content to parts of the Drawer, a set of component parts are p
### More detailed information

For more details regarding the component functionality, check out the [Modal documentation](/uilib/components/modal).

#### Converting from Modal mode drawer

If you are converting from `<Modal mode="drawer" />` to `<Drawer />`, there are a few differences you need to take into consideration:

- All `trigger_*` props are not supported for Drawer, use `triggerAttributes` instead to pass in props for the trigger button.
- Change prop `trigger_hidden` to `omitTriggerButton` to omit the default trigger button from Modal.
- Only camelCase props are supported for Drawer, so you will need to update the prop names.
- `Modal.Inner`/`Modal.Content` converts to `Drawer.Body`.
- `Modal.Bar` converts to `Drawer.Navigaton`.
- `Modal` was a class component and `Drawer` is a functional component.