playbook_ui_docs 15.3.0.pre.alpha.PLAY260211784 → 15.3.0.pre.alpha.play199912042
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_advanced_table/docs/_advanced_table_column_border_color.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +1 -1
- data/app/pb_kits/playbook/pb_background/docs/_background_category.md +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_light.md +1 -1
- data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.md +1 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md +1 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md +1 -1
- data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md +1 -1
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb +7 -14
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx +6 -15
- data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.md +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.md +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.md +1 -1
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +1 -1
- data/app/pb_kits/playbook/pb_pill/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx +68 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to_react.md +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_section_separator/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md +1 -1
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_react.md +1 -1
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sm.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.html.erb +63 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.jsx +89 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_rails.md +4 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_react.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.html.erb +64 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.jsx +70 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.html.erb +67 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_value.jsx +68 -6
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +2 -1
- data/dist/playbook-doc.js +2 -2
- metadata +12 -3
- /data/app/pb_kits/playbook/pb_popover/docs/{_popover_append_to.md → _popover_append_to_rails.md} +0 -0
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
<%
|
|
2
|
+
grouped_options = [
|
|
3
|
+
{
|
|
4
|
+
label: "Warm Colors",
|
|
5
|
+
options: [
|
|
6
|
+
{ label: "Red", value: "#FF0000" },
|
|
7
|
+
{ label: "Orange", value: "#FFA500" },
|
|
8
|
+
{ label: "Yellow", value: "#FFFF00" },
|
|
9
|
+
{ label: "Coral", value: "#FF7F50" },
|
|
10
|
+
{ label: "Gold", value: "#FFD700" }
|
|
11
|
+
]
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
label: "Cool Colors",
|
|
15
|
+
options: [
|
|
16
|
+
{ label: "Blue", value: "#0000FF" },
|
|
17
|
+
{ label: "Teal", value: "#008080" },
|
|
18
|
+
{ label: "Cyan", value: "#00FFFF" },
|
|
19
|
+
{ label: "Navy", value: "#000080" },
|
|
20
|
+
{ label: "Turquoise", value: "#40E0D0" }
|
|
21
|
+
]
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: "Neutrals",
|
|
25
|
+
options: [
|
|
26
|
+
{ label: "White", value: "#FFFFFF" },
|
|
27
|
+
{ label: "Black", value: "#000000" },
|
|
28
|
+
{ label: "Gray", value: "#808080" },
|
|
29
|
+
{ label: "Beige", value: "#F5F5DC" },
|
|
30
|
+
{ label: "Silver", value: "#C0C0C0" }
|
|
31
|
+
]
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
label: "Earth Tones",
|
|
35
|
+
options: [
|
|
36
|
+
{ label: "Brown", value: "#A52A2A" },
|
|
37
|
+
{ label: "Olive", value: "#808000" },
|
|
38
|
+
{ label: "Forest Green", value: "#228B22" },
|
|
39
|
+
{ label: "Tan", value: "#D2B48C" },
|
|
40
|
+
{ label: "Maroon", value: "#800000" }
|
|
41
|
+
]
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
label: "Fun Shades",
|
|
45
|
+
options: [
|
|
46
|
+
{ label: "Pink", value: "#FFC0CB" },
|
|
47
|
+
{ label: "Magenta", value: "#FF00FF" },
|
|
48
|
+
{ label: "Lime", value: "#00FF00" },
|
|
49
|
+
{ label: "Purple", value: "#800080" },
|
|
50
|
+
{ label: "Indigo", value: "#4B0082" }
|
|
51
|
+
]
|
|
52
|
+
}
|
|
53
|
+
]
|
|
54
|
+
%>
|
|
55
|
+
<br />
|
|
56
|
+
<%= pb_rails("typeahead", props: {
|
|
57
|
+
id: "typeahead-custom-options",
|
|
58
|
+
options: grouped_options,
|
|
59
|
+
label: "Colors",
|
|
60
|
+
name: :foo,
|
|
61
|
+
placeholder: "Select a Color...",
|
|
62
|
+
is_multi: false
|
|
63
|
+
})
|
|
64
|
+
%>
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Typeahead from '../_typeahead'
|
|
4
|
+
|
|
5
|
+
const groupedOptions = [
|
|
6
|
+
{
|
|
7
|
+
label: "Warm Colors",
|
|
8
|
+
options: [
|
|
9
|
+
{ label: "Red", value: "#FF0000" },
|
|
10
|
+
{ label: "Orange", value: "#FFA500" },
|
|
11
|
+
{ label: "Yellow", value: "#FFFF00" },
|
|
12
|
+
{ label: "Coral", value: "#FF7F50" },
|
|
13
|
+
{ label: "Gold", value: "#FFD700" }
|
|
14
|
+
]
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
label: "Cool Colors",
|
|
18
|
+
options: [
|
|
19
|
+
{ label: "Blue", value: "#0000FF" },
|
|
20
|
+
{ label: "Teal", value: "#008080" },
|
|
21
|
+
{ label: "Cyan", value: "#00FFFF" },
|
|
22
|
+
{ label: "Navy", value: "#000080" },
|
|
23
|
+
{ label: "Turquoise", value: "#40E0D0" }
|
|
24
|
+
]
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
label: "Neutrals",
|
|
28
|
+
options: [
|
|
29
|
+
{ label: "White", value: "#FFFFFF" },
|
|
30
|
+
{ label: "Black", value: "#000000" },
|
|
31
|
+
{ label: "Gray", value: "#808080" },
|
|
32
|
+
{ label: "Beige", value: "#F5F5DC" },
|
|
33
|
+
{ label: "Silver", value: "#C0C0C0" }
|
|
34
|
+
]
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
label: "Earth Tones",
|
|
38
|
+
options: [
|
|
39
|
+
{ label: "Brown", value: "#A52A2A" },
|
|
40
|
+
{ label: "Olive", value: "#808000" },
|
|
41
|
+
{ label: "Forest Green", value: "#228B22" },
|
|
42
|
+
{ label: "Tan", value: "#D2B48C" },
|
|
43
|
+
{ label: "Maroon", value: "#800000" }
|
|
44
|
+
]
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
label: "Fun Shades",
|
|
48
|
+
options: [
|
|
49
|
+
{ label: "Pink", value: "#FFC0CB" },
|
|
50
|
+
{ label: "Magenta", value: "#FF00FF" },
|
|
51
|
+
{ label: "Lime", value: "#00FF00" },
|
|
52
|
+
{ label: "Purple", value: "#800080" },
|
|
53
|
+
{ label: "Indigo", value: "#4B0082" }
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
]
|
|
57
|
+
|
|
58
|
+
const TypeaheadCustomOptions = (props) => {
|
|
59
|
+
return (
|
|
60
|
+
<Typeahead
|
|
61
|
+
label="Colors"
|
|
62
|
+
options={groupedOptions}
|
|
63
|
+
placeholder="Select a Color..."
|
|
64
|
+
{...props}
|
|
65
|
+
/>
|
|
66
|
+
)
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
export default TypeaheadCustomOptions
|
|
70
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Grouped options can be rendered via structuring the options in the way shown in the code snippet below.
|
|
@@ -25,11 +25,77 @@
|
|
|
25
25
|
]
|
|
26
26
|
%>
|
|
27
27
|
|
|
28
|
+
<%
|
|
29
|
+
grouped_options = [
|
|
30
|
+
{
|
|
31
|
+
label: "Warm Colors",
|
|
32
|
+
options: [
|
|
33
|
+
{ label: "Red", value: "#FF0000" },
|
|
34
|
+
{ label: "Orange", value: "#FFA500" },
|
|
35
|
+
{ label: "Yellow", value: "#FFFF00" },
|
|
36
|
+
{ label: "Coral", value: "#FF7F50" },
|
|
37
|
+
{ label: "Gold", value: "#FFD700" }
|
|
38
|
+
]
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
label: "Cool Colors",
|
|
42
|
+
options: [
|
|
43
|
+
{ label: "Blue", value: "#0000FF" },
|
|
44
|
+
{ label: "Teal", value: "#008080" },
|
|
45
|
+
{ label: "Cyan", value: "#00FFFF" },
|
|
46
|
+
{ label: "Navy", value: "#000080" },
|
|
47
|
+
{ label: "Turquoise", value: "#40E0D0" }
|
|
48
|
+
]
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
label: "Neutrals",
|
|
52
|
+
options: [
|
|
53
|
+
{ label: "White", value: "#FFFFFF" },
|
|
54
|
+
{ label: "Black", value: "#000000" },
|
|
55
|
+
{ label: "Gray", value: "#808080" },
|
|
56
|
+
{ label: "Beige", value: "#F5F5DC" },
|
|
57
|
+
{ label: "Silver", value: "#C0C0C0" }
|
|
58
|
+
]
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
label: "Earth Tones",
|
|
62
|
+
options: [
|
|
63
|
+
{ label: "Brown", value: "#A52A2A" },
|
|
64
|
+
{ label: "Olive", value: "#808000" },
|
|
65
|
+
{ label: "Forest Green", value: "#228B22" },
|
|
66
|
+
{ label: "Tan", value: "#D2B48C" },
|
|
67
|
+
{ label: "Maroon", value: "#800000" }
|
|
68
|
+
]
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
label: "Fun Shades",
|
|
72
|
+
options: [
|
|
73
|
+
{ label: "Pink", value: "#FFC0CB" },
|
|
74
|
+
{ label: "Magenta", value: "#FF00FF" },
|
|
75
|
+
{ label: "Lime", value: "#00FF00" },
|
|
76
|
+
{ label: "Purple", value: "#800080" },
|
|
77
|
+
{ label: "Indigo", value: "#4B0082" }
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
]
|
|
81
|
+
%>
|
|
82
|
+
|
|
83
|
+
|
|
28
84
|
<%= pb_rails("typeahead", props: {
|
|
29
85
|
default_options: [{ label: 'Gray', value: '#808080' }],
|
|
30
86
|
id: "typeahead-default-value",
|
|
31
87
|
options: options,
|
|
32
|
-
label: "
|
|
88
|
+
label: "Default Value with basic options",
|
|
89
|
+
name: :foo,
|
|
90
|
+
is_multi: false
|
|
91
|
+
})
|
|
92
|
+
%>
|
|
93
|
+
|
|
94
|
+
<%= pb_rails("typeahead", props: {
|
|
95
|
+
default_options:[{ label: "Pink", value: "#FFC0CB" }],
|
|
96
|
+
id: "typeahead-default-value-grouped-options",
|
|
97
|
+
options: grouped_options,
|
|
98
|
+
label: "Default Value with grouped options",
|
|
33
99
|
name: :foo,
|
|
34
100
|
is_multi: false
|
|
35
101
|
})
|
|
@@ -27,14 +27,76 @@ const options = [
|
|
|
27
27
|
{ label: 'Coral', value: '#FF7F50' }
|
|
28
28
|
]
|
|
29
29
|
|
|
30
|
+
const groupedOptions = [
|
|
31
|
+
{
|
|
32
|
+
label: "Warm Colors",
|
|
33
|
+
options: [
|
|
34
|
+
{ label: "Red", value: "#FF0000" },
|
|
35
|
+
{ label: "Orange", value: "#FFA500" },
|
|
36
|
+
{ label: "Yellow", value: "#FFFF00" },
|
|
37
|
+
{ label: "Coral", value: "#FF7F50" },
|
|
38
|
+
{ label: "Gold", value: "#FFD700" }
|
|
39
|
+
]
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
label: "Cool Colors",
|
|
43
|
+
options: [
|
|
44
|
+
{ label: "Blue", value: "#0000FF" },
|
|
45
|
+
{ label: "Teal", value: "#008080" },
|
|
46
|
+
{ label: "Cyan", value: "#00FFFF" },
|
|
47
|
+
{ label: "Navy", value: "#000080" },
|
|
48
|
+
{ label: "Turquoise", value: "#40E0D0" }
|
|
49
|
+
]
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
label: "Neutrals",
|
|
53
|
+
options: [
|
|
54
|
+
{ label: "White", value: "#FFFFFF" },
|
|
55
|
+
{ label: "Black", value: "#000000" },
|
|
56
|
+
{ label: "Gray", value: "#808080" },
|
|
57
|
+
{ label: "Beige", value: "#F5F5DC" },
|
|
58
|
+
{ label: "Silver", value: "#C0C0C0" }
|
|
59
|
+
]
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
label: "Earth Tones",
|
|
63
|
+
options: [
|
|
64
|
+
{ label: "Brown", value: "#A52A2A" },
|
|
65
|
+
{ label: "Olive", value: "#808000" },
|
|
66
|
+
{ label: "Forest Green", value: "#228B22" },
|
|
67
|
+
{ label: "Tan", value: "#D2B48C" },
|
|
68
|
+
{ label: "Maroon", value: "#800000" }
|
|
69
|
+
]
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
label: "Fun Shades",
|
|
73
|
+
options: [
|
|
74
|
+
{ label: "Pink", value: "#FFC0CB" },
|
|
75
|
+
{ label: "Magenta", value: "#FF00FF" },
|
|
76
|
+
{ label: "Lime", value: "#00FF00" },
|
|
77
|
+
{ label: "Purple", value: "#800080" },
|
|
78
|
+
{ label: "Indigo", value: "#4B0082" }
|
|
79
|
+
]
|
|
80
|
+
}
|
|
81
|
+
]
|
|
82
|
+
|
|
30
83
|
const TypeaheadDefaultValue = (props) => {
|
|
31
84
|
return (
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
85
|
+
<>
|
|
86
|
+
<Typeahead
|
|
87
|
+
defaultValue={options[10]}
|
|
88
|
+
label="Default Value with basic options"
|
|
89
|
+
options={options}
|
|
90
|
+
{...props}
|
|
91
|
+
/>
|
|
92
|
+
<br />
|
|
93
|
+
<Typeahead
|
|
94
|
+
defaultValue={{ label: "Pink", value: "#FFC0CB" }}
|
|
95
|
+
label="Default Value with grouped options"
|
|
96
|
+
options={groupedOptions}
|
|
97
|
+
{...props}
|
|
98
|
+
/>
|
|
99
|
+
</>
|
|
38
100
|
)
|
|
39
101
|
}
|
|
40
102
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/
|
|
1
|
+
For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/global_props/truncate) for more information on the truncate global prop.
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
examples:
|
|
2
2
|
rails:
|
|
3
3
|
- typeahead_default: Default
|
|
4
|
+
- typeahead_custom_options: With Grouped Options
|
|
4
5
|
- typeahead_default_options: With Default Options
|
|
5
6
|
- typeahead_with_context: With Context
|
|
6
7
|
- typeahead_with_pills: With Pills
|
|
@@ -20,6 +21,7 @@ examples:
|
|
|
20
21
|
|
|
21
22
|
react:
|
|
22
23
|
- typeahead_default: Default
|
|
24
|
+
- typeahead_custom_options: With Grouped Options
|
|
23
25
|
- typeahead_default_value: With Default Value
|
|
24
26
|
- typeahead_react_hook: React Hook
|
|
25
27
|
- typeahead_with_highlight: With Highlight
|
|
@@ -16,4 +16,5 @@ export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.j
|
|
|
16
16
|
export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
|
|
17
17
|
export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
|
|
18
18
|
export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
|
|
19
|
-
export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
|
|
19
|
+
export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
|
|
20
|
+
export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
|