For the Rails version of the dialog kit, the clickable element being used to open the dialog must be given a open-dialog data attribute with a value that is the same as the id being given to the dialog itself. See code example below to see this in action.
Additionally, both the cancel button and the confirm button have optional id props which can be used to pass in a custom id to allow developers to target that button with custom javascript if needed (confirm_button_id and cancel_button_id).
The dialog kit also supports customizing your dialog with a compound component structure.
This allows for greater flexibility and more complex dialogs.
For the Rails version, when using the kit as a compound component it is necessary to pass the same value as the id for the dialog, the dialog header and the dialog footer in order for the opening and closing of the dialog to function as expected.
If you are using the datepicker within the Rails dialog, do not use the static_position prop on the datepicker.
The dialog will create a scroll container automatically when the text exceeds the height of the page. No prop or configuration is needed.
When such a scroll container is created, the dialog header will remain fixed at top of dialog and not scroll with the body content.
If the dialog is a fullHeight variant, the header and footer will both be sticky and not scroll with the body content.
When shouldCloseOnOverlayClick is explicitly set to false, click events on the overlay will not close the modal.
By default, shouldCloseOnOverlayClick is set to true.
The Dialog kit also offers customizable Status Alert options as seen here.
For the rails version of the kit, when using custom confirm and cancel buttons as shown in these examples, the 'cancel' button must be given a close-dialog data attribute with a value that is the same as the id given to the dialog itself.
These examples highlight how the buttons within the Dialog can be stacked when using the Status Alert variant. It also has a link style for the buttons for the mobile views.
To render a full height Dialog, use the fullHeight (react) or full_height (rails) prop. A full height Dialog can be size small, medium, or large. By default it will be center aligned.
The full height dialog is centered by default, but the placement can be changed via the placement prop with one of the following values: left, center, right.
The large variant however will always be centered, even if the placement prop is used.
All dialogs with the fullHeight prop will be displayed full-width on mobile screens.
Pressing the "Okay" button will trigger a loading state where the button content is replaced by a spinner icon and both buttons are disabled.
The custom_event_type prop allows you to specify custom events that will trigger the dialog's initialization or control its behavior. This is especially useful when working with Turbo Frame updates where standard DOM events might not suffice.
The examples demonstrate two use cases:
1) Opening a dialog via custom event dispatch: The first example shows how to configure a dialog to listen for a specific custom event (dialogOpen). When this event is dispatched, the dialog will automatically open, making it easy to trigger the dialog from JavaScript or after Turbo Frame operations.
2) Controlling dialog button actions with custom events: The second example demonstrates how to set up a dialog that can have its confirm button triggered through external events (turboResponse). This pattern is useful when you need to programmatically confirm a dialog after some background operation completes.
3) Multiple custom events: The third example combines the first two to show how custom_event_type prop can support multiple event types separated by a comma.
For Turbo integration, you can use standard Turbo events like turbo:frame-load or turbo:submit-end as your custom_event_type to ensure the dialog responds properly after Turbo navigation or form submissions. The dialog component will listen for these events automatically.
The implementation handles various actions including 'open', 'close', 'clickConfirm', and 'clickCancel', making it flexible for different interaction patterns in your Turbo-enhanced application.
Use the overflow: "visible" global prop to allow Typeahead dropdown menus to appear outside the dialog boundaries. By default, dialogs clip content that extends beyond their edges, but this prop enables pop-up elements to render above the dialog overlay.
The closeable prop can be set to false to optionally render the Dialog header without the close “X” button. closeable is set to true by default.
This prop can be used with the simple as well as the complex version of the Dialog as can be seen here.
Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.
Auto close is used when you want the confirmation toast to close automatically after a certain time. auto_close property will be a delay number in ms.
The script tag in this code snippet is for demonstration purposes only. It clones the toasts in order to have it appear with a button click prompt and not upon initial page load. In a typical production environment the event triggering a fixed confirmation toast to appear would be handled by a controller or a separate javascript file.
Pass anything (including any of our kits) to the children prop to customize the content of the fixed confirmation toast.
NOTE: passing children overrides any content passed to text
Setting icon prop to "none" will render the fixed confirmation toast without the left side icon.
Notice offset is not set so the popover is flush with the content.
By default, the popover tooltip attaches to the <body>. To attach it elsewhere, use the append_to prop. Set it to "parent" to place the tooltip inside its parent element, or pass any CSS selector (#id or .class) to specify a custom container.
Use the position prop to control where the popover appears relative to its trigger. Valid values include top, bottom, left, right, and aligned variants such as top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, and right-end.
Set the prop interaction as true for cases that require users to copy the content inside the tooltip.
You can re-use Tooltip by sending trigger_element_selector as a HTML class= attribute.
You can customize the height and width of the tooltip's popover.
When using maxHeight, be sure to set a width as well. The text needs to truncate within the width prop.
Waits for the specified time when the event listener runs before triggering the tooltip.
The delay_open and delay_close accept numbers in milliseconds. 1 second is 1000 milliseconds.
enabled
You can build your own logic to control whether to show or hide the tooltip.
Click on the Toggle state button to change the state of the component and hover over the 'hover me' text to see it in action.
Each Tooltip has a dataset with the pbTooltipShowTooltip property set to true by default. To update it, access the pbTooltipShowTooltip in the dataset of your tooltip element: yourTooltip.dataset.pbTooltipShowTooltip = 'false'
Set the prop use_click_to_open as true so that the tooltip will only appear when an item is clicked rather than hovered over.
