playbook_ui_docs 16.4.0.pre.rc.5 → 16.4.0
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_popover/docs/_popover_placement.jsx +81 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_placement_react.md +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_position.html.erb +128 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_position_rails.md +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_popover/docs/index.js +2 -1
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: d75941f7f1cb8007566e28c430baaee9882fed47bb4ac81e68962ce8355edf6d
|
|
4
|
+
data.tar.gz: df099e190d6c86ddcc19811aba14f0b347b5cee4f6d34828ade8d4a044bac51f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ee1f847879b0fea73374b12a9b6504a406db13deab901edeb3f1c34fb60b25b80bf630b31dcc74d82c3a59fa5ef9e18ae3d6f9907cd80f6aec8895592cdaf0fc
|
|
7
|
+
data.tar.gz: 6a4d4074147c4150f0536117b80bc0b9578dc48c3e0b5e3c9c63325d929be8f982d84d71d181114ec5f728afc156ef365377a3e2eb04172d00d8bb7962beb792
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
|
|
3
|
+
import Button from '../../pb_button/_button'
|
|
4
|
+
import Flex from '../../pb_flex/_flex'
|
|
5
|
+
import PbReactPopover from '../../pb_popover/_popover'
|
|
6
|
+
|
|
7
|
+
const ROWS = [
|
|
8
|
+
[
|
|
9
|
+
{ placement: 'top', label: 'Top' },
|
|
10
|
+
{ placement: 'top-start', label: 'Top start' },
|
|
11
|
+
{ placement: 'top-end', label: 'Top end' },
|
|
12
|
+
],
|
|
13
|
+
[
|
|
14
|
+
{ placement: 'bottom', label: 'Bottom' },
|
|
15
|
+
{ placement: 'bottom-start', label: 'Bottom start' },
|
|
16
|
+
{ placement: 'bottom-end', label: 'Bottom end' },
|
|
17
|
+
],
|
|
18
|
+
[
|
|
19
|
+
{ placement: 'left', label: 'Left' },
|
|
20
|
+
{ placement: 'left-start', label: 'Left start' },
|
|
21
|
+
{ placement: 'left-end', label: 'Left end' },
|
|
22
|
+
],
|
|
23
|
+
[
|
|
24
|
+
{ placement: 'right', label: 'Right' },
|
|
25
|
+
{ placement: 'right-start', label: 'Right start' },
|
|
26
|
+
{ placement: 'right-end', label: 'Right end' },
|
|
27
|
+
],
|
|
28
|
+
]
|
|
29
|
+
|
|
30
|
+
const PopoverPlacement = (props) => {
|
|
31
|
+
const [open, setOpen] = useState({})
|
|
32
|
+
|
|
33
|
+
const isOpen = (placement) => open[placement] === true
|
|
34
|
+
const setOpenFor = (placement) => (value) => setOpen((prev) => ({ ...prev, [placement]: value }))
|
|
35
|
+
const toggle = (placement) => setOpenFor(placement)(!isOpen(placement))
|
|
36
|
+
const handleShouldClose = (placement) => (shouldClose) => {
|
|
37
|
+
if (shouldClose) setOpenFor(placement)(false)
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<>
|
|
42
|
+
{ROWS.map((placements, rowIndex) => (
|
|
43
|
+
<Flex
|
|
44
|
+
justify="around"
|
|
45
|
+
key={placements[0].placement}
|
|
46
|
+
marginBottom={rowIndex < ROWS.length - 1 ? 'sm' : undefined}
|
|
47
|
+
orientation="row"
|
|
48
|
+
wrap
|
|
49
|
+
{...props}
|
|
50
|
+
>
|
|
51
|
+
{placements.map(({ placement, label }) => {
|
|
52
|
+
const trigger = (
|
|
53
|
+
<Button
|
|
54
|
+
key={placement}
|
|
55
|
+
onClick={() => toggle(placement)}
|
|
56
|
+
text={label}
|
|
57
|
+
variant="secondary"
|
|
58
|
+
/>
|
|
59
|
+
)
|
|
60
|
+
return (
|
|
61
|
+
<PbReactPopover
|
|
62
|
+
closeOnClick="outside"
|
|
63
|
+
key={placement}
|
|
64
|
+
offset
|
|
65
|
+
placement={placement}
|
|
66
|
+
reference={trigger}
|
|
67
|
+
shouldClosePopover={handleShouldClose(placement)}
|
|
68
|
+
show={isOpen(placement)}
|
|
69
|
+
{...props}
|
|
70
|
+
>
|
|
71
|
+
{`Popover: ${label.toLowerCase()}`}
|
|
72
|
+
</PbReactPopover>
|
|
73
|
+
)
|
|
74
|
+
})}
|
|
75
|
+
</Flex>
|
|
76
|
+
))}
|
|
77
|
+
</>
|
|
78
|
+
)
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
export default PopoverPlacement
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Use the `placement` 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`.
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
<%= pb_rails("flex", props: { justify: "around", margin_bottom: "sm", orientation: "row", wrap: true }) do %>
|
|
2
|
+
<%= pb_rails("button", props: { text: "Top", variant: "secondary", id: "placement-popover-top" }) %>
|
|
3
|
+
<%= pb_rails("popover", props: {
|
|
4
|
+
close_on_click: "outside",
|
|
5
|
+
trigger_element_id: "placement-popover-top",
|
|
6
|
+
tooltip_id: "placement-tooltip-top",
|
|
7
|
+
position: "top",
|
|
8
|
+
offset: true
|
|
9
|
+
}) do %>
|
|
10
|
+
Popover: top
|
|
11
|
+
<% end %>
|
|
12
|
+
<%= pb_rails("button", props: { text: "Top start", variant: "secondary", id: "placement-popover-top-start" }) %>
|
|
13
|
+
<%= pb_rails("popover", props: {
|
|
14
|
+
close_on_click: "outside",
|
|
15
|
+
trigger_element_id: "placement-popover-top-start",
|
|
16
|
+
tooltip_id: "placement-tooltip-top-start",
|
|
17
|
+
position: "top-start",
|
|
18
|
+
offset: true
|
|
19
|
+
}) do %>
|
|
20
|
+
Popover: top start
|
|
21
|
+
<% end %>
|
|
22
|
+
<%= pb_rails("button", props: { text: "Top end", variant: "secondary", id: "placement-popover-top-end" }) %>
|
|
23
|
+
<%= pb_rails("popover", props: {
|
|
24
|
+
close_on_click: "outside",
|
|
25
|
+
trigger_element_id: "placement-popover-top-end",
|
|
26
|
+
tooltip_id: "placement-tooltip-top-end",
|
|
27
|
+
position: "top-end",
|
|
28
|
+
offset: true
|
|
29
|
+
}) do %>
|
|
30
|
+
Popover: top end
|
|
31
|
+
<% end %>
|
|
32
|
+
<% end %>
|
|
33
|
+
<%= pb_rails("flex", props: { justify: "around", margin_bottom: "sm", orientation: "row", wrap: true }) do %>
|
|
34
|
+
<%= pb_rails("button", props: { text: "Bottom", variant: "secondary", id: "placement-popover-bottom" }) %>
|
|
35
|
+
<%= pb_rails("popover", props: {
|
|
36
|
+
close_on_click: "outside",
|
|
37
|
+
trigger_element_id: "placement-popover-bottom",
|
|
38
|
+
tooltip_id: "placement-tooltip-bottom",
|
|
39
|
+
position: "bottom",
|
|
40
|
+
offset: true
|
|
41
|
+
}) do %>
|
|
42
|
+
Popover: bottom
|
|
43
|
+
<% end %>
|
|
44
|
+
<%= pb_rails("button", props: { text: "Bottom start", variant: "secondary", id: "placement-popover-bottom-start" }) %>
|
|
45
|
+
<%= pb_rails("popover", props: {
|
|
46
|
+
close_on_click: "outside",
|
|
47
|
+
trigger_element_id: "placement-popover-bottom-start",
|
|
48
|
+
tooltip_id: "placement-tooltip-bottom-start",
|
|
49
|
+
position: "bottom-start",
|
|
50
|
+
offset: true
|
|
51
|
+
}) do %>
|
|
52
|
+
Popover: bottom start
|
|
53
|
+
<% end %>
|
|
54
|
+
<%= pb_rails("button", props: { text: "Bottom end", variant: "secondary", id: "placement-popover-bottom-end" }) %>
|
|
55
|
+
<%= pb_rails("popover", props: {
|
|
56
|
+
close_on_click: "outside",
|
|
57
|
+
trigger_element_id: "placement-popover-bottom-end",
|
|
58
|
+
tooltip_id: "placement-tooltip-bottom-end",
|
|
59
|
+
position: "bottom-end",
|
|
60
|
+
offset: true
|
|
61
|
+
}) do %>
|
|
62
|
+
Popover: bottom end
|
|
63
|
+
<% end %>
|
|
64
|
+
<% end %>
|
|
65
|
+
<%= pb_rails("flex", props: { justify: "around", margin_bottom: "sm", orientation: "row", wrap: true }) do %>
|
|
66
|
+
<%= pb_rails("button", props: { text: "Left", variant: "secondary", id: "placement-popover-left" }) %>
|
|
67
|
+
<%= pb_rails("popover", props: {
|
|
68
|
+
close_on_click: "outside",
|
|
69
|
+
trigger_element_id: "placement-popover-left",
|
|
70
|
+
tooltip_id: "placement-tooltip-left",
|
|
71
|
+
position: "left",
|
|
72
|
+
offset: true
|
|
73
|
+
}) do %>
|
|
74
|
+
Popover: left
|
|
75
|
+
<% end %>
|
|
76
|
+
<%= pb_rails("button", props: { text: "Left start", variant: "secondary", id: "placement-popover-left-start" }) %>
|
|
77
|
+
<%= pb_rails("popover", props: {
|
|
78
|
+
close_on_click: "outside",
|
|
79
|
+
trigger_element_id: "placement-popover-left-start",
|
|
80
|
+
tooltip_id: "placement-tooltip-left-start",
|
|
81
|
+
position: "left-start",
|
|
82
|
+
offset: true
|
|
83
|
+
}) do %>
|
|
84
|
+
Popover: left start
|
|
85
|
+
<% end %>
|
|
86
|
+
<%= pb_rails("button", props: { text: "Left end", variant: "secondary", id: "placement-popover-left-end" }) %>
|
|
87
|
+
<%= pb_rails("popover", props: {
|
|
88
|
+
close_on_click: "outside",
|
|
89
|
+
trigger_element_id: "placement-popover-left-end",
|
|
90
|
+
tooltip_id: "placement-tooltip-left-end",
|
|
91
|
+
position: "left-end",
|
|
92
|
+
offset: true
|
|
93
|
+
}) do %>
|
|
94
|
+
Popover: left end
|
|
95
|
+
<% end %>
|
|
96
|
+
<% end %>
|
|
97
|
+
<%= pb_rails("flex", props: { justify: "around", orientation: "row", wrap: true }) do %>
|
|
98
|
+
<%= pb_rails("button", props: { text: "Right", variant: "secondary", id: "placement-popover-right" }) %>
|
|
99
|
+
<%= pb_rails("popover", props: {
|
|
100
|
+
close_on_click: "outside",
|
|
101
|
+
trigger_element_id: "placement-popover-right",
|
|
102
|
+
tooltip_id: "placement-tooltip-right",
|
|
103
|
+
position: "right",
|
|
104
|
+
offset: true
|
|
105
|
+
}) do %>
|
|
106
|
+
Popover: right
|
|
107
|
+
<% end %>
|
|
108
|
+
<%= pb_rails("button", props: { text: "Right start", variant: "secondary", id: "placement-popover-right-start" }) %>
|
|
109
|
+
<%= pb_rails("popover", props: {
|
|
110
|
+
close_on_click: "outside",
|
|
111
|
+
trigger_element_id: "placement-popover-right-start",
|
|
112
|
+
tooltip_id: "placement-tooltip-right-start",
|
|
113
|
+
position: "right-start",
|
|
114
|
+
offset: true
|
|
115
|
+
}) do %>
|
|
116
|
+
Popover: right start
|
|
117
|
+
<% end %>
|
|
118
|
+
<%= pb_rails("button", props: { text: "Right end", variant: "secondary", id: "placement-popover-right-end" }) %>
|
|
119
|
+
<%= pb_rails("popover", props: {
|
|
120
|
+
close_on_click: "outside",
|
|
121
|
+
trigger_element_id: "placement-popover-right-end",
|
|
122
|
+
tooltip_id: "placement-tooltip-right-end",
|
|
123
|
+
position: "right-end",
|
|
124
|
+
offset: true
|
|
125
|
+
}) do %>
|
|
126
|
+
Popover: right end
|
|
127
|
+
<% end %>
|
|
128
|
+
<% end %>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
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`.
|
|
@@ -7,6 +7,7 @@ examples:
|
|
|
7
7
|
- popover_scroll_height: Scroll and Height Settings
|
|
8
8
|
- popover_actionable_content: With Actionable Content
|
|
9
9
|
- popover_append_to: Append To
|
|
10
|
+
- popover_position: Position
|
|
10
11
|
|
|
11
12
|
react:
|
|
12
13
|
- popover_default: Default
|
|
@@ -16,3 +17,4 @@ examples:
|
|
|
16
17
|
- popover_scroll_height: Scroll and Height Settings
|
|
17
18
|
- popover_actionable_content: With Actionable Content
|
|
18
19
|
- popover_append_to: Append To
|
|
20
|
+
- popover_placement: Placement
|
|
@@ -4,4 +4,5 @@ export { default as PopoverClose } from './_popover_close.jsx'
|
|
|
4
4
|
export { default as PopoverZIndex } from './_popover_z_index.jsx'
|
|
5
5
|
export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
|
|
6
6
|
export { default as PopoverActionableContent } from './_popover_actionable_content.jsx'
|
|
7
|
-
export { default as PopoverAppendTo } from './_popover_append_to.jsx'
|
|
7
|
+
export { default as PopoverAppendTo } from './_popover_append_to.jsx'
|
|
8
|
+
export { default as PopoverPlacement } from './_popover_placement.jsx'
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 16.4.0
|
|
4
|
+
version: 16.4.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2026-03-
|
|
12
|
+
date: 2026-03-17 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -1869,6 +1869,10 @@ files:
|
|
|
1869
1869
|
- app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb
|
|
1870
1870
|
- app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx
|
|
1871
1871
|
- app/pb_kits/playbook/pb_popover/docs/_popover_list.md
|
|
1872
|
+
- app/pb_kits/playbook/pb_popover/docs/_popover_placement.jsx
|
|
1873
|
+
- app/pb_kits/playbook/pb_popover/docs/_popover_placement_react.md
|
|
1874
|
+
- app/pb_kits/playbook/pb_popover/docs/_popover_position.html.erb
|
|
1875
|
+
- app/pb_kits/playbook/pb_popover/docs/_popover_position_rails.md
|
|
1872
1876
|
- app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.html.erb
|
|
1873
1877
|
- app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx
|
|
1874
1878
|
- app/pb_kits/playbook/pb_popover/docs/_popover_z_index.html.erb
|