DÁP Design System - Modal webcomponent

Modal

Modal is a dialog box or popup window that is displayed on top of the current page.

Design system docs

Examples

Default Modal

<>
  <dap-ds-button onclick="document.querySelector('#basicmodal').open = true">Open Modal</dap-ds-button>
  <dap-ds-modal id="basicmodal" title="Modal title" description="Description">
    <p>Modal content</p>
  </dap-ds-modal>
</>

Customized Modal

<>
  <dap-ds-button onclick="document.getElementById('tray-bottom').open = true">Open Modal</dap-ds-button>
  <dap-ds-modal id="tray-bottom">
    <dap-ds-typography variant="h1" slot="title"
      >Like a tray?</dap-ds-typography
    >
    <p>Opened like a tray</p>
    <dap-ds-button slot="footer" onclick="document.getElementById('tray-bottom').open = false">I like tray</dap-ds-button>
    <dap-ds-button danger slot="footer" onclick="document.getElementById('tray-bottom').open = false">I don't ike tray</dap-ds-button>
  </dap-ds-modal>
</>

Events

Modal has many events according to its state. You can listen to these events to trigger some actions. Most important event is the dds-close event, which is triggered when the modal is closed. The events detail properry contains the source of the event. This can be ok-button, cancel-button, close-button, overlay, or esc.

Issues

There is a know issue in Safari when using React. When the modal is opened, safari does not recognize the content in the modal content slot, andthe content is not resized to the new height. This is a known Safari bug. I this case you can set the modal to a fixed size, or use the the followin css:

#modal::part(panel) {
  height: auto;
}

Importing

import { DapDSModal } from 'dap-design-system/dist/dds'

Importing React

import { DapDSModalReact } from 'dap-design-system/dist/react'

Attributes

Property	Type	Default	Description
`bottomFooter`	`boolean`	`true`	Pushes the footer to bottom.
`open`	`boolean`		The open state of the modal.
`fullScreen`	`boolean`		The full screen version of the modal.
`wideFooter`	`boolean`		Wide layout mode for footer.
`closeOnEsc`	`boolean`		Whether the modal should close on pressing the escape key. Default is true.
`closeOnOverlayClick`	`boolean`		Whether the modal should close on clicking the overlay. Default is true.
`closeButton`	`string`		Whether the modal should have a close button. Default is true.
`title`	`string`		The title of the modal.
`description`	`string`		The description of the modal.
`okButtonLabel`	`string`		The label of the OK button.
`cancelButtonLabel`	`string`		The label of the Cancel button.
`okButtonDisabled`	`boolean`		Whether the OK button should be disabled.
`cancelButtonDisabled`	`boolean`		Whether the Cancel button should be disabled.
`cancelButtonDanger`	`boolean`		Whether the Cancel button should be a danger button.
`okButtonDanger`	`boolean`		Whether the OK button should be a danger button.
`hideOkButton`	`boolean`		Whether the OK button should be hidden.
`hideCancelButton`	`boolean`		Whether the Cancel button should be hidden.
`footer`	`string`		Whether the modal should have a footer. Default is true.
`header`	`string`		Whether the modal should have a header. Default is true.
`useNativeFocus`	`boolean`		Whether the modal should use native focus. Default is false.

Slots

Name	Description
`(default)`	The content of the modal.
`title`	The title of the modal.
`description`	The description of the modal.
`footer`	The footer of the modal.

Events

Event Name	Description	Type
`dds-before-open`	Fires before the modal opens.	`{void }`
`dds-opened`	Fires after the modal opens.	`{void }`
`dds-before-close`	Fires before the modal closes.	`{void }`
`dds-closed`	Fires after the modal closed.	`{void }`
`dds-close`	Fires when the modal is closes. You can prevent the modal from closing by calling `event.preventDefault()`.	`{void }`
`dds-ok`	Fires when the OK button is clicked. You can prevent the modal from closing by calling `event.preventDefault()`.	`{void }`
`dds-cancel`	Fires when the Cancel button is clicked. You can prevent the modal from closing by calling `event.preventDefault()`.	`{void }`

CSS Parts

Part Name	Description
`base`	The main modal container.
`panel`	The panel of the modal.
`header`	The header of the modal.
`title`	The title of the modal.
`description`	The description of the modal.
`footer`	The footer of the modal.
`content`	The body of the modal.
`closebutton`	The close button of the modal.

CSS Custom Properties

Property Name	Description
`--dds-modal-max-block-size`	Maximum height of the modal. Default: 80vh.
`--dds-modal-max-inline-size`	Maximum width of the modal. Default: 600px.
`--dds-modal-padding`	Padding inside the modal. Default: var(--dds-spacing-800).
`--dds-modal-transform-amount`	Amount to transform for entrance animation. Default: 2rem.
`--dds-modal-transition-speed`	Speed of transition animations. Default: var(--dds-transition-fast).
`--dds-modal-transition-timing`	Timing function for transitions. Default: var(--dds-easing-ease-in-out).
`--dds-modal-border-width`	Border width of the modal. Default: var(--dds-border-width-base).
`--dds-modal-border-color`	Border color of the modal. Default: var(--dds-border-neutral-divider).
`--dds-modal-border-radius`	Border radius of the modal. Default: var(--dds-radius-large, 16px).
`--dds-modal-background`	Background color of the modal. Default: var(--dds-background-neutral-subtle).
`--dds-modal-header-margin`	Margin below the header. Default: var(--dds-spacing-800).
`--dds-modal-footer-margin`	Margin above the footer. Default: var(--dds-spacing-400).
`--dds-modal-footer-gap`	Gap between footer elements. Default: var(--dds-spacing-400).
`--dds-modal-close-margin`	Margin for the close button. Default: var(--dds-spacing-300).