DÁP Design System - Popup webcomponent

Popup

Popup component is a web component that displays a popup on top of the content. It can be used for notifications, alerts, or any other type of information that needs to be displayed on top of the content.

Examples

Default Popup

Popup component is the base component for all popups. It can be used to create custom popups. You have to handle the opening and closing of the popup yourself.

<dap-ds-popup id="default">
<dap-ds-button slot="trigger" onClick={() => {
  const popup = document.querySelector('#default')
  popup.opened = !popup.opened 
}}>
  open
</dap-ds-button>
content
</dap-ds-popup>

Placements

The placement of the popup. Can be 'top', 'right', 'bottom', or 'left'. Default is 'bottom'. Each of these base placements has an alignment in the form -start and -end. For example, right-start, or bottom-end. These allow you to align the tooltip to the edges of the button, rather than centering it.

<div style={{ display: 'flex', minHeight: 200, justifyContent: 'center', alignItems: 'center' }}>
  <dap-ds-stack direction="row">
    <dap-ds-popup id="top" placement="top">
      <dap-ds-button slot="trigger" onClick={() => {
        const popup = document.querySelector('#top')
        popup.opened = !popup.opened 
      }}>
        Top
      </dap-ds-button>
      Tooltip content
    </dap-ds-popup>
    <dap-ds-popup id="right" placement="right">
      <dap-ds-button slot="trigger" onClick={() => {
        const popup = document.querySelector('#right')
        popup.opened = !popup.opened 
      }}>
        Right
      </dap-ds-button>
      Tooltip content
    </dap-ds-popup>
    <dap-ds-popup id="bottom" placement="bottom">
      <dap-ds-button slot="trigger" onClick={() => {
        const popup = document.querySelector('#bottom')
        popup.opened = !popup.opened 
      }}>
        Bottom
      </dap-ds-button>
      Tooltip content
    </dap-ds-popup>
    <dap-ds-popup id="left" placement="left">
      <dap-ds-button slot="trigger"onClick={() => {
        const popup = document.querySelector('#left')
        popup.opened = !popup.opened 
      }}>
        Left
      </dap-ds-button>
      Tooltip content
    </dap-ds-popup>
    <dap-ds-popup id="rightstart" placement="right-start">
      <dap-ds-button slot="trigger"onClick={() => {
        const popup = document.querySelector('#rightstart')
        popup.opened = !popup.opened 
      }}>
        Right-Start
      </dap-ds-button>
      Tooltip content
    </dap-ds-popup>
  </dap-ds-stack>
</div>

Arrow

Popup component has abuilt in arrow styling. You can enable it by setting the hasArrow attribute to true.

<dap-ds-popup id="arr" hasarrow>
<dap-ds-button slot="trigger" onClick={() => {
  const popup = document.querySelector('#arr')
  popup.opened = !popup.opened 
}}>
  open
</dap-ds-button>
This popup has an arrow.
</dap-ds-popup>

Custom Offset

Popup component can have a custom offset. You can set the offset by setting the offset attribute. Offset is the distance between the popup and the trigger.

<dap-ds-popup offset="20" id="offset" hasarrow>
<dap-ds-button slot="trigger" onClick={() => 
  {
    const popup = document.querySelector('#offset')
    popup.opened = !popup.opened
  }}>
  Offset Popup
</dap-ds-button>
<div>
  This popup has a custom offset of 20 pixels.
</div>
</dap-ds-popup>

Synced Popup

Popup component size can be synced with its trigger. You can enable this by setting the sync attribute to true.

<dap-ds-popup sync id="sync">
  <dap-ds-button slot="trigger" onClick={() => 
    {
      const popup = document.querySelector('#sync')
      popup.opened = !popup.opened
    }}>
    Synced Popup
  </dap-ds-button>
  <div>
    This popup's width is synced with its trigger.
  </div>
</dap-ds-popup>

Importing

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

Importing React

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

Attributes

Property	Type	Default	Description
`disabled`	`boolean`	`false`	The disabled state of the popup.
`opened`	`boolean`	`false`	The open state of the popup.
`placement`	`'top'`, `'right'` , `'bottom'` , `'left'` , `'top-start'` , `'top-end'` , `'bottom-start'` , `'bottom-end'` , `'left-start'` , `'left-end'` , `'right-start'` , `'right-end'`	`'bottom'`	The placement of the popup.
`floatingStrategy`	`'absolute'`, `'fixed'`	`'absolute'`	The floating strategy of the popup.
`offset`	`number`	`0`	The offset of the popup.
`sync`	`boolean`, `undefined`		Whether the popup should sync its width with the trigger.
`maxHeight`	`number`, `'auto'`	`250`	The maximum height of the popup.
`hasArrow`	`boolean`		Whether the popup has an arrow.
`overflow`	`boolean`		Whether the popup should overflow.
`size`	`'xs'`, `'sm'` , `'lg'`		The size of the popup.

Slots

Name	Description
`trigger`	The trigger of the popup.
`(default)`	The content of the popup.

Events

Event Name	Description
`dds-opened`	Fired when the popup is opened.
`dds-closed`	Fired when the popup is closed.

CSS Parts

Part Name	Description
`popup`	The main popup container.
`arrow`	The arrow of the popup.

CSS Custom Properties

Property Name	Description
`--dds-popup-z-index`	Z-index of the popup.
`--dds-popup-padding`	Default padding of the popup.
`--dds-popup-padding-xs`	Padding of the popup when size is xs.
`--dds-popup-padding-lg`	Padding of the popup when size is lg.
`--dds-popup-border-width`	Border width of the popup.
`--dds-popup-border-radius`	Border radius of the popup.
`--dds-popup-border-color`	Border color of the popup.
`--dds-popup-background`	Background color of the popup.
`--dds-popup-color`	Text color of the popup.
`--dds-popup-arrow-size`	Size of the popup arrow.