From beacaba96257f8469e94a437c48ce2b15bb0eb29 Mon Sep 17 00:00:00 2001 From: Anders Date: Thu, 7 Sep 2023 12:16:16 +0200 Subject: [PATCH] docs(Modal): updates components that inherits ModalPropTypes as camel case (#2618) --- .../docs/uilib/components/dialog/events.mdx | 4 +-- .../uilib/components/dialog/properties.mdx | 5 +-- .../docs/uilib/components/drawer/events.mdx | 4 +-- .../uilib/components/drawer/properties.mdx | 5 +-- .../modal/event-table-camel-case.mdx | 8 +++++ .../modal/prop-table-camel-case.mdx | 34 +++++++++++++++++++ 6 files changed, 52 insertions(+), 8 deletions(-) create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/modal/event-table-camel-case.mdx create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/modal/prop-table-camel-case.mdx diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/events.mdx index 1a7116c99da..2ae9efaabd1 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/events.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/events.mdx @@ -2,7 +2,7 @@ showTabs: true --- -import ModalEventTable from 'Docs/uilib/components/modal/event-table' +import ModalEventTable from 'Docs/uilib/components/modal/event-table-camel-case' ## Events @@ -11,6 +11,6 @@ import ModalEventTable from 'Docs/uilib/components/modal/event-table' | `onConfirm` | _(optional)_ For variant confirmation, handle the confirm action click. Provided with the mouse event and the Modal function `close` as arguments. | | `onDecline` | _(optional)_ For variant confirmation, handle the decline action click. Provided with the mouse event and the Modal function `close` as arguments. | -Dialog also includes the same events as [Modal](/uilib/components/modal). +Dialog also includes the same events as [Modal](/uilib/components/modal), only formatted as camel case. diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/properties.mdx index 6944df8f445..eef9a618cfc 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/properties.mdx @@ -3,7 +3,7 @@ showTabs: true --- import DialogPropTable from 'Docs/uilib/components/dialog/prop-table' -import ModalPropTable from 'Docs/uilib/components/modal/prop-table' +import ModalPropTable from 'Docs/uilib/components/modal/prop-table-camel-case' ## Properties @@ -11,6 +11,7 @@ import ModalPropTable from 'Docs/uilib/components/modal/prop-table' ### More props -The properties of [Modal](/uilib/components/modal) are also provided. +The properties of [Modal](/uilib/components/modal) formatted as camel case are also provided. +See the table below: diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/events.mdx index 871635c3ace..089a34e7ac4 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/events.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/events.mdx @@ -2,10 +2,10 @@ showTabs: true --- -import ModalEventTable from 'Docs/uilib/components/modal/event-table' +import ModalEventTable from 'Docs/uilib/components/modal/event-table-camel-case' ## Events -Drawer includes the same events as [Modal](/uilib/components/modal). +Drawer includes the same events as [Modal](/uilib/components/modal), only formatted as camel case. diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/properties.mdx index 257a382c88c..03e4ef311bf 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/properties.mdx @@ -3,7 +3,7 @@ showTabs: true --- import DrawerPropTable from 'Docs/uilib/components/drawer/prop-table' -import ModalPropTable from 'Docs/uilib/components/modal/prop-table' +import ModalPropTable from 'Docs/uilib/components/modal/prop-table-camel-case' ## Properties @@ -11,7 +11,8 @@ import ModalPropTable from 'Docs/uilib/components/modal/prop-table' ### More props -The properties of [Modal](/uilib/components/modal) are also provided. +The properties of [Modal](/uilib/components/modal) formatted as camel case are also provided. +See the table below: diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/modal/event-table-camel-case.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/modal/event-table-camel-case.mdx new file mode 100644 index 00000000000..c19a6d1b87b --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/modal/event-table-camel-case.mdx @@ -0,0 +1,8 @@ +--- +--- + +| Events | Description | +| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `onOpen` | _(optional)_ This event gets triggered once the modal shows up. Returns the modal id: `{ id }`. | +| `onClose` | _(optional)_ This event gets triggered once the modal gets closed. Returns the modal id: `{ id, event, triggeredBy }`. | +| `onClosePrevent` | _(optional)_ This event gets triggered once the user tries to close the modal, but `preventClose` is set to **true**. Returns a callback `close` you can call to trigger the close mechanism. More details below. Returns the modal id: `{ id, event, close: Method, triggeredBy }` | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/modal/prop-table-camel-case.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/modal/prop-table-camel-case.mdx new file mode 100644 index 00000000000..c0dc87ad813 --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/modal/prop-table-camel-case.mdx @@ -0,0 +1,34 @@ +| Properties | Description | +| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `id` | _(optional)_ The id used internal for the trigger button and Modal component. | +| `rootId` | _(optional)_ The id used internal in the modal root element. Defaults to `root`, so the element id will be `dnb-modal-root`. | +| `contentId` | _(optional)_ Defines an unique identifier to a modal. Use it in case you have to refer in some way to the modal content. | +| `labelledBy` | _(optional)_ The ID of the trigger component, describing the modal content. Defaults to the internal `trigger`, so make sure you define the `title` in `triggerAttributes`. | +| `children` or `function` | _(optional)_ the content which will appear when triggering open the modal. If a function is given, you get a close method `() => ({ close })` in the arguments. | +| `fullscreen` | _(optional)_ If set to `true` then the modal content will be shown as fullscreen, without showing the original content behind. Can be set to `false` to omit the auto fullscreen. Defaults to `auto`. | +| `openState` | _(optional)_ use this prop to control the open/close state by setting either: `opened` / `closed` or `true` / `false`. | +| `openDelay` | _(optional)_ forces the modal to delay the opening. The delay is given in `ms`. | +| `disabled` | _(optional)_ Will disable the trigger button. | +| `noAnimation` | _(optional)_ if set to `true`, no open/close animation will be shown. Defaults to `false`. | +| `noAnimationOnMobile` | _(optional)_ same as `noAnimation`, but gets triggered only if the viewport width is less than `40em`. Defaults to `false`. | +| `animationDuration` | _(optional)_ Duration of animation open/close in ms. Defaults to 300ms. | +| `preventClose` | _(optional)_ if set to `true` (boolean or string), then the user can't close the modal. | +| `preventOverlayClose` | _(optional)_ Disable clicking the background overlay to close the modal. PS! Pressing `esc` key will still close the modal. | +| `openModal` | _(optional)_ set a function to call the callback function, once the modal should open: `openModal={(open) => open()}` | +| `closeModal` | _(optional)_ set a function to call the callback function, once the modal should close: `closeModal={(close) => close()}` | +| `focusSelector` | _(optional)_ The Modal handles the first focus – automatically. However, you can define a custom focus selector the will be used instead `focusSelector=".css-selector"`. | +| `overlayClass` | _(optional)_ give the page overlay a custom class name (maps to `dnb-modal__overlay`). | +| `contentClass` | _(optional)_ give the content wrapper a custom class name (maps to `dnb-modal__content`). | +| `omitTriggerButton` | _(optional)_ omits default showing trigger button. | +| `trigger` | _(optional)_ provide a custom trigger component. Like `trigger={}`. It will set the focus on it when the modal gets closed. | +| `triggerAttributes` | _(optional)_ send along with custom HTML attributes or properties to the trigger button. | +| `dialogTitle` | _(optional)_ The aria label of the dialog when no labelledBy and no title is given. Defaults to `Vindu`. | +| `directDomReturn` | _(optional)_ If true, the modal will not open in a new DOM but directly in current DOM. Defaults to `false`. Be aware of the side effects of setting this property to `true`. | +| `bypassInvalidationSelectors` | _(optional)_ Define an array with HTML class selectors (`['.element-selector']`) which should not get invalidated when the modal opens/closes. Use this in order to let some parts of your site still be accessible by screen readers. | +| `scrollRef` | _(optional)_ To get the scroll Element, pass in your own React ref. | +| `contentRef` | _(optional)_ To get the inner content Element, pass in your own React ref. | +| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | +| `spacing` | _(deprecated/optional)_ if set to `false` then the modal content will be shown without any spacing. Defaults to `true`. | +| `closeTitle` | _(deprecated/optional)_ the title of the close button. Defaults to _Lukk_. | +| `hideCloseButton` | _(deprecated/optional)_ if true, the close button will not be shown. | +| `class` or `className` | _(deprecated/optional)_ give the inner content wrapper a class name (maps to `dnb-modal__content__inner`). |