playbook_ui_docs 16.0.0.pre.alpha.PLAY271013763 → 16.0.0.pre.alpha.PLAY272313713
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_background/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_background/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +5 -5
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +4 -4
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +33 -35
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx +1 -1
- metadata +2 -7
- data/app/pb_kits/playbook/pb_background/docs/_background_responsive.jsx +0 -30
- data/app/pb_kits/playbook/pb_background/docs/_background_responsive.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.html.erb +0 -74
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.jsx +0 -87
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md +0 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: dad5c18432aca37eb801820ffa3a738113131dbaf85f88cfc99d873474771ff5
|
|
4
|
+
data.tar.gz: 7fb5efbbf2ff6dbade1d036c5d62bb964f1d0a42b01d72c4f23d083cebd4b7b0
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 3ed82496f7c664e86219efc7ba77803deffae8693e84258977a9326fe2a22a9757da6b243f0c6ced6e0a0fe28144e279cafae8b102d52e738879a0471e18d0c4
|
|
7
|
+
data.tar.gz: 485396a110a0742aab958d266089ac3075bec812c88943cb4c3392c9e8bf6b056bbb63bf462c43c7d5ca86e9b30fbae70f77503223211b52d56eb21105c5758c
|
|
@@ -7,4 +7,3 @@ export { default as BackgroundStatusSubtle } from './_background_status_subtle.j
|
|
|
7
7
|
export { default as BackgroundCategory } from './_background_category.jsx'
|
|
8
8
|
export { default as BackgroundSize } from './_background_size.jsx'
|
|
9
9
|
export { default as BackgroundOverlay } from './_background_overlay.jsx'
|
|
10
|
-
export { default as BackgroundResponsive } from './_background_responsive.jsx'
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
options: names,
|
|
16
16
|
label: "Truncation Within Typeahead",
|
|
17
17
|
pills: true,
|
|
18
|
-
truncate:
|
|
18
|
+
truncate: 1,
|
|
19
19
|
}) %>
|
|
20
20
|
|
|
21
21
|
<%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
|
|
@@ -24,19 +24,19 @@
|
|
|
24
24
|
name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
|
|
25
25
|
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
|
|
26
26
|
tabindex: 0,
|
|
27
|
-
truncate:
|
|
27
|
+
truncate: 1,
|
|
28
28
|
id: "truncation-1"
|
|
29
29
|
}) %>
|
|
30
30
|
<%= pb_rails("form_pill", props: {
|
|
31
31
|
icon: "badge-check",
|
|
32
32
|
text: "icon and a very long tag to show truncation",
|
|
33
33
|
tabindex: 0,
|
|
34
|
-
truncate:
|
|
34
|
+
truncate: 1,
|
|
35
35
|
id: "truncation-2"
|
|
36
36
|
}) %>
|
|
37
37
|
<%= pb_rails("form_pill", props: {
|
|
38
38
|
text: "form pill long tag no tooltip show truncation",
|
|
39
39
|
tabindex: 0,
|
|
40
|
-
truncate:
|
|
40
|
+
truncate: 1,
|
|
41
41
|
}) %>
|
|
42
|
-
<% end %>
|
|
42
|
+
<% end %>
|
|
@@ -21,7 +21,7 @@ const FormPillTruncatedText = (props) => {
|
|
|
21
21
|
isMulti
|
|
22
22
|
label="Truncation Within Typeahead"
|
|
23
23
|
options={names}
|
|
24
|
-
truncate={
|
|
24
|
+
truncate={1}
|
|
25
25
|
{...props}
|
|
26
26
|
/>
|
|
27
27
|
<Caption text="Form Pill Truncation"/>
|
|
@@ -31,20 +31,20 @@ const FormPillTruncatedText = (props) => {
|
|
|
31
31
|
name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
|
|
32
32
|
onClick={() => alert('Click!')}
|
|
33
33
|
tabIndex={0}
|
|
34
|
-
truncate={
|
|
34
|
+
truncate={1}
|
|
35
35
|
/>
|
|
36
36
|
<FormPill
|
|
37
37
|
icon="badge-check"
|
|
38
38
|
onClick={() => {alert('Click!')}}
|
|
39
39
|
tabIndex={0}
|
|
40
40
|
text="icon and a very long tag to show truncation"
|
|
41
|
-
truncate={
|
|
41
|
+
truncate={1}
|
|
42
42
|
/>
|
|
43
43
|
<FormPill
|
|
44
44
|
onClick={() => {alert('Click!')}}
|
|
45
45
|
tabIndex={0}
|
|
46
46
|
text="form pill with a very long tag to show truncation"
|
|
47
|
-
truncate={
|
|
47
|
+
truncate={1}
|
|
48
48
|
/>
|
|
49
49
|
</Card>
|
|
50
50
|
</>
|
|
@@ -1,39 +1,37 @@
|
|
|
1
1
|
examples:
|
|
2
2
|
rails:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
3
|
+
- multi_level_select_default: Default
|
|
4
|
+
- multi_level_select_single: Single Select
|
|
5
|
+
- multi_level_select_single_children_only: Single Select w/ Hidden Radios
|
|
6
|
+
- multi_level_select_return_all_selected: Return All Selected
|
|
7
|
+
- multi_level_select_selected_ids: Selected Ids
|
|
8
|
+
- multi_level_select_with_form: With Form
|
|
9
|
+
- multi_level_select_color: With Pills (Custom Color)
|
|
10
|
+
- multi_level_select_reset: Reset Selection
|
|
11
|
+
- multi_level_select_label: With Label
|
|
12
|
+
- multi_level_select_error: Error
|
|
13
|
+
- multi_level_select_disabled: Disabled Input
|
|
14
|
+
- multi_level_select_disabled_options_default: Disabled Options (Default)
|
|
15
|
+
- multi_level_select_disabled_options: Disabled Options (Return All Selected)
|
|
16
|
+
- multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
|
|
17
|
+
- multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
|
|
18
|
+
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
20
19
|
|
|
21
20
|
react:
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
21
|
+
- multi_level_select_default: Default
|
|
22
|
+
- multi_level_select_react_hook: React Hook
|
|
23
|
+
- multi_level_select_single: Single Select
|
|
24
|
+
- multi_level_select_single_children_only: Single Select w/ Hidden Radios
|
|
25
|
+
- multi_level_select_return_all_selected: Return All Selected
|
|
26
|
+
- multi_level_select_selected_ids_react: Selected Ids
|
|
27
|
+
- multi_level_select_color: With Pills (Custom Color)
|
|
28
|
+
- multi_level_select_with_children: Checkboxes With Children
|
|
29
|
+
- multi_level_select_with_children_with_radios: Single Select With Children
|
|
30
|
+
- multi_level_select_label: With Label
|
|
31
|
+
- multi_level_select_error: Error
|
|
32
|
+
- multi_level_select_disabled: Disabled Input
|
|
33
|
+
- multi_level_select_disabled_options_default: Disabled Options (Default)
|
|
34
|
+
- multi_level_select_disabled_options: Disabled Options (Return All Selected)
|
|
35
|
+
- multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
|
|
36
|
+
- multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
|
|
37
|
+
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
@@ -4,7 +4,6 @@ export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_se
|
|
|
4
4
|
export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
|
|
5
5
|
export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
|
|
6
6
|
export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
|
|
7
|
-
export { default as MultiLevelSelectInputDisplay } from './_multi_level_select_input_display.jsx'
|
|
8
7
|
export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
|
|
9
8
|
export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
|
|
10
9
|
export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.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.0.0.pre.alpha.
|
|
4
|
+
version: 16.0.0.pre.alpha.PLAY272313713
|
|
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-01-
|
|
12
|
+
date: 2026-01-22 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -231,8 +231,6 @@ files:
|
|
|
231
231
|
- app/pb_kits/playbook/pb_background/docs/_background_light.md
|
|
232
232
|
- app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx
|
|
233
233
|
- app/pb_kits/playbook/pb_background/docs/_background_overlay.md
|
|
234
|
-
- app/pb_kits/playbook/pb_background/docs/_background_responsive.jsx
|
|
235
|
-
- app/pb_kits/playbook/pb_background/docs/_background_responsive.md
|
|
236
234
|
- app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
|
|
237
235
|
- app/pb_kits/playbook/pb_background/docs/_background_size.jsx
|
|
238
236
|
- app/pb_kits/playbook/pb_background/docs/_background_size.md
|
|
@@ -1411,9 +1409,6 @@ files:
|
|
|
1411
1409
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.md
|
|
1412
1410
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb
|
|
1413
1411
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx
|
|
1414
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.html.erb
|
|
1415
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.jsx
|
|
1416
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md
|
|
1417
1412
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
|
|
1418
1413
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx
|
|
1419
1414
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import Background from '../../pb_background/_background'
|
|
3
|
-
|
|
4
|
-
const BackgroundResponsive = (props) => (
|
|
5
|
-
<>
|
|
6
|
-
<Background
|
|
7
|
-
alt="colorful background"
|
|
8
|
-
backgroundColor={{ xs: "primary", sm: "warning", md: "success", lg: "error", xl: "category_1" }}
|
|
9
|
-
className="background lazyload"
|
|
10
|
-
padding="xl"
|
|
11
|
-
{...props}
|
|
12
|
-
/>
|
|
13
|
-
<br/>
|
|
14
|
-
<Background
|
|
15
|
-
alt="colorful background"
|
|
16
|
-
className="background lazyload"
|
|
17
|
-
imageUrl={{
|
|
18
|
-
xs: "https://unsplash.it/500/400/?image=633",
|
|
19
|
-
sm: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
|
|
20
|
-
md: "https://unsplash.it/500/400/?image=633",
|
|
21
|
-
lg: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
|
|
22
|
-
xl: "https://unsplash.it/500/400/?image=633"
|
|
23
|
-
}}
|
|
24
|
-
padding="xl"
|
|
25
|
-
{...props}
|
|
26
|
-
/>
|
|
27
|
-
</>
|
|
28
|
-
)
|
|
29
|
-
|
|
30
|
-
export default BackgroundResponsive
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
The `backgroundColor`, `backgroundSize`, `backgroundPosition`, `backgroundRepeat`, and `imageUrl` props support responsive sizes. To use them, pass an object to the prop containing your values relative to responsive break points. To test this here, resize your browser window to responsively change these Backgrounds' `backgroundColor` and `imageUrl`.
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.html.erb
DELETED
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
<% treeData = [{
|
|
2
|
-
label: "Power Home Remodeling",
|
|
3
|
-
value: "powerHomeRemodeling",
|
|
4
|
-
id: "100",
|
|
5
|
-
expanded: true,
|
|
6
|
-
children: [
|
|
7
|
-
{
|
|
8
|
-
label: "People",
|
|
9
|
-
value: "people",
|
|
10
|
-
id: "101",
|
|
11
|
-
expanded: true,
|
|
12
|
-
children: [
|
|
13
|
-
{
|
|
14
|
-
label: "Talent Acquisition",
|
|
15
|
-
value: "talentAcquisition",
|
|
16
|
-
id: "102",
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
label: "Business Affairs",
|
|
20
|
-
value: "businessAffairs",
|
|
21
|
-
id: "103",
|
|
22
|
-
children: [
|
|
23
|
-
{
|
|
24
|
-
label: "Initiatives",
|
|
25
|
-
value: "initiatives",
|
|
26
|
-
id: "104",
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
label: "Learning & Development",
|
|
30
|
-
value: "learningAndDevelopment",
|
|
31
|
-
id: "105",
|
|
32
|
-
},
|
|
33
|
-
],
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
label: "People Experience",
|
|
37
|
-
value: "peopleExperience",
|
|
38
|
-
id: "106",
|
|
39
|
-
},
|
|
40
|
-
],
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
label: "Contact Center",
|
|
44
|
-
value: "contactCenter",
|
|
45
|
-
id: "107",
|
|
46
|
-
children: [
|
|
47
|
-
{
|
|
48
|
-
label: "Appointment Management",
|
|
49
|
-
value: "appointmentManagement",
|
|
50
|
-
id: "108",
|
|
51
|
-
},
|
|
52
|
-
{
|
|
53
|
-
label: "Customer Service",
|
|
54
|
-
value: "customerService",
|
|
55
|
-
id: "109",
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
label: "Energy",
|
|
59
|
-
value: "energy",
|
|
60
|
-
id: "110",
|
|
61
|
-
},
|
|
62
|
-
],
|
|
63
|
-
},
|
|
64
|
-
],
|
|
65
|
-
}] %>
|
|
66
|
-
|
|
67
|
-
<%= pb_rails("multi_level_select", props: {
|
|
68
|
-
id: "multi-level-select-input-display-none",
|
|
69
|
-
name: :foo,
|
|
70
|
-
tree_data: treeData,
|
|
71
|
-
input_display: "none",
|
|
72
|
-
return_all_selected: true,
|
|
73
|
-
})
|
|
74
|
-
%>
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import MultiLevelSelect from "../_multi_level_select";
|
|
3
|
-
|
|
4
|
-
const treeData = [
|
|
5
|
-
{
|
|
6
|
-
label: "Power Home Remodeling",
|
|
7
|
-
value: "powerHomeRemodeling",
|
|
8
|
-
id: "powerhome1",
|
|
9
|
-
expanded: true,
|
|
10
|
-
children: [
|
|
11
|
-
{
|
|
12
|
-
label: "People",
|
|
13
|
-
value: "people",
|
|
14
|
-
id: "people1",
|
|
15
|
-
expanded: true,
|
|
16
|
-
children: [
|
|
17
|
-
{
|
|
18
|
-
label: "Talent Acquisition",
|
|
19
|
-
value: "talentAcquisition",
|
|
20
|
-
id: "talent1",
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
label: "Business Affairs",
|
|
24
|
-
value: "businessAffairs",
|
|
25
|
-
id: "business1",
|
|
26
|
-
children: [
|
|
27
|
-
{
|
|
28
|
-
label: "Initiatives",
|
|
29
|
-
value: "initiatives",
|
|
30
|
-
id: "initiative1",
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
label: "Learning & Development",
|
|
34
|
-
value: "learningAndDevelopment",
|
|
35
|
-
id: "development1",
|
|
36
|
-
},
|
|
37
|
-
],
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
label: "People Experience",
|
|
41
|
-
value: "peopleExperience",
|
|
42
|
-
id: "experience1",
|
|
43
|
-
},
|
|
44
|
-
],
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
label: "Contact Center",
|
|
48
|
-
value: "contactCenter",
|
|
49
|
-
id: "contact1",
|
|
50
|
-
children: [
|
|
51
|
-
{
|
|
52
|
-
label: "Appointment Management",
|
|
53
|
-
value: "appointmentManagement",
|
|
54
|
-
id: "appointment1",
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
label: "Customer Service",
|
|
58
|
-
value: "customerService",
|
|
59
|
-
id: "customer1",
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
label: "Energy",
|
|
63
|
-
value: "energy",
|
|
64
|
-
id: "energy1",
|
|
65
|
-
},
|
|
66
|
-
],
|
|
67
|
-
},
|
|
68
|
-
],
|
|
69
|
-
},
|
|
70
|
-
];
|
|
71
|
-
|
|
72
|
-
const MultiLevelSelectInputDisplay = (props) => {
|
|
73
|
-
return (
|
|
74
|
-
<MultiLevelSelect
|
|
75
|
-
id="multi-level-select-input-display-none"
|
|
76
|
-
inputDisplay="none"
|
|
77
|
-
onSelect={(selectedNodes) =>
|
|
78
|
-
console.log("Selected Items", selectedNodes)
|
|
79
|
-
}
|
|
80
|
-
returnAllSelected
|
|
81
|
-
treeData={treeData}
|
|
82
|
-
{...props}
|
|
83
|
-
/>
|
|
84
|
-
);
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
export default MultiLevelSelectInputDisplay;
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
Use the `inputDisplay`/`input_display` prop to optionally display only the count in the display as opposed to multiple pills. This prop is set to 'pills' by default.
|
|
2
|
-
|
|
3
|
-
**NOTE**: `inputDisplay`/`input_display` is particularly useful for larger trees that may return many pill selections, helping to keep the input field clean and compact. This prop should not be used with the Single Select variant.
|