-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(Modal): updates components that inherits ModalPropTypes as camel…
… case (#2618)
- Loading branch information
Showing
6 changed files
with
52 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
...design-system-portal/src/docs/uilib/components/modal/event-table-camel-case.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 }` | |
34 changes: 34 additions & 0 deletions
34
...-design-system-portal/src/docs/uilib/components/modal/prop-table-camel-case.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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={<Anchor href="/" />}`. 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`). | |