playbook_ui_docs 14.5.0.pre.alpha.PLAY15814066 → 14.5.0.pre.alpha.javascriptassets3926
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -2
- data/dist/playbook-doc.js +1 -1
- metadata +2 -9
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +0 -19
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +0 -27
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +0 -105
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +0 -106
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +0 -1
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: 14.5.0.pre.alpha.
|
4
|
+
version: 14.5.0.pre.alpha.javascriptassets3926
|
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: 2024-10-
|
12
|
+
date: 2024-10-01 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: playbook_ui
|
@@ -836,9 +836,6 @@ files:
|
|
836
836
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx
|
837
837
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb
|
838
838
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx
|
839
|
-
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb
|
840
|
-
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx
|
841
|
-
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md
|
842
839
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb
|
843
840
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx
|
844
841
|
- app/pb_kits/playbook/pb_form_pill/docs/example.yml
|
@@ -1152,10 +1149,6 @@ files:
|
|
1152
1149
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb
|
1153
1150
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx
|
1154
1151
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.md
|
1155
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx
|
1156
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md
|
1157
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx
|
1158
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md
|
1159
1152
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb
|
1160
1153
|
- app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
|
1161
1154
|
- app/pb_kits/playbook/pb_multi_level_select/docs/index.js
|
@@ -1,19 +0,0 @@
|
|
1
|
-
<%
|
2
|
-
names = [
|
3
|
-
{ label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
|
4
|
-
{ label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
|
5
|
-
{ label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
|
6
|
-
{ label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
|
7
|
-
{ label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
|
8
|
-
]
|
9
|
-
%>
|
10
|
-
|
11
|
-
<%= pb_rails("typeahead", props: {
|
12
|
-
html_options: { style: { maxWidth: "240px" }},
|
13
|
-
id: "typeahead-form-pill",
|
14
|
-
is_multi: true,
|
15
|
-
options: names,
|
16
|
-
label: "Names",
|
17
|
-
pills: true,
|
18
|
-
truncate: 1,
|
19
|
-
}) %>
|
@@ -1,27 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import Typeahead from '../../pb_typeahead/_typeahead'
|
3
|
-
|
4
|
-
const names = [
|
5
|
-
{ label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
|
6
|
-
{ label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
|
7
|
-
{ label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
|
8
|
-
{ label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
|
9
|
-
{ label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
|
10
|
-
]
|
11
|
-
|
12
|
-
const FormPillTruncatedText = (props) => {
|
13
|
-
return (
|
14
|
-
<>
|
15
|
-
<Typeahead
|
16
|
-
htmlOptions={{ style: { maxWidth: "240px" }}}
|
17
|
-
isMulti
|
18
|
-
label="Names"
|
19
|
-
options={names}
|
20
|
-
truncate={1}
|
21
|
-
{...props}
|
22
|
-
/>
|
23
|
-
</>
|
24
|
-
)
|
25
|
-
}
|
26
|
-
|
27
|
-
export default FormPillTruncatedText
|
@@ -1 +0,0 @@
|
|
1
|
-
For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
|
@@ -1,105 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import MultiLevelSelect from "../_multi_level_select";
|
3
|
-
import Badge from "../../pb_badge/_badge";
|
4
|
-
|
5
|
-
const treeData = [
|
6
|
-
{
|
7
|
-
label: "Power Home Remodeling",
|
8
|
-
value: "Power Home Remodeling",
|
9
|
-
id: "powerhome1",
|
10
|
-
expanded: true,
|
11
|
-
children: [
|
12
|
-
{
|
13
|
-
label: "People",
|
14
|
-
value: "People",
|
15
|
-
id: "people1",
|
16
|
-
expanded: true,
|
17
|
-
status: "active",
|
18
|
-
children: [
|
19
|
-
{
|
20
|
-
label: "Talent Acquisition",
|
21
|
-
value: "Talent Acquisition",
|
22
|
-
id: "talent1",
|
23
|
-
},
|
24
|
-
{
|
25
|
-
label: "Business Affairs",
|
26
|
-
value: "Business Affairs",
|
27
|
-
id: "business1",
|
28
|
-
status: "active",
|
29
|
-
variant: "primary",
|
30
|
-
|
31
|
-
children: [
|
32
|
-
{
|
33
|
-
label: "Initiatives",
|
34
|
-
value: "Initiatives",
|
35
|
-
id: "initiative1",
|
36
|
-
},
|
37
|
-
{
|
38
|
-
label: "Learning & Development",
|
39
|
-
value: "Learning & Development",
|
40
|
-
id: "development1",
|
41
|
-
status: "Inactive",
|
42
|
-
},
|
43
|
-
],
|
44
|
-
},
|
45
|
-
{
|
46
|
-
label: "People Experience",
|
47
|
-
value: "People Experience",
|
48
|
-
id: "experience1",
|
49
|
-
},
|
50
|
-
],
|
51
|
-
},
|
52
|
-
{
|
53
|
-
label: "Contact Center",
|
54
|
-
value: "Contact Center",
|
55
|
-
id: "contact1",
|
56
|
-
status: "Inactive",
|
57
|
-
variant: "error",
|
58
|
-
children: [
|
59
|
-
{
|
60
|
-
label: "Appointment Management",
|
61
|
-
value: "Appointment Management",
|
62
|
-
id: "appointment1",
|
63
|
-
},
|
64
|
-
{
|
65
|
-
label: "Customer Service",
|
66
|
-
value: "Customer Service",
|
67
|
-
id: "customer1",
|
68
|
-
},
|
69
|
-
{
|
70
|
-
label: "Energy",
|
71
|
-
value: "Energy",
|
72
|
-
id: "energy1",
|
73
|
-
},
|
74
|
-
],
|
75
|
-
},
|
76
|
-
],
|
77
|
-
},
|
78
|
-
];
|
79
|
-
|
80
|
-
const MultiLevelSelectWithChildren = (props) => {
|
81
|
-
return (
|
82
|
-
<div>
|
83
|
-
<MultiLevelSelect
|
84
|
-
id="multiselect-with-children"
|
85
|
-
onSelect={(selectedNodes) =>
|
86
|
-
console.log("Selected Items", selectedNodes)
|
87
|
-
}
|
88
|
-
treeData={treeData}
|
89
|
-
{...props}
|
90
|
-
>
|
91
|
-
<MultiLevelSelect.Options>
|
92
|
-
{(item) => (
|
93
|
-
<Badge
|
94
|
-
marginLeft="sm"
|
95
|
-
text={item.status}
|
96
|
-
variant={item.status === "active" ? "success" : "warning"}
|
97
|
-
/>
|
98
|
-
)}
|
99
|
-
</MultiLevelSelect.Options>
|
100
|
-
</MultiLevelSelect>
|
101
|
-
</div>
|
102
|
-
);
|
103
|
-
};
|
104
|
-
|
105
|
-
export default MultiLevelSelectWithChildren;
|
@@ -1 +0,0 @@
|
|
1
|
-
The MultiLevelSelect also provides a subcomponent structure which can be used to render children to the right of the Checkboxes and their labels. As seen in the code snippet below, these children have access to the current item being iterated over which can be used for conditional rendering.
|
@@ -1,106 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import MultiLevelSelect from "../_multi_level_select";
|
3
|
-
import Badge from "../../pb_badge/_badge";
|
4
|
-
|
5
|
-
const treeData = [
|
6
|
-
{
|
7
|
-
label: "Power Home Remodeling",
|
8
|
-
value: "Power Home Remodeling",
|
9
|
-
id: "powerhome1",
|
10
|
-
expanded: true,
|
11
|
-
children: [
|
12
|
-
{
|
13
|
-
label: "People",
|
14
|
-
value: "People",
|
15
|
-
id: "people1",
|
16
|
-
expanded: true,
|
17
|
-
status: "active",
|
18
|
-
children: [
|
19
|
-
{
|
20
|
-
label: "Talent Acquisition",
|
21
|
-
value: "Talent Acquisition",
|
22
|
-
id: "talent1",
|
23
|
-
},
|
24
|
-
{
|
25
|
-
label: "Business Affairs",
|
26
|
-
value: "Business Affairs",
|
27
|
-
id: "business1",
|
28
|
-
status: "active",
|
29
|
-
variant: "primary",
|
30
|
-
|
31
|
-
children: [
|
32
|
-
{
|
33
|
-
label: "Initiatives",
|
34
|
-
value: "Initiatives",
|
35
|
-
id: "initiative1",
|
36
|
-
},
|
37
|
-
{
|
38
|
-
label: "Learning & Development",
|
39
|
-
value: "Learning & Development",
|
40
|
-
id: "development1",
|
41
|
-
status: "Inactive",
|
42
|
-
},
|
43
|
-
],
|
44
|
-
},
|
45
|
-
{
|
46
|
-
label: "People Experience",
|
47
|
-
value: "People Experience",
|
48
|
-
id: "experience1",
|
49
|
-
},
|
50
|
-
],
|
51
|
-
},
|
52
|
-
{
|
53
|
-
label: "Contact Center",
|
54
|
-
value: "Contact Center",
|
55
|
-
id: "contact1",
|
56
|
-
status: "Inactive",
|
57
|
-
variant: "error",
|
58
|
-
children: [
|
59
|
-
{
|
60
|
-
label: "Appointment Management",
|
61
|
-
value: "Appointment Management",
|
62
|
-
id: "appointment1",
|
63
|
-
},
|
64
|
-
{
|
65
|
-
label: "Customer Service",
|
66
|
-
value: "Customer Service",
|
67
|
-
id: "customer1",
|
68
|
-
},
|
69
|
-
{
|
70
|
-
label: "Energy",
|
71
|
-
value: "Energy",
|
72
|
-
id: "energy1",
|
73
|
-
},
|
74
|
-
],
|
75
|
-
},
|
76
|
-
],
|
77
|
-
},
|
78
|
-
];
|
79
|
-
|
80
|
-
const MultiLevelSelectWithChildrenWithRadios = (props) => {
|
81
|
-
return (
|
82
|
-
<div>
|
83
|
-
<MultiLevelSelect
|
84
|
-
id="multiselect-with-children"
|
85
|
-
onSelect={(selectedNodes) =>
|
86
|
-
console.log("Selected Items", selectedNodes)
|
87
|
-
}
|
88
|
-
treeData={treeData}
|
89
|
-
variant="single"
|
90
|
-
{...props}
|
91
|
-
>
|
92
|
-
<MultiLevelSelect.Options>
|
93
|
-
{(item) => (
|
94
|
-
<Badge
|
95
|
-
marginLeft="sm"
|
96
|
-
text={item.status}
|
97
|
-
variant={item.status === "active" ? "success" : "warning"}
|
98
|
-
/>
|
99
|
-
)}
|
100
|
-
</MultiLevelSelect.Options>
|
101
|
-
</MultiLevelSelect>
|
102
|
-
</div>
|
103
|
-
);
|
104
|
-
};
|
105
|
-
|
106
|
-
export default MultiLevelSelectWithChildrenWithRadios;
|
@@ -1 +0,0 @@
|
|
1
|
-
The MultiLevelSelect subcomponent structure is also available in the 'Single Select' variant. In this variant, the children will be rendered to the right of the Radios and their labels.
|