playbook_ui_docs 16.5.0.pre.rc.1 → 16.5.0.pre.rc.2
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_button/docs/_button_full_width_rails.md +19 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_full_width_react.md +23 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.html.erb +109 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.jsx +127 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -0
- metadata +7 -3
- data/app/pb_kits/playbook/pb_button/docs/_button_full_width.md +0 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 903dbdde789fdb0085e7415f692b1d70008e4c564c8e45338a8937f8190ce2a8
|
|
4
|
+
data.tar.gz: fe480e2fd4bd124de695bfd4040fb39c66096700c168ee89d84e9bb776a89b1f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 66e281ab59666a9d9c5f6c8ec0e43ceb200f1de82b1ee21497c0cb68dba3cb598ff2a377efa92e55bf999d3cef31ea5aa878e366f0bc9c1da7d7a93479419ec2
|
|
7
|
+
data.tar.gz: 50f1e4325f2b376250b1281d08128b303f7396d01ea6d537949dbf388e778dd53b15dafa79ebcd6477885580a7924f4f1f5be886860c43c042713e39ccab5add
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
This button is used many times for mobile or other things like cards and sidebars.
|
|
2
|
+
|
|
3
|
+
### Responsive `display` and `full_width`
|
|
4
|
+
|
|
5
|
+
`full_width` applies block styling that includes `display: flex` on the **same element** as the button. The **`display` global prop** also sets `display` (via utility classes, often with `!important`).
|
|
6
|
+
|
|
7
|
+
Putting **both** on one button means **two systems control `display` on one node**, which can cause wrong visibility (e.g. both a header and a full-width mobile button showing) or confusing cascade behavior.
|
|
8
|
+
|
|
9
|
+
**Recommended:** Put responsive `display` on a **parent** (e.g. `Flex`, `Card`, or a plain wrapper) and keep `full_width` only on the `Button` inside. The wrapper handles show/hide by breakpoint; the button only handles full-width layout.
|
|
10
|
+
|
|
11
|
+
```erb
|
|
12
|
+
<%= pb_rails("flex", props: {
|
|
13
|
+
display: { xs: "flex", default: "none" },
|
|
14
|
+
orientation: "column",
|
|
15
|
+
width: "100%",
|
|
16
|
+
}) do %>
|
|
17
|
+
<%= pb_rails("button", props: { full_width: true, text: "Add" }) %>
|
|
18
|
+
<% end %>
|
|
19
|
+
```
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
This button is used many times for mobile or other things like cards and sidebars.
|
|
2
|
+
|
|
3
|
+
### Responsive `display` and `full_width`
|
|
4
|
+
|
|
5
|
+
`full_width` applies block styling that includes `display: flex` on the **same element** as the button. The **`display` global prop** also sets `display` (via utility classes, often with `!important`).
|
|
6
|
+
|
|
7
|
+
Putting **both** on one button means **two systems control `display` on one node**, which can cause wrong visibility (e.g. both a header and a full-width mobile button showing) or confusing cascade behavior.
|
|
8
|
+
|
|
9
|
+
**Recommended:** Put responsive `display` on a **parent** (e.g. `Flex`, `Card`, or a plain wrapper) and keep `fullWidth` only on the `Button` inside. The wrapper handles show/hide by breakpoint; the button only handles full-width layout.
|
|
10
|
+
|
|
11
|
+
```jsx
|
|
12
|
+
import { Flex, Button } from "playbook-ui"
|
|
13
|
+
|
|
14
|
+
const Example = () => (
|
|
15
|
+
<Flex
|
|
16
|
+
display={{ xs: "flex", default: "none" }}
|
|
17
|
+
orientation="column"
|
|
18
|
+
width="100%"
|
|
19
|
+
>
|
|
20
|
+
<Button fullWidth text="Add" />
|
|
21
|
+
</Flex>
|
|
22
|
+
)
|
|
23
|
+
```
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
<%
|
|
2
|
+
tree_base = [{
|
|
3
|
+
label: "Power Home Remodeling",
|
|
4
|
+
value: "powerHomeRemodeling",
|
|
5
|
+
id: "100",
|
|
6
|
+
expanded: true,
|
|
7
|
+
children: [
|
|
8
|
+
{
|
|
9
|
+
label: "People",
|
|
10
|
+
value: "people",
|
|
11
|
+
id: "101",
|
|
12
|
+
expanded: true,
|
|
13
|
+
children: [
|
|
14
|
+
{
|
|
15
|
+
label: "Talent Acquisition",
|
|
16
|
+
value: "talentAcquisition",
|
|
17
|
+
id: "102",
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
label: "Business Affairs",
|
|
21
|
+
value: "business Affairs",
|
|
22
|
+
id: "103",
|
|
23
|
+
children: [
|
|
24
|
+
{
|
|
25
|
+
label: "Initiatives",
|
|
26
|
+
value: "initiatives",
|
|
27
|
+
id: "104",
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
label: "Learning & Development",
|
|
31
|
+
value: "learningAndDevelopment",
|
|
32
|
+
id: "105",
|
|
33
|
+
},
|
|
34
|
+
],
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
label: "People Experience",
|
|
38
|
+
value: "peopleExperience",
|
|
39
|
+
id: "106",
|
|
40
|
+
},
|
|
41
|
+
],
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
label: "Contact Center",
|
|
45
|
+
value: "contactCenter",
|
|
46
|
+
id: "107",
|
|
47
|
+
children: [
|
|
48
|
+
{
|
|
49
|
+
label: "Appointment Management",
|
|
50
|
+
value: "appointmentManagement",
|
|
51
|
+
id: "108",
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
label: "Customer Service",
|
|
55
|
+
value: "customerService",
|
|
56
|
+
id: "109",
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
label: "Energy",
|
|
60
|
+
value: "energy",
|
|
61
|
+
id: "110",
|
|
62
|
+
},
|
|
63
|
+
],
|
|
64
|
+
},
|
|
65
|
+
],
|
|
66
|
+
}]
|
|
67
|
+
|
|
68
|
+
prefix_mls_ids = nil
|
|
69
|
+
prefix_mls_ids = ->(nodes, pfx) {
|
|
70
|
+
nodes.map do |n|
|
|
71
|
+
h = n.dup
|
|
72
|
+
h[:id] = "#{pfx}#{n[:id]}"
|
|
73
|
+
h[:children] = prefix_mls_ids.call(n[:children], pfx) if n[:children].present?
|
|
74
|
+
h
|
|
75
|
+
end
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
tree_multi = prefix_mls_ids.call(tree_base, "phm_")
|
|
79
|
+
tree_return_all = prefix_mls_ids.call(tree_base, "phr_")
|
|
80
|
+
tree_single = prefix_mls_ids.call(tree_base, "phs_")
|
|
81
|
+
%>
|
|
82
|
+
|
|
83
|
+
<%= pb_rails("multi_level_select", props: {
|
|
84
|
+
id: "multi-level-select-placeholder-multi-rails",
|
|
85
|
+
label: "Multi (default)",
|
|
86
|
+
margin_bottom: "sm",
|
|
87
|
+
name: "placeholder_multi",
|
|
88
|
+
tree_data: tree_multi,
|
|
89
|
+
placeholder: "Search or choose options…",
|
|
90
|
+
}) %>
|
|
91
|
+
|
|
92
|
+
<%= pb_rails("multi_level_select", props: {
|
|
93
|
+
id: "multi-level-select-placeholder-return-all-rails",
|
|
94
|
+
label: "Multi (return all selected)",
|
|
95
|
+
margin_bottom: "sm",
|
|
96
|
+
name: "placeholder_return_all",
|
|
97
|
+
placeholder: "Departments...",
|
|
98
|
+
return_all_selected: true,
|
|
99
|
+
tree_data: tree_return_all,
|
|
100
|
+
}) %>
|
|
101
|
+
|
|
102
|
+
<%= pb_rails("multi_level_select", props: {
|
|
103
|
+
id: "multi-level-select-placeholder-single-rails",
|
|
104
|
+
label: "Single",
|
|
105
|
+
name: "placeholder_single",
|
|
106
|
+
placeholder: "Select one option…",
|
|
107
|
+
tree_data: tree_single,
|
|
108
|
+
variant: "single",
|
|
109
|
+
}) %>
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
import MultiLevelSelect from "../_multi_level_select";
|
|
4
|
+
|
|
5
|
+
const treeTemplate = [
|
|
6
|
+
{
|
|
7
|
+
label: "Power Home Remodeling",
|
|
8
|
+
value: "powerHomeRemodeling",
|
|
9
|
+
id: "powerhome1",
|
|
10
|
+
expanded: true,
|
|
11
|
+
children: [
|
|
12
|
+
{
|
|
13
|
+
label: "People",
|
|
14
|
+
value: "people",
|
|
15
|
+
id: "people1",
|
|
16
|
+
expanded: true,
|
|
17
|
+
children: [
|
|
18
|
+
{
|
|
19
|
+
label: "Talent Acquisition",
|
|
20
|
+
value: "talentAcquisition",
|
|
21
|
+
id: "talent1",
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: "Business Affairs",
|
|
25
|
+
value: "businessAffairs",
|
|
26
|
+
id: "business1",
|
|
27
|
+
children: [
|
|
28
|
+
{
|
|
29
|
+
label: "Initiatives",
|
|
30
|
+
value: "initiatives",
|
|
31
|
+
id: "initiative1",
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
label: "Learning & Development",
|
|
35
|
+
value: "learningAndDevelopment",
|
|
36
|
+
id: "development1",
|
|
37
|
+
},
|
|
38
|
+
],
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
label: "People Experience",
|
|
42
|
+
value: "peopleExperience",
|
|
43
|
+
id: "experience1",
|
|
44
|
+
},
|
|
45
|
+
],
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
label: "Contact Center",
|
|
49
|
+
value: "contactCenter",
|
|
50
|
+
id: "contact1",
|
|
51
|
+
children: [
|
|
52
|
+
{
|
|
53
|
+
label: "Appointment Management",
|
|
54
|
+
value: "appointmentManagement",
|
|
55
|
+
id: "appointment1",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
label: "Customer Service",
|
|
59
|
+
value: "customerService",
|
|
60
|
+
id: "customer1",
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
label: "Energy",
|
|
64
|
+
value: "energy",
|
|
65
|
+
id: "energy1",
|
|
66
|
+
},
|
|
67
|
+
],
|
|
68
|
+
},
|
|
69
|
+
],
|
|
70
|
+
},
|
|
71
|
+
];
|
|
72
|
+
|
|
73
|
+
function prefixTreeIds(nodes, prefix) {
|
|
74
|
+
return nodes.map((node) => ({
|
|
75
|
+
...node,
|
|
76
|
+
id: `${prefix}${node.id}`,
|
|
77
|
+
children:
|
|
78
|
+
node.children && node.children.length > 0
|
|
79
|
+
? prefixTreeIds(node.children, prefix)
|
|
80
|
+
: node.children,
|
|
81
|
+
}));
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
const treeDataMulti = prefixTreeIds(treeTemplate, "phm_");
|
|
85
|
+
const treeDataReturnAll = prefixTreeIds(treeTemplate, "phr_");
|
|
86
|
+
const treeDataSingle = prefixTreeIds(treeTemplate, "phs_");
|
|
87
|
+
|
|
88
|
+
const MultiLevelSelectPlaceholder = () => (
|
|
89
|
+
<>
|
|
90
|
+
<MultiLevelSelect
|
|
91
|
+
id="multi-level-select-placeholder-multi"
|
|
92
|
+
label="Multi (default)"
|
|
93
|
+
marginBottom="sm"
|
|
94
|
+
name="placeholder_multi"
|
|
95
|
+
onSelect={(selectedNodes) =>
|
|
96
|
+
console.log("Multi — default", selectedNodes)
|
|
97
|
+
}
|
|
98
|
+
placeholder="Search or choose options…"
|
|
99
|
+
treeData={treeDataMulti}
|
|
100
|
+
/>
|
|
101
|
+
<MultiLevelSelect
|
|
102
|
+
id="multi-level-select-placeholder-return-all"
|
|
103
|
+
label="Multi (return all selected)"
|
|
104
|
+
marginBottom="sm"
|
|
105
|
+
name="placeholder_return_all"
|
|
106
|
+
onSelect={(selectedNodes) =>
|
|
107
|
+
console.log("Multi — return all selected", selectedNodes)
|
|
108
|
+
}
|
|
109
|
+
placeholder="Departments..."
|
|
110
|
+
returnAllSelected
|
|
111
|
+
treeData={treeDataReturnAll}
|
|
112
|
+
/>
|
|
113
|
+
<MultiLevelSelect
|
|
114
|
+
id="multi-level-select-placeholder-single"
|
|
115
|
+
label="Single"
|
|
116
|
+
name="placeholder_single"
|
|
117
|
+
onSelect={(selectedNodes) =>
|
|
118
|
+
console.log("Single", selectedNodes)
|
|
119
|
+
}
|
|
120
|
+
placeholder="Select one option…"
|
|
121
|
+
treeData={treeDataSingle}
|
|
122
|
+
variant="single"
|
|
123
|
+
/>
|
|
124
|
+
</>
|
|
125
|
+
);
|
|
126
|
+
|
|
127
|
+
export default MultiLevelSelectPlaceholder;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Use the `placeholder` prop to customize the initial text shown in the input when nothing is selected. The default is `Start typing...`.
|
|
@@ -18,6 +18,7 @@ examples:
|
|
|
18
18
|
- multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
|
|
19
19
|
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
20
20
|
- multi_level_select_required_indicator: Required Indicator
|
|
21
|
+
- multi_level_select_placeholder: Placeholder
|
|
21
22
|
|
|
22
23
|
react:
|
|
23
24
|
- multi_level_select_default: Default
|
|
@@ -40,3 +41,4 @@ examples:
|
|
|
40
41
|
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
41
42
|
- multi_level_select_required_indicator: Required Indicator
|
|
42
43
|
- multi_level_select_react_reset_key: Reset with Key (React)
|
|
44
|
+
- multi_level_select_placeholder: Placeholder
|
|
@@ -18,3 +18,4 @@ export { default as MultiLevelSelectLabel } from "./_multi_level_select_label.js
|
|
|
18
18
|
export { default as MultiLevelSelectSingleDisabled } from "./_multi_level_select_single_disabled.jsx"
|
|
19
19
|
export { default as MultiLevelSelectRequiredIndicator } from "./_multi_level_select_required_indicator.jsx"
|
|
20
20
|
export { default as MultiLevelSelectReactResetKey } from "./_multi_level_select_react_reset_key.jsx"
|
|
21
|
+
export { default as MultiLevelSelectPlaceholder } from "./_multi_level_select_placeholder.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.5.0.pre.rc.
|
|
4
|
+
version: 16.5.0.pre.rc.2
|
|
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-23 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -309,7 +309,8 @@ files:
|
|
|
309
309
|
- app/pb_kits/playbook/pb_button/docs/_button_form.jsx
|
|
310
310
|
- app/pb_kits/playbook/pb_button/docs/_button_full_width.html.erb
|
|
311
311
|
- app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx
|
|
312
|
-
- app/pb_kits/playbook/pb_button/docs/
|
|
312
|
+
- app/pb_kits/playbook/pb_button/docs/_button_full_width_rails.md
|
|
313
|
+
- app/pb_kits/playbook/pb_button/docs/_button_full_width_react.md
|
|
313
314
|
- app/pb_kits/playbook/pb_button/docs/_button_full_width_swift.md
|
|
314
315
|
- app/pb_kits/playbook/pb_button/docs/_button_hover.html.erb
|
|
315
316
|
- app/pb_kits/playbook/pb_button/docs/_button_hover.jsx
|
|
@@ -1461,6 +1462,9 @@ files:
|
|
|
1461
1462
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
|
|
1462
1463
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx
|
|
1463
1464
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md
|
|
1465
|
+
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.html.erb
|
|
1466
|
+
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.jsx
|
|
1467
|
+
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.md
|
|
1464
1468
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
|
|
1465
1469
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md
|
|
1466
1470
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_reset_key.jsx
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
This button is used many times for mobile or other things like cards and sidebars.
|