playbook_ui_docs 14.18.0 → 14.19.0.pre.alpha.PLAY1973formpillinternalsizing7728

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.
Files changed (133) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +0 -6
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx +80 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +3 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +58 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +3 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.jsx +57 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.md +4 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.jsx +62 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.md +1 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.jsx +82 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.md +1 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.jsx +65 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.md +1 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md +5 -1
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.jsx → _advanced_table_selectable_rows_no_subrows_react.jsx} +2 -2
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md +3 -2
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +10 -5
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +7 -2
  20. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.html.erb +5 -0
  21. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.jsx +16 -0
  22. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -0
  23. data/app/pb_kits/playbook/pb_avatar/docs/index.js +1 -0
  24. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
  25. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
  26. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
  27. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
  28. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
  29. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
  30. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
  31. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
  32. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
  33. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
  34. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
  35. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  36. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  37. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
  38. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
  39. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
  40. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
  41. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
  42. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
  43. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
  44. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  45. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
  46. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
  47. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
  48. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
  49. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
  50. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  51. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  52. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +64 -0
  53. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
  54. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
  55. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb +55 -0
  56. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md +5 -0
  57. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md +5 -0
  58. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx +59 -0
  59. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md +1 -0
  60. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +4 -1
  61. data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
  62. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
  63. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
  64. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +28 -0
  65. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +17 -64
  66. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +58 -0
  67. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx → _dropdown_with_autocomplete_with_subcomponents.jsx} +11 -25
  68. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md +1 -0
  69. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md +1 -0
  70. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +61 -0
  71. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md +2 -0
  72. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +52 -0
  73. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md +2 -0
  74. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +7 -4
  75. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -2
  76. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb +27 -0
  77. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb +7 -0
  78. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb +12 -0
  79. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb +23 -0
  80. data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +5 -1
  81. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.html.erb +1 -0
  82. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.jsx +41 -0
  83. data/app/pb_kits/playbook/pb_file_upload/docs/example.yml +2 -0
  84. data/app/pb_kits/playbook/pb_file_upload/docs/index.js +1 -0
  85. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb +41 -0
  86. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md +1 -0
  87. data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
  88. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +0 -1
  89. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +52 -0
  90. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +1 -0
  91. data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +1 -0
  92. data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
  93. data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.html.erb +9 -0
  94. data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.jsx +21 -0
  95. data/app/pb_kits/playbook/pb_message/docs/example.yml +2 -0
  96. data/app/pb_kits/playbook/pb_message/docs/index.js +1 -0
  97. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +1 -1
  98. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
  99. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
  100. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
  101. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
  102. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
  103. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
  104. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb +46 -0
  105. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md +1 -0
  106. data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -0
  107. data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
  108. data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
  109. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +7 -7
  110. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
  111. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
  112. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
  113. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
  114. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
  115. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
  116. data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb +6 -0
  117. data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx +16 -0
  118. data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
  119. data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
  120. data/dist/playbook-doc.js +2 -2
  121. metadata +66 -16
  122. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +0 -1
  123. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -79
  124. data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +0 -53
  125. data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +0 -7
  126. data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +0 -1
  127. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_react.md → _advanced_table_selectable_rows.md} +0 -0
  128. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.html.erb → _advanced_table_selectable_rows_no_subrows_rails.html.erb} +0 -0
  129. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows.html.erb → _advanced_table_selectable_rows_rails.html.erb} +0 -0
  130. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_colors.md → _draggable_drop_zones_colors_react.md} +0 -0
  131. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_line.md → _draggable_drop_zones_line_react.md} +0 -0
  132. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones.md → _draggable_drop_zones_react.md} +0 -0
  133. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_event_listeners.md → _draggable_event_listeners_rails.md} +0 -0
@@ -1,86 +1,39 @@
1
1
  import React from 'react'
2
2
 
3
3
  import Dropdown from '../../pb_dropdown/_dropdown'
4
- import Badge from '../../pb_badge/_badge'
5
- import FlexItem from '../../pb_flex/_flex_item'
6
- import User from '../../pb_user/_user'
7
4
 
8
5
  const DropdownWithAutocomplete = (props) => {
9
6
 
10
7
  const options = [
11
8
  {
12
- label: "Jasper Furniss",
13
- value: "Jasper Furniss",
14
- territory: "PHL",
15
- title: "Lead UX Engineer",
16
- id: "jasper-furniss",
17
- status: "Offline"
9
+ label: "United States",
10
+ value: "United States",
11
+ areaCode: "+1",
12
+ icon: "🇺🇸",
13
+ id: "us"
18
14
  },
19
15
  {
20
- label: "Ramon Ruiz",
21
- value: "Ramon Ruiz",
22
- territory: "PHL",
23
- title: "Senior UX Designer",
24
- id: "ramon-ruiz",
25
- status: "Away"
16
+ label: "United Kingdom",
17
+ value: "United Kingdom",
18
+ areaCode: "+44",
19
+ icon: "🇬🇧",
20
+ id: "gb"
26
21
  },
27
22
  {
28
- label: "Carlos Lima",
29
- value: "Carlos Lima",
30
- territory: "PHL",
31
- title: "Nitro Developer",
32
- id: "carlos-lima",
33
- status: "Online"
34
- },
35
- {
36
- label: "Courtney Long",
37
- value: "Courtney Long",
38
- territory: "PHL",
39
- title: "Lead UX Designer",
40
- id: "courtney-long",
41
- status: "Online"
23
+ label: "Pakistan",
24
+ value: "Pakistan",
25
+ areaCode: "+92",
26
+ icon: "🇵🇰",
27
+ id: "pk"
42
28
  }
43
- ];
44
-
29
+ ]
45
30
 
46
31
  return (
47
32
  <div>
48
33
  <Dropdown autocomplete
49
34
  options={options}
50
35
  {...props}
51
- >
52
- {options.map((option) => (
53
- <Dropdown.Option key={option.id}
54
- option={option}
55
- >
56
- <>
57
- <FlexItem>
58
- <User
59
- align="left"
60
- avatar
61
- name={option.label}
62
- orientation="horizontal"
63
- territory={option.territory}
64
- title={option.title}
65
- />
66
- </FlexItem>
67
- <FlexItem>
68
- <Badge
69
- rounded
70
- text={option.status}
71
- variant={`${
72
- option.status === "Offline"
73
- ? "neutral"
74
- : option.status === "Online"
75
- ? "success"
76
- : "warning"
77
- }`}
78
- />
79
- </FlexItem>
80
- </>
81
- </Dropdown.Option>
82
- ))}
83
- </Dropdown>
36
+ />
84
37
  </div>
85
38
  )
86
39
  }
@@ -0,0 +1,58 @@
1
+ <%
2
+ options = [
3
+ {
4
+ label: "Jasper Furniss",
5
+ value: "Jasper Furniss",
6
+ territory: "PHL",
7
+ title: "Lead UX Engineer",
8
+ id: "jasper-furniss",
9
+ status: "Offline"
10
+ },
11
+ {
12
+ label: "Ramon Ruiz",
13
+ value: "Ramon Ruiz",
14
+ territory: "PHL",
15
+ title: "Senior UX Designer",
16
+ id: "ramon-ruiz",
17
+ status: "Away"
18
+ },
19
+ {
20
+ label: "Carlos Lima",
21
+ value: "Carlos Lima",
22
+ territory: "PHL",
23
+ title: "Nitro Developer",
24
+ id: "carlos-lima",
25
+ status: "Online"
26
+ },
27
+ {
28
+ label: "Courtney Long",
29
+ value: "Courtney Long",
30
+ territory: "PHL",
31
+ title: "Lead UX Designer",
32
+ id: "courtney-long",
33
+ status: "Online"
34
+ }
35
+ ];
36
+
37
+ %>
38
+
39
+ <%= pb_rails("dropdown", props: {options: options}) do %>
40
+ <%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Search...", autocomplete: true}) %>
41
+ <%= pb_rails("dropdown/dropdown_container") do %>
42
+ <% options.each do |option| %>
43
+ <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
44
+ <%= pb_rails("flex", props: {
45
+ align: "center",
46
+ justify: "between",
47
+ }) do %>
48
+ <%= pb_rails("flex/flex_item") do %>
49
+ <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
50
+ <% end %>
51
+ <%= pb_rails("flex/flex_item") do %>
52
+ <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
53
+ <% end %>
54
+ <% end %>
55
+ <% end %>
56
+ <% end %>
57
+ <% end %>
58
+ <% end %>
@@ -1,15 +1,13 @@
1
- import React, { useState } from 'react'
1
+ import React from 'react'
2
2
 
3
- import Dropdown from '../../pb_dropdown/_dropdown'
3
+ import Dropdown from '../_dropdown'
4
4
  import Badge from '../../pb_badge/_badge'
5
+ import Flex from '../../pb_flex/_flex'
5
6
  import FlexItem from '../../pb_flex/_flex_item'
6
- import Avatar from '../../pb_avatar/_avatar'
7
7
  import User from '../../pb_user/_user'
8
8
 
9
9
 
10
- const DropdownWithAutocompleteAndCustomDisplay = (props) => {
11
- const [selectedOption, setSelectedOption] = useState();
12
-
10
+ const DropdownWithAutocompleteWithSubcomponents = (props) => {
13
11
  const options = [
14
12
  {
15
13
  label: "Jasper Furniss",
@@ -45,34 +43,21 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
45
43
  }
46
44
  ];
47
45
 
48
- const CustomDisplay = () => {
49
- return (
50
- <>
51
- {
52
- selectedOption && (
53
- <Avatar
54
- name={selectedOption.label}
55
- size="xs"
56
- />
57
- )
58
- }
59
- </>
60
- )
61
- };
62
46
 
63
47
  return (
64
48
  <div>
65
49
  <Dropdown autocomplete
66
- onSelect={(selectedItem) => setSelectedOption(selectedItem)}
67
50
  options={options}
68
51
  {...props}
69
52
  >
70
- <Dropdown.Trigger customDisplay={<CustomDisplay/>} />
71
53
  {options.map((option) => (
72
54
  <Dropdown.Option key={option.id}
73
55
  option={option}
74
56
  >
75
- <>
57
+ <Flex
58
+ align="center"
59
+ justify="between"
60
+ >
76
61
  <FlexItem>
77
62
  <User
78
63
  align="left"
@@ -85,6 +70,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
85
70
  </FlexItem>
86
71
  <FlexItem>
87
72
  <Badge
73
+ dark
88
74
  rounded
89
75
  text={option.status}
90
76
  variant={`${
@@ -96,7 +82,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
96
82
  }`}
97
83
  />
98
84
  </FlexItem>
99
- </>
85
+ </Flex>
100
86
  </Dropdown.Option>
101
87
  ))}
102
88
  </Dropdown>
@@ -104,4 +90,4 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
104
90
  )
105
91
  }
106
92
 
107
- export default DropdownWithAutocompleteAndCustomDisplay
93
+ export default DropdownWithAutocompleteWithSubcomponents
@@ -0,0 +1 @@
1
+ `autocomplete` prop can also be used in conjunction with the subcomponent structure.
@@ -0,0 +1 @@
1
+ The `useDropdown` hook can also be used to toggle the dropdown open and closed using an external control. To do so, you must manage state with the custom hook, pass the `dropdown:'pb-dropdown-trigger'` data attribute to the external control and use the `isClosed` prop as shown.
@@ -0,0 +1,61 @@
1
+ import React, { useState } from 'react'
2
+ import Dropdown from '../../pb_dropdown/_dropdown'
3
+ import IconCircle from '../../pb_icon_circle/_icon_circle';
4
+
5
+ const DropdownWithSearch = (props) => {
6
+ const [selectedOption, setSelectedOption] = useState();
7
+
8
+ const options = [
9
+ {
10
+ label: "United States",
11
+ value: "United States",
12
+ icon: "🇺🇸",
13
+ id: "United-states"
14
+
15
+ },
16
+ {
17
+ label: "United Kingdom",
18
+ value: "United Kingdom",
19
+ icon: "🇬🇧",
20
+ id: "united-kingdom"
21
+ },
22
+ {
23
+ label: "Pakistan",
24
+ value: "Pakistan",
25
+ icon: "🇵🇰",
26
+ id: "pakistan"
27
+ }
28
+ ];
29
+
30
+
31
+ return (
32
+ <div>
33
+ <Dropdown
34
+ onSelect={(selectedItem) => setSelectedOption(selectedItem)}
35
+ options={options}
36
+ {...props}
37
+ >
38
+ <Dropdown.Trigger>
39
+ <div key={selectedOption ? selectedOption.icon : "flag"}>
40
+ <IconCircle
41
+ cursor="pointer"
42
+ icon={selectedOption ? selectedOption.icon : "flag"}
43
+ variant="royal"
44
+ />
45
+ </div>
46
+ </Dropdown.Trigger>
47
+ <Dropdown.Container maxWidth="xs"
48
+ searchbar
49
+ >
50
+ {options.map((option) => (
51
+ <Dropdown.Option key={option.id}
52
+ option={option}
53
+ />
54
+ ))}
55
+ </Dropdown.Container>
56
+ </Dropdown>
57
+ </div>
58
+ )
59
+ }
60
+
61
+ export default DropdownWithSearch
@@ -0,0 +1,2 @@
1
+ The optional `searchbar` boolean prop can also be used on the `Dropdown.Container` to render a searchbar with typeahead functionality within the dropdown itself. This is especially useful when a custom trigger is being used.
2
+ `searchbar` is set to false by default.
@@ -0,0 +1,52 @@
1
+ <%
2
+ options = [
3
+ {
4
+ label: "United States",
5
+ value: "United States",
6
+ areaCode: "+1",
7
+ icon: "🇺🇸",
8
+ id: "us"
9
+ },
10
+ {
11
+ label: "United Kingdom",
12
+ value: "United Kingdom",
13
+ areaCode: "+44",
14
+ icon: "🇬🇧",
15
+ id: "gb"
16
+ },
17
+ {
18
+ label: "Pakistan",
19
+ value: "Pakistan",
20
+ areaCode: "+92",
21
+ icon: "🇵🇰",
22
+ id: "pk"
23
+ }
24
+ ]
25
+
26
+ %>
27
+
28
+ <%= pb_rails("dropdown", props: {options: options}) do %>
29
+ <%= pb_rails("dropdown/dropdown_trigger") do %>
30
+ <%= pb_rails("icon_circle", props: {icon:"flag", cursor: "pointer", variant:"royal"}) %>
31
+ <% end %>
32
+ <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs", searchbar: true}) do %>
33
+ <% options.each do |option| %>
34
+ <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
35
+ <%= pb_rails("flex", props: {
36
+ align: "center",
37
+ justify: "between",
38
+ }) do %>
39
+ <%= pb_rails("flex/flex_item") do %>
40
+ <%= pb_rails("flex") do %>
41
+ <%= pb_rails("icon", props: {icon: option[:icon]}) %>
42
+ <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
43
+ <% end %>
44
+ <% end %>
45
+ <%= pb_rails("flex/flex_item") do %>
46
+ <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
47
+ <% end %>
48
+ <% end %>
49
+ <% end %>
50
+ <% end %>
51
+ <% end %>
52
+ <% end %>
@@ -0,0 +1,2 @@
1
+ The optional `searchbar` boolean prop can also be used on the `dropdown/dropdown_container` to render a searchbar with typeahead functionality within the dropdown itself. This is especially useful when a custom trigger is being used.
2
+ `searchbar` is set to false by default.
@@ -1,12 +1,15 @@
1
1
  examples:
2
2
  rails:
3
3
  - dropdown_default: Default
4
+ - dropdown_with_autocomplete: Autocomplete
4
5
  - dropdown_subtle_variant: Subtle Variant
5
6
  - dropdown_subcomponent_structure_rails: Subcomponent Structure
7
+ - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
6
8
  - dropdown_with_label: With Label
7
9
  - dropdown_with_custom_options_rails: Custom Options
8
10
  - dropdown_with_custom_display_rails: Custom Display
9
11
  - dropdown_with_custom_trigger_rails: Custom Trigger
12
+ - dropdown_with_search_rails: Custom Trigger Dropdown with Search
10
13
  - dropdown_with_custom_padding: Custom Option Padding
11
14
  - dropdown_error: Dropdown with Error
12
15
  - dropdown_default_value: Default Value
@@ -15,20 +18,20 @@ examples:
15
18
 
16
19
  react:
17
20
  - dropdown_default: Default
21
+ - dropdown_with_autocomplete: Autocomplete
18
22
  - dropdown_subtle_variant: Subtle Variant
19
23
  - dropdown_subcomponent_structure: Subcomponent Structure
24
+ - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
20
25
  - dropdown_with_label: With Label
21
26
  - dropdown_with_custom_options: Custom Options
22
27
  - dropdown_with_custom_display: Custom Display
23
28
  - dropdown_with_custom_trigger: Custom Trigger
29
+ - dropdown_with_search: Custom Trigger Dropdown with Search
24
30
  - dropdown_with_custom_padding: Custom Option Padding
25
31
  - dropdown_error: Dropdown with Error
26
32
  - dropdown_default_value: Default Value
27
33
  - dropdown_blank_selection: Blank Selection
28
34
  - dropdown_clear_selection: Clear Selection
29
35
  - dropdown_separators_hidden: Separators Hidden
30
- # - dropdown_with_autocomplete: Autocomplete
31
- # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
32
- # - dropdown_with_external_control: useDropdown Hook
33
- # - dropdown_with_hook: useDropdown Hook with Any Trigger
36
+ - dropdown_with_external_control: useDropdown Hook
34
37
 
@@ -3,11 +3,10 @@ export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_di
3
3
  export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
4
4
  export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'
5
5
  export { default as DropdownWithAutocomplete } from './_dropdown_with_autocomplete.jsx'
6
- export { default as DropdownWithAutocompleteAndCustomDisplay } from './_dropdown_with_autocomplete_and_custom_display.jsx'
6
+ export { default as DropdownWithAutocompleteWithSubcomponents } from './_dropdown_with_autocomplete_with_subcomponents.jsx'
7
7
  export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'
8
8
  export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
9
9
  export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
10
- export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
11
10
  export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
12
11
  export { default as DropdownError } from './_dropdown_error.jsx'
13
12
  export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
@@ -15,3 +14,4 @@ export { default as DropdownBlankSelection } from './_dropdown_blank_selection.j
15
14
  export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
16
15
  export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
17
16
  export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
17
+ export {default as DropdownWithSearch} from './_dropdown_with_search.jsx'
@@ -0,0 +1,27 @@
1
+ <%= pb_rails("flex", props: {align: "center", spacing: "evenly", wrap: true}) do %>
2
+ <%= pb_rails("empty_state", props: {
3
+ description: "Body text goes into detail with possible steps for user to take",
4
+ header: "Title Explains",
5
+ image: "default",
6
+ primary_button: "Next Action",
7
+ primary_button_url: "#primary_button_url",
8
+ alignment: "left",
9
+ }) %>
10
+
11
+ <%= pb_rails("empty_state", props: {
12
+ description: "Body text goes into detail with possible steps for user to take",
13
+ header: "Title Explains",
14
+ image: "default",
15
+ primary_button: "Next Action",
16
+ primary_button_url: "#primary_button_url",
17
+ }) %>
18
+
19
+ <%= pb_rails("empty_state", props: {
20
+ description: "Body text goes into detail with possible steps for user to take",
21
+ header: "Title Explains",
22
+ image: "default",
23
+ primary_button: "Next Action",
24
+ primary_button_url: "#primary_button_url",
25
+ alignment: "right",
26
+ }) %>
27
+ <% end %>
@@ -0,0 +1,7 @@
1
+ <%= pb_rails("flex", props: {align: "center", justify: "center"}) do %>
2
+ <%= pb_rails("empty_state", props: {
3
+ description: "Body text goes into detail with possible steps for user to take",
4
+ header: "Title Explains",
5
+ image: "default",
6
+ }) %>
7
+ <% end %>
@@ -0,0 +1,12 @@
1
+ <%= pb_rails("flex", props: {align: "center", justify: "center", wrap: true}) do %>
2
+ <%= pb_rails("empty_state", props: {
3
+ description: "Body text goes into detail with possible steps for user to take",
4
+ header: "Title Explains",
5
+ image: "default",
6
+ orientation:"horizontal",
7
+ alignment: "left",
8
+ size: "lg",
9
+ primary_button: "Next Action",
10
+ primary_button_url: "#primary_button_url",
11
+ }) %>
12
+ <% end %>
@@ -0,0 +1,23 @@
1
+ <%= pb_rails("flex", props: {align: "center", spacing: "evenly", wrap: true}) do %>
2
+ <%= pb_rails("empty_state", props: {
3
+ description: "Body text goes into detail with possible steps for user to take",
4
+ header: "Title Explains",
5
+ image: "default",
6
+ primary_button: "Next Action",
7
+ primary_button_url: "#primary_button_url",
8
+ link_button: "Alt Action",
9
+ link_button_url: "#link_button_url",
10
+ size: "sm",
11
+ }) %>
12
+
13
+ <%= pb_rails("empty_state", props: {
14
+ description: "Body text goes into detail with possible steps for user to take",
15
+ header: "Title Explains",
16
+ image: "default",
17
+ primary_button: "Next Action",
18
+ primary_button_url: "#primary_button_url",
19
+ link_button: "Alt Action",
20
+ link_button_url: "#link_button_url",
21
+ size: "lg",
22
+ }) %>
23
+ <% end %>
@@ -1,5 +1,9 @@
1
1
  examples:
2
-
2
+ rails:
3
+ - empty_state_default: Default
4
+ - empty_state_size: Size
5
+ - empty_state_orientation: Orientation
6
+ - empty_state_alignment: Alignment
3
7
 
4
8
  react:
5
9
  - empty_state_default: Default
@@ -0,0 +1 @@
1
+ <%= pb_rails("file_upload", props: {id: "error", error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please upload a valid file")}) %>
@@ -0,0 +1,41 @@
1
+ import React, { useState } from 'react'
2
+ import FileUpload from '../_file_upload'
3
+ import List from '../../pb_list/_list'
4
+ import ListItem from '../../pb_list/_list_item'
5
+ import Icon from '../../pb_icon/_icon'
6
+
7
+ const AcceptedFilesList = ({ files }) => (
8
+ <List>
9
+ {files.map((file) => (
10
+ <ListItem key={file.name}>{file.name}</ListItem>
11
+ ))}
12
+ </List>
13
+ )
14
+
15
+ const FileUploadError = (props) => {
16
+ const [filesToUpload, setFilesToUpload] = useState([])
17
+
18
+ const handleOnFilesAccepted = (files) => {
19
+ setFilesToUpload([...filesToUpload, ...files])
20
+ }
21
+
22
+ const error = (<>
23
+ <Icon icon="warning" /> Please upload a valid file
24
+ </>)
25
+
26
+ return (
27
+ <div>
28
+ <AcceptedFilesList
29
+ files={filesToUpload}
30
+ {...props}
31
+ />
32
+ <FileUpload
33
+ error={error}
34
+ onFilesAccepted={handleOnFilesAccepted}
35
+ {...props}
36
+ />
37
+ </div>
38
+ )
39
+ }
40
+
41
+ export default FileUploadError
@@ -3,6 +3,7 @@ examples:
3
3
  rails:
4
4
  - file_upload_default: File Upload
5
5
  - file_upload_custom: Custom
6
+ - file_upload_error: Error
6
7
 
7
8
  react:
8
9
  - file_upload_default: Default List of files to upload
@@ -10,3 +11,4 @@ examples:
10
11
  - file_upload_custom_message: Add a custom message
11
12
  - file_upload_custom_description: Add your one accepted files description
12
13
  - file_upload_max_size: Set a file size limit
14
+ - file_upload_error: Error
@@ -3,3 +3,4 @@ export { default as FileUploadAccept } from './_file_upload_accept.jsx'
3
3
  export { default as FileUploadCustomMessage } from './_file_upload_custom_message.jsx'
4
4
  export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
5
5
  export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'
6
+ export { default as FileUploadError } from './_file_upload_error.jsx'
@@ -0,0 +1,41 @@
1
+ <%=
2
+ pb_rails("filter", props: {
3
+ id: "filter_within_trubo_frames",
4
+ position: "top",
5
+ filters: [
6
+ { name: "name", value: "John Wick" },
7
+ { name: "city", value: "San Francisco"}
8
+ ],
9
+ sort_menu: [
10
+ { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
11
+ { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
12
+ { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
13
+ ],
14
+ template: "default",
15
+ results: 1,
16
+ popover_props: { append_to: "parent" },
17
+ }) do
18
+ %>
19
+ <%
20
+ example_collection = [
21
+ OpenStruct.new(name: "USA", value: 1),
22
+ OpenStruct.new(name: "Canada", value: 2),
23
+ OpenStruct.new(name: "Brazil", value: 3),
24
+ OpenStruct.new(name: "Philippines", value: 4),
25
+ OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
26
+ ]
27
+ %>
28
+ <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
29
+ <%= form.text_field :example_text_field, props: { label: true } %>
30
+ <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
31
+
32
+ <%= form.actions do |action| %>
33
+ <%= action.submit props: {
34
+ text: "Apply",
35
+ data: {
36
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
37
+ },}%>
38
+ <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
39
+ <% end %>
40
+ <% end %>
41
+ <% end %>
@@ -0,0 +1 @@
1
+ By default, the filter popover attaches to the `<body>`. To attach it elsewhere, like inside a Turbo Frame, pass the `append_to` prop through `popover_props`. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.
@@ -11,6 +11,7 @@ examples:
11
11
  - filter_max_height: Max Height for Popover Inside of Filter
12
12
  - filter_placement: Filter Placement
13
13
  - filter_popover_props: Popover Props
14
+ - filter_within_turbo_frames: Within Turbo Frames
14
15
 
15
16
  react:
16
17
  - filter_default: Default
@@ -11,7 +11,6 @@ SolidGauge(Highcharts);
11
11
  const data = [{ name: "Name", y: 45 }]
12
12
 
13
13
  const baseOptions = {
14
- title: { text: "" },
15
14
  series: [{ data: data }],
16
15
  };
17
16