playbook_ui 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27244 → 14.17.0.pre.alpha.PLAY2035dialogkitturbocustomprop7297

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +23 -3
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +11 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +60 -128
  5. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +3 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +58 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +6 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +64 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +8 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +55 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +3 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +33 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +3 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -2
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +6 -2
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +6 -2
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -2
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +4 -1
  22. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +97 -0
  23. data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +19 -45
  24. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
  25. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
  26. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +1 -0
  27. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
  28. data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +45 -0
  29. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +10 -1
  30. data/app/pb_kits/playbook/pb_dialog/dialog.rb +2 -0
  31. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames.html.erb +117 -0
  32. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames_rails.md +9 -0
  33. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
  34. data/app/pb_kits/playbook/pb_dialog/index.js +106 -14
  35. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +18 -2
  36. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
  37. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +20 -5
  38. data/app/pb_kits/playbook/pb_overlay/_overlay.scss +49 -22
  39. data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +15 -4
  40. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +63 -0
  41. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +3 -0
  42. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +1 -7
  43. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +39 -0
  44. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +1 -0
  45. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +40 -0
  46. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +5 -0
  47. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +3 -0
  48. data/app/pb_kits/playbook/pb_overlay/docs/index.js +3 -0
  49. data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +39 -1
  50. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -1
  51. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -1
  52. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +3 -1
  53. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +3 -1
  54. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
  55. data/dist/chunks/{_typeahead-BY6AFq1l.js → _typeahead-CHd0V9EL.js} +1 -1
  56. data/dist/chunks/_weekday_stacked-BatiLk3-.js +45 -0
  57. data/dist/chunks/{lib-BGzBzFZX.js → lib-BV_AF_eh.js} +3 -3
  58. data/dist/chunks/{pb_form_validation-BvNy9Bd6.js → pb_form_validation-nsvkJU2J.js} +1 -1
  59. data/dist/chunks/vendor.js +1 -1
  60. data/dist/menu.yml +1 -1
  61. data/dist/playbook-doc.js +1 -1
  62. data/dist/playbook-rails-react-bindings.js +1 -1
  63. data/dist/playbook-rails.js +1 -1
  64. data/dist/playbook.css +1 -1
  65. data/lib/playbook/version.rb +1 -1
  66. metadata +26 -6
  67. data/dist/chunks/_weekday_stacked-CHQAKYTa.js +0 -45
@@ -1,3 +1,3 @@
1
- This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `table_props` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table).
1
+ This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `table_props` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).
2
2
 
3
- This doc example showcases how to set a sticky header for a nonresponsive table. To achieve sticky header AND responsive functionality, see the ["Table Props Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#table-props-sticky-header) doc example below.
3
+ This doc example showcases the use of two table props, including how to render the vertical borders between columns.
@@ -1,3 +1,3 @@
1
1
  This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `tableProps` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).
2
2
 
3
- This doc example showcases how to set a sticky header for a nonresponsive table. To achieve sticky header AND responsive functionality, see the ["Table Props Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#table-props-sticky-header) doc example below.
3
+ This doc example showcases the use of two table props, including how to render the vertical borders between columns.
@@ -1,3 +1,7 @@
1
- Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `table_props` and giving the AdvancedTable a `max_height` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
1
+ Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `table_props` and giving the AdvancedTable a `max_height` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop.
2
2
 
3
- A sticky header on a nonresponsive table is demonstrated in the ["Table Props"](https://playbook.powerapp.cloud/kits/advanced_table#table-props) doc example above.
3
+ **NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
4
+
5
+ Expand the table above to see this in action.
6
+
7
+ A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#sticky-header) doc example above.
@@ -1,3 +1,7 @@
1
- Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
1
+ Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop.
2
2
 
3
- A sticky header on a nonresponsive table is demonstrated in the ["Table Props"](https://playbook.powerapp.cloud/kits/advanced_table/react#table-props) doc example above.
3
+ **NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
4
+
5
+ Expand the table above to see this in action.
6
+
7
+ A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header) doc example above.
@@ -5,7 +5,8 @@ examples:
5
5
  - advanced_table_beta_subrow_headers: SubRow Headers
6
6
  - advanced_table_collapsible_trail_rails: Collapsible Trail
7
7
  - advanced_table_table_props: Table Props
8
- - advanced_table_table_props_sticky_header: Table Props Sticky Header
8
+ - advanced_table_sticky_header_rails: Sticky Header
9
+ - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
9
10
  - advanced_table_beta_sort: Enable Sorting
10
11
  - advanced_table_responsive: Responsive Tables
11
12
  - advanced_table_custom_cell_rails: Custom Components for Cells
@@ -25,7 +26,10 @@ examples:
25
26
  - advanced_table_collapsible_trail: Collapsible Trail
26
27
  - advanced_table_table_options: Table Options
27
28
  - advanced_table_table_props: Table Props
28
- - advanced_table_table_props_sticky_header: Table Props Sticky Header
29
+ - advanced_table_sticky_header: Sticky Header
30
+ - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
31
+ - advanced_table_sticky_columns: Sticky Columns
32
+ - advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
29
33
  - advanced_table_inline_row_loading: Inline Row Loading
30
34
  - advanced_table_responsive: Responsive Tables
31
35
  - advanced_table_custom_cell: Custom Components for Cells
@@ -22,4 +22,7 @@ export { default as AdvancedTableSelectableRowsActions } from './_advanced_table
22
22
  export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
23
23
  export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
24
24
  export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
25
- export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
25
+ export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
26
+ export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
27
+ export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
28
+ export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
@@ -0,0 +1,97 @@
1
+ @mixin advanced-table-sticky-mixin(
2
+ $border-color,
3
+ $bg-main,
4
+ $bg-secondary,
5
+ $highlight: $info_subtle
6
+ ) {
7
+ border-radius: 4px;
8
+ box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
9
+ display: block;
10
+ [class^="pb_table"].table-sm.table-card thead tr th:first-child,
11
+ [class^="pb_table"].table-sm:not(.no-hover).table-card
12
+ tbody
13
+ tr
14
+ td:first-child {
15
+ border-left-width: 0px !important;
16
+ }
17
+ [class^="pb_table"].table-sm.table-card thead tr th:last-child,
18
+ [class^="pb_table"].table-sm:not(.no-hover).table-card
19
+ tbody
20
+ tr
21
+ td:last-child {
22
+ border-right-width: 0px;
23
+ }
24
+ [class^="pb_table"].table-sm.table-card tbody tr:last-child td:first-child,
25
+ [class^="pb_table"].table-sm.table-card tbody tr:last-child td:last-child {
26
+ border-radius: 0 0 0 0;
27
+ }
28
+ .table-header-cells:first-child,
29
+ td:first-child,
30
+ .pb_table_td:first-child,
31
+ .checkbox-cell.checkbox-cell-header:first-child,
32
+ .table-header-cells.sticky-left,
33
+ [class*="pinned-left"] {
34
+ background-color: $bg-main;
35
+ box-shadow: $shadow_deep !important;
36
+ position: sticky !important;
37
+ left: 0;
38
+ z-index: 2;
39
+ }
40
+
41
+ .bg-silver {
42
+ td:first-child,
43
+ .sticky-left {
44
+ background-color: $bg-secondary;
45
+ }
46
+ }
47
+ .bg-row-selection {
48
+ td:first-child,
49
+ .sticky-left {
50
+ background-color: $highlight;
51
+ }
52
+ }
53
+
54
+ .bg-white {
55
+ td:first-child,
56
+ .sticky-left {
57
+ background-color: $bg-main;
58
+ }
59
+ }
60
+
61
+ .virtualized-table-row {
62
+ &.bg-silver td:first-child {
63
+ background-color: $bg-secondary;
64
+ }
65
+ &.bg-white td:first-child {
66
+ background-color: $bg-main;
67
+ }
68
+ &.bg-row-selection td:first-child {
69
+ background-color: $highlight;
70
+ }
71
+ }
72
+
73
+ .row-selection-actions-card {
74
+ border-right-width: 0px;
75
+ border-left-width: 0px;
76
+ position: sticky;
77
+ top: 0;
78
+ left: 0;
79
+ border-radius: unset;
80
+ }
81
+
82
+ .checkbox-cell {
83
+ display: table-cell !important;
84
+ }
85
+
86
+ .sticky-header {
87
+ thead {
88
+ th:first-child {
89
+ box-shadow: 1px 0 10px -2px $border-color !important;
90
+ }
91
+ }
92
+
93
+ .pb_advanced_table_header {
94
+ box-shadow: none !important;
95
+ }
96
+ }
97
+ }
@@ -1,5 +1,4 @@
1
-
2
- import React, { useState } from 'react'
1
+ import React from 'react'
3
2
  import classnames from 'classnames'
4
3
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
4
  import { globalProps } from '../utilities/globalProps'
@@ -7,16 +6,19 @@ import { globalProps } from '../utilities/globalProps'
7
6
  import Button from '../pb_button/_button'
8
7
  import Tooltip from '../pb_tooltip/_tooltip'
9
8
 
9
+ import usePBCopy from './usePBCopy'
10
+
10
11
  type CopyButtonProps = {
11
- aria?: { [key: string]: string },
12
- className?: string,
13
- data?: { [key: string]: string },
14
- id?: string,
15
- from?: string,
16
- text?: string,
17
- tooltipPlacement?: "top" | "right" | "bottom" | "left",
18
- tooltipText?: string,
19
- value?: string,
12
+ aria?: { [key: string]: string }
13
+ className?: string
14
+ data?: { [key: string]: string }
15
+ id?: string
16
+ from?: string
17
+ text?: string
18
+ tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left'
19
+ tooltipText?: string
20
+ value?: string
21
+ timeout?: number
20
22
  }
21
23
 
22
24
  const CopyButton = (props: CopyButtonProps) => {
@@ -27,62 +29,34 @@ const CopyButton = (props: CopyButtonProps) => {
27
29
  from = '',
28
30
  id,
29
31
  text= 'Copy',
32
+ timeout = 1000,
30
33
  tooltipPlacement= 'bottom',
31
34
  tooltipText = 'Copied!',
32
35
  value = '',
33
36
  } = props
34
37
 
35
- const [copied, setCopied] = useState(false)
38
+ const [copied, copy] = usePBCopy({ value, from, timeout })
36
39
 
37
40
  const ariaProps = buildAriaProps(aria)
38
41
  const dataProps = buildDataProps(data)
39
42
  const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
40
43
 
41
- const copy = () => {
42
- if (!from && !value) {
43
- return
44
- }
45
-
46
- if (value) {
47
- navigator.clipboard.writeText(value)
48
- } else if (from) {
49
- const copyElement = document.getElementById(from);
50
- let copyText = copyElement?.innerText
51
-
52
- if (copyElement instanceof HTMLTextAreaElement || copyElement instanceof HTMLInputElement) {
53
- copyText = copyElement.value;
54
- }
55
-
56
- if (copyText) {
57
- navigator.clipboard.writeText(copyText)
58
- }
59
- }
60
-
61
- setCopied(true)
62
-
63
- setTimeout(() => {
64
- setCopied(false)
65
- }, 1000);
66
- }
67
-
68
44
  return (
69
- <div
70
- {...ariaProps}
45
+ <div {...ariaProps}
71
46
  {...dataProps}
72
47
  className={classes}
73
48
  id={id}
74
49
  >
75
- <Tooltip
50
+ <Tooltip
76
51
  forceOpenTooltip={copied}
77
52
  placement={tooltipPlacement}
78
53
  showTooltip={false}
79
54
  text={tooltipText}
80
55
  >
81
- <Button
82
- icon='copy'
56
+ <Button icon="copy"
83
57
  onClick={copy}
84
58
  >
85
- { text }
59
+ {text}
86
60
  </Button>
87
61
  </Tooltip>
88
62
  </div>
@@ -0,0 +1,54 @@
1
+ import React, { useEffect, useState } from 'react'
2
+ import usePBCopy from '../../pb_copy_button/usePBCopy'
3
+ import Body from '../../pb_body/_body'
4
+ import Textarea from '../../pb_textarea/_textarea'
5
+ import Tooltip from '../../pb_tooltip/_tooltip'
6
+
7
+ const CopyButtonHook = ({...props}) => {
8
+ // This is how you can use the copy button hook to copy text to the clipboard
9
+ // eslint-disable-next-line no-unused-vars
10
+ const [copied, copyToClipboard] = usePBCopy({ from: 'hookbody' })
11
+ // I added a tooltip so it looks better in the ui
12
+ const [showTooltip, setShowTooltip] = useState(false)
13
+
14
+ const handleCopy = () => {
15
+ copyToClipboard()
16
+ setShowTooltip(true)
17
+ setTimeout(() => setShowTooltip(false), 1500)
18
+ }
19
+
20
+ useEffect(() => {
21
+ const el = document.getElementById('hookbody')
22
+ if (!el) return
23
+
24
+ el.addEventListener('click', handleCopy)
25
+ return () => {
26
+ el.removeEventListener('click', handleCopy)
27
+ }
28
+ }, [copyToClipboard])
29
+
30
+ return (
31
+ <div>
32
+ <Tooltip
33
+ delay={{ close: 1000 }}
34
+ forceOpenTooltip={showTooltip}
35
+ placement="top"
36
+ showTooltip={false}
37
+ text="Copied!"
38
+ >
39
+ <Body
40
+ cursor="pointer"
41
+ id="hookbody"
42
+ text="I'm a custom copy hook! Click this body to copy this text!"
43
+ />
44
+ </Tooltip>
45
+
46
+ <Textarea
47
+ {...props}
48
+ placeholder="Paste here"
49
+ />
50
+ </div>
51
+ )
52
+ }
53
+
54
+ export default CopyButtonHook
@@ -0,0 +1,3 @@
1
+ We provide a `usePBCopy` hook that you can import to your project. This hook will return a function that you can call to copy the text to the clipboard.
2
+
3
+ `usePBCopy({ from: 'your_id' })` will grab the `innerText` from `your_id` element, or `value` if it is an input element.
@@ -6,3 +6,4 @@ examples:
6
6
  react:
7
7
  - copy_button_default: Default
8
8
  - copy_button_from: Copy From
9
+ - copy_button_hook: Copy Hook
@@ -1,2 +1,3 @@
1
1
  export { default as CopyButtonDefault } from './_copy_button_default.jsx'
2
- export { default as CopyButtonFrom } from './_copy_button_from.jsx'
2
+ export { default as CopyButtonFrom } from './_copy_button_from.jsx'
3
+ export { default as CopyButtonHook } from './_copy_button_hook.jsx'
@@ -0,0 +1,45 @@
1
+ import { useState, useRef, useEffect } from 'react'
2
+
3
+ type UsePBCopyProps = {
4
+ value?: string
5
+ from?: string
6
+ timeout?: number
7
+ }
8
+
9
+ export default function usePBCopy({
10
+ value = '',
11
+ from = '',
12
+ timeout = 0,
13
+ }: UsePBCopyProps) {
14
+ const [copied, setCopied] = useState(false)
15
+ const timerRef = useRef<number>()
16
+
17
+ const copy = () => {
18
+ if (!value && !from) return
19
+
20
+ if (value) {
21
+ navigator.clipboard.writeText(value)
22
+ } else {
23
+ const el = document.getElementById(from)
24
+ let text = el?.innerText
25
+ if (el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement) {
26
+ text = el.value
27
+ }
28
+ if (text) navigator.clipboard.writeText(text)
29
+ }
30
+
31
+ setCopied(true)
32
+ window.clearTimeout(timerRef.current)
33
+ timerRef.current = window.setTimeout(() => {
34
+ setCopied(false)
35
+ }, timeout)
36
+ }
37
+
38
+ useEffect(() => {
39
+ return () => {
40
+ window.clearTimeout(timerRef.current)
41
+ }
42
+ }, [])
43
+
44
+ return [copied, copy] as const
45
+ }
@@ -1,7 +1,16 @@
1
1
  <div
2
2
  class="pb_dialog_wrapper_rails <%= object.full_height_style %>"
3
3
  data-pb-dialog-wrapper="true"
4
- data-overlay-click= <%= object.overlay_close %>
4
+ data-overlay-click="<%= object.overlay_close %>"
5
+ <% if object.custom_event_type.present? %>
6
+ data-custom-event-type="<%= object.custom_event_type %>"
7
+ <% end %>
8
+ <% if object.confirm_button_id.present? %>
9
+ data-confirm-button-id="<%= object.confirm_button_id %>"
10
+ <% end %>
11
+ <% if object.cancel_button_id.present? %>
12
+ data-cancel-button-id="<%= object.cancel_button_id %>"
13
+ <% end %>
5
14
  >
6
15
  <%= pb_content_tag(:dialog) do %>
7
16
  <% if object.status === "" && object.title %>
@@ -21,6 +21,8 @@ module Playbook
21
21
  prop :status, type: Playbook::Props::Enum,
22
22
  values: ["info", "caution", "delete", "error", "success", "default", ""],
23
23
  default: ""
24
+ prop :custom_event_type, type: Playbook::Props::String,
25
+ default: ""
24
26
 
25
27
  def classname
26
28
  generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}_#{placement}")
@@ -0,0 +1,117 @@
1
+ <%= pb_rails("flex", props:{ gap: "xs", wrap:true}) do %>
2
+ <%= pb_rails("button", props: { id: "button-open-example-turbo-frames", margin_right: "md", text: "Open Dialog via Custom Event" }) %>
3
+ <%= pb_rails("button", props: { id: "open-dialog-button", data: { open_dialog: "dialog-confirm-turbo-frames" }, margin_right: "md", text: "Custom Event Linked to Confirm Button" }) %>
4
+ <%= pb_rails("button", props: { id: "button-open-multi-dialog", text: "Mutliple Events Example" }) %>
5
+ <% end %>
6
+
7
+ <!-- Example 1: Basic dialog with custom event opening -->
8
+ <%= pb_rails("dialog", props: {
9
+ id: "dialog-open-turbo-frames",
10
+ title: "Click Event Simulation",
11
+ text: "Demonstrating Opening the Dialog with a Custom Event.",
12
+ custom_event_type: "dialogOpen",
13
+ cancel_button: "Cancel Button",
14
+ confirm_button: "Okay",
15
+ confirm_button_id: "confirm-button-turbo-frames"
16
+ }) %>
17
+
18
+ <script>
19
+ document.getElementById("button-open-example-turbo-frames").addEventListener("click", () => {
20
+ console.log("📣 Dispatching 'dialogOpen' custom event")
21
+
22
+ window.dispatchEvent(new CustomEvent("dialogOpen", {
23
+ bubbles: true,
24
+ detail: {
25
+ dialogId: "dialog-open-turbo-frames",
26
+ action: "open"
27
+ }
28
+ }))
29
+
30
+ console.log("✅ Custom event dispatched - dialog should open")
31
+ })
32
+ </script>
33
+
34
+ <!-- Example 2: Dialog with custom event linking confirm button to closing the dialog-->
35
+ <%= pb_rails("dialog", props: {
36
+ id: "dialog-confirm-turbo-frames",
37
+ title: "Custom Event Button Action",
38
+ text: "Clicking this dialog's confirm button triggers closing the dialog as well.",
39
+ custom_event_type: "turboResponse",
40
+ cancel_button: "Cancel",
41
+ cancel_button_id: "cancel-button-id-turbo-frames",
42
+ confirm_button: "Confirm Button",
43
+ confirm_button_id: "confirm-button-id-turbo-frames"
44
+ }) %>
45
+
46
+ <script>
47
+ window.addEventListener("turboResponse", (event) => {
48
+ const { dialogId, action, cancelButtonId } = event.detail || {}
49
+ console.log("📦 turboResponse event triggered:", { dialogId, action, cancelButtonId })
50
+
51
+ if (action === "close" && cancelButtonId) {
52
+ const dialog = document.getElementById(dialogId)
53
+ if (dialog?.close) {
54
+ console.log("🚪 Closing dialog programmatically")
55
+ dialog.close()
56
+ }
57
+ }
58
+ })
59
+
60
+ document.getElementById("confirm-button-id-turbo-frames").addEventListener("click", function () {
61
+ console.log("✅ Confirm button clicked! Triggering cancel via turboResponse")
62
+
63
+ window.dispatchEvent(new CustomEvent("turboResponse", {
64
+ detail: {
65
+ dialogId: "dialog-confirm-turbo-frames",
66
+ action: "close",
67
+ cancelButtonId: "cancel-button-id-turbo-frames"
68
+ }
69
+ }))
70
+ })
71
+ </script>
72
+
73
+ <!-- Example 3: Dialog with multiple custom event types -->
74
+ <%= pb_rails("dialog", props: {
75
+ id: "multi-event-dialog",
76
+ title: "Multiple Event Types",
77
+ text: "This dialog responds to multiple custom event types - see console logs.",
78
+ custom_event_type: "dialogOpenMutli,turboResponseMulti",
79
+ cancel_button: "Cancel",
80
+ cancel_button_id: "multi-event-cancel",
81
+ confirm_button: "Confirm",
82
+ confirm_button_id: "multi-event-confirm"
83
+ }) %>
84
+
85
+ <script>
86
+ document.getElementById("button-open-multi-dialog").addEventListener("click", () => {
87
+ console.log("📣 Dispatching 'dialogOpenMutli' custom event")
88
+ window.dispatchEvent(new CustomEvent("dialogOpenMutli", {
89
+ detail: {
90
+ dialogId: "multi-event-dialog",
91
+ action: "open"
92
+ }
93
+ }))
94
+ })
95
+
96
+ document.getElementById("multi-event-confirm")?.addEventListener("click", function() {
97
+ console.log("✅ Confirm clicked — dispatching 'turboResponseMulti' to simulate dialog close")
98
+
99
+ window.dispatchEvent(new CustomEvent("turboResponseMulti", {
100
+ detail: {
101
+ dialogId: "multi-event-dialog",
102
+ action: "close",
103
+ cancelButtonId: "multi-event-cancel"
104
+ }
105
+ }))
106
+ })
107
+
108
+ window.addEventListener("turboResponseMulti", (event) => {
109
+ const { dialogId, action, cancelButtonId } = event.detail || {}
110
+
111
+ if (action === "close" && dialogId) {
112
+ const dialog = document.getElementById(dialogId)
113
+ dialog.close?.()
114
+ console.log("🚪 Closing dialog programmatically")
115
+ }
116
+ })
117
+ </script>
@@ -0,0 +1,9 @@
1
+ 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.
2
+
3
+ The examples demonstrate two use cases:
4
+ 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.
5
+ 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.
6
+ 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.
7
+
8
+ 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.
9
+ The implementation handles various actions including 'open', 'close', 'clickConfirm', and 'clickCancel', making it flexible for different interaction patterns in your Turbo-enhanced application.
@@ -11,6 +11,7 @@ examples:
11
11
  - dialog_full_height: Full Height
12
12
  - dialog_full_height_placement: Full Height Placement
13
13
  - dialog_loading: Loading
14
+ - dialog_turbo_frames: Within Turbo Frames
14
15
 
15
16
 
16
17
  react: