playbook_ui 14.18.0 → 14.19.0.pre.alpha.PLAY21297675

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 (217) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +11 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/TableActionBar.tsx +148 -15
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +20 -3
  6. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +23 -13
  7. data/app/pb_kits/playbook/pb_advanced_table/Utilities/VisibilityTree.ts +47 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +313 -21
  9. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +12 -3
  10. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +6 -1
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +0 -6
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx +80 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +3 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +58 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +3 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.jsx +57 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.md +4 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.jsx +62 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.md +1 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.jsx +82 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.md +1 -0
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.jsx +65 -0
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.md +1 -0
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md +5 -1
  25. 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
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md +3 -2
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +10 -5
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +7 -2
  29. data/app/pb_kits/playbook/pb_advanced_table/flat_advanced_table.js +106 -0
  30. data/app/pb_kits/playbook/pb_advanced_table/index.js +228 -11
  31. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +1 -0
  32. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +9 -1
  33. data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +0 -3
  34. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +1 -2
  35. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +4 -0
  36. data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +3 -0
  37. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +3 -3
  38. data/app/pb_kits/playbook/pb_avatar/avatar.rb +2 -0
  39. data/app/pb_kits/playbook/pb_avatar/avatar.test.js +18 -0
  40. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.html.erb +5 -0
  41. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.jsx +16 -0
  42. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -0
  43. data/app/pb_kits/playbook/pb_avatar/docs/index.js +1 -0
  44. data/app/pb_kits/playbook/pb_card/card.html.erb +1 -1
  45. data/app/pb_kits/playbook/pb_card/card.rb +12 -0
  46. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +1 -1
  47. data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +2 -2
  48. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +53 -0
  49. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
  50. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
  51. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
  52. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
  53. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
  54. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
  55. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
  56. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
  57. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
  58. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
  59. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
  60. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  61. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  62. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
  63. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
  64. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
  65. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
  66. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +12 -0
  67. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +12 -0
  68. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +50 -1
  69. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
  70. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
  71. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
  72. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  73. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
  74. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
  75. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
  76. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
  77. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
  78. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  79. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  80. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +10 -0
  81. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +64 -0
  82. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
  83. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
  84. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb +55 -0
  85. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md +5 -0
  86. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md +5 -0
  87. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx +59 -0
  88. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md +1 -0
  89. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +4 -1
  90. data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
  91. data/app/pb_kits/playbook/pb_draggable/draggable.rb +9 -1
  92. data/app/pb_kits/playbook/pb_draggable/draggable_container.rb +11 -1
  93. data/app/pb_kits/playbook/pb_draggable/draggable_item.rb +11 -1
  94. data/app/pb_kits/playbook/pb_draggable/index.js +141 -142
  95. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +33 -5
  96. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +5 -0
  97. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +5 -16
  98. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
  99. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
  100. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +28 -0
  101. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +17 -64
  102. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +58 -0
  103. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx → _dropdown_with_autocomplete_with_subcomponents.jsx} +11 -25
  104. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md +1 -0
  105. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md +1 -0
  106. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +61 -0
  107. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md +2 -0
  108. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +52 -0
  109. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md +2 -0
  110. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +7 -4
  111. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -2
  112. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +2 -2
  113. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +4 -0
  114. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +45 -1
  115. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +10 -0
  116. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +3 -0
  117. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +12 -2
  118. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +3 -1
  119. data/app/pb_kits/playbook/pb_dropdown/index.js +57 -0
  120. data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js +26 -0
  121. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +3 -4
  122. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +4 -4
  123. data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss +8 -1
  124. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb +27 -0
  125. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb +7 -0
  126. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb +12 -0
  127. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb +23 -0
  128. data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +5 -1
  129. data/app/pb_kits/playbook/pb_empty_state/empty_state.html.erb +19 -0
  130. data/app/pb_kits/playbook/pb_empty_state/empty_state.rb +123 -0
  131. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb +41 -0
  132. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md +1 -0
  133. data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
  134. data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss +22 -18
  135. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +0 -1
  136. data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +3 -1
  137. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +52 -0
  138. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +1 -0
  139. data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +1 -0
  140. data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
  141. data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts +110 -0
  142. data/app/pb_kits/playbook/pb_message/_message.tsx +3 -0
  143. data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.html.erb +9 -0
  144. data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.jsx +21 -0
  145. data/app/pb_kits/playbook/pb_message/docs/example.yml +2 -0
  146. data/app/pb_kits/playbook/pb_message/docs/index.js +1 -0
  147. data/app/pb_kits/playbook/pb_message/message.html.erb +2 -1
  148. data/app/pb_kits/playbook/pb_message/message.rb +1 -0
  149. data/app/pb_kits/playbook/pb_overlay/_overlay.scss +2 -1
  150. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +1 -1
  151. data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx +5 -4
  152. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +13 -0
  153. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -1
  154. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
  155. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
  156. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
  157. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
  158. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
  159. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
  160. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
  161. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +19 -0
  162. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb +46 -0
  163. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md +1 -0
  164. data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -0
  165. data/app/pb_kits/playbook/pb_popover/index.ts +13 -1
  166. data/app/pb_kits/playbook/pb_popover/popover.rb +2 -0
  167. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +2 -2
  168. data/app/pb_kits/playbook/pb_select/_select.scss +10 -0
  169. data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
  170. data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
  171. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +7 -7
  172. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +5 -5
  173. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
  174. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
  175. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
  176. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
  177. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
  178. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
  179. data/app/pb_kits/playbook/pb_user/_user.tsx +3 -0
  180. data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb +6 -0
  181. data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx +16 -0
  182. data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
  183. data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
  184. data/app/pb_kits/playbook/pb_user/user.html.erb +2 -1
  185. data/app/pb_kits/playbook/pb_user/user.rb +1 -0
  186. data/dist/chunks/_typeahead-BPSIWtFT.js +22 -0
  187. data/dist/chunks/_weekday_stacked-BeuPAmxG.js +45 -0
  188. data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
  189. data/dist/chunks/lib-B20MXZcW.js +29 -0
  190. data/dist/chunks/{pb_form_validation-BRjyJrKh.js → pb_form_validation-WWvUXPKD.js} +1 -1
  191. data/dist/chunks/vendor.js +1 -1
  192. data/dist/menu.yml +6 -14
  193. data/dist/playbook-doc.js +2 -2
  194. data/dist/playbook-rails-react-bindings.js +1 -1
  195. data/dist/playbook-rails.js +1 -1
  196. data/dist/playbook.css +1 -1
  197. data/lib/playbook/version.rb +2 -2
  198. metadata +75 -24
  199. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +0 -1
  200. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -79
  201. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.scss +0 -3
  202. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +0 -72
  203. data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +0 -53
  204. data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +0 -7
  205. data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +0 -1
  206. data/app/pb_kits/playbook/pb_gantt_chart/gantt_chart.test.jsx +0 -19
  207. data/dist/chunks/_typeahead-C_FX7o_S.js +0 -22
  208. data/dist/chunks/_weekday_stacked-B4RLTeDo.js +0 -45
  209. data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
  210. data/dist/chunks/lib-ySl8uEpT.js +0 -29
  211. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_react.md → _advanced_table_selectable_rows.md} +0 -0
  212. /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
  213. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows.html.erb → _advanced_table_selectable_rows_rails.html.erb} +0 -0
  214. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_colors.md → _draggable_drop_zones_colors_react.md} +0 -0
  215. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_line.md → _draggable_drop_zones_line_react.md} +0 -0
  216. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones.md → _draggable_drop_zones_react.md} +0 -0
  217. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_event_listeners.md → _draggable_event_listeners_rails.md} +0 -0
@@ -1,6 +1,7 @@
1
1
  import React from 'react'
2
2
  import Body from '../../pb_body/_body'
3
3
  import Select from '../../pb_select/_select'
4
+ import Icon from '../../pb_icon/_icon'
4
5
 
5
6
  const SelectError = (props) => {
6
7
  const options = [
@@ -18,10 +19,14 @@ const SelectError = (props) => {
18
19
  },
19
20
  ]
20
21
 
22
+ const error = (<>
23
+ <Icon icon="warning" /> Please make a valid selection
24
+ </>)
25
+
21
26
  return (
22
27
  <div>
23
28
  <Select
24
- error="Please make a valid selection"
29
+ error={error}
25
30
  label="Favorite Food"
26
31
  name="food"
27
32
  options={options}
@@ -29,7 +34,7 @@ const SelectError = (props) => {
29
34
  {...props}
30
35
  />
31
36
  <Body
32
- error="Please make a valid selection"
37
+ error={error}
33
38
  status="negative"
34
39
  {...props}
35
40
  />
@@ -8,7 +8,7 @@ const TableWithCollapsibleWithCustomClick = (props) => {
8
8
 
9
9
  const Content = () => {
10
10
  return (
11
- <Card
11
+ <Card
12
12
  borderNone
13
13
  borderRadius="none"
14
14
  padding="md"
@@ -37,7 +37,7 @@ return (
37
37
 
38
38
  </Table.Head>
39
39
  <Table.Body>
40
- <Table.Row collapsible
40
+ <Table.Row collapsible
41
41
  collapsibleContent={<Content/>}
42
42
  toggleCellId="cell-1"
43
43
  {...props}
@@ -47,7 +47,7 @@ return (
47
47
  <Table.Cell>{'Value 3'}</Table.Cell>
48
48
  <Table.Cell>{'Value 4'}</Table.Cell>
49
49
  <Table.Cell>{'Value 5'}</Table.Cell>
50
- <Table.Cell cursor="pointer"
50
+ <Table.Cell cursor="pointer"
51
51
  id="cell-1"
52
52
  textAlign="right"
53
53
  >
@@ -59,7 +59,7 @@ return (
59
59
  </Table.Cell>
60
60
 
61
61
  </Table.Row>
62
- <Table.Row collapsible
62
+ <Table.Row collapsible
63
63
  collapsibleContent={<Content/>}
64
64
  toggleCellId="cell-2"
65
65
  {...props}
@@ -69,7 +69,7 @@ return (
69
69
  <Table.Cell>{'Value 3'}</Table.Cell>
70
70
  <Table.Cell>{'Value 4'}</Table.Cell>
71
71
  <Table.Cell>{'Value 5'}</Table.Cell>
72
- <Table.Cell cursor="pointer"
72
+ <Table.Cell cursor="pointer"
73
73
  id="cell-2"
74
74
  textAlign="right"
75
75
  >
@@ -81,7 +81,7 @@ return (
81
81
  </Table.Cell>
82
82
 
83
83
  </Table.Row>
84
- <Table.Row collapsible
84
+ <Table.Row collapsible
85
85
  collapsibleContent={<Content/>}
86
86
  toggleCellId="cell-3"
87
87
  {...props}
@@ -91,7 +91,7 @@ return (
91
91
  <Table.Cell>{'Value 3'}</Table.Cell>
92
92
  <Table.Cell>{'Value 4'}</Table.Cell>
93
93
  <Table.Cell>{'Value 5'}</Table.Cell>
94
- <Table.Cell cursor="pointer"
94
+ <Table.Cell cursor="pointer"
95
95
  id="cell-3"
96
96
  textAlign="right"
97
97
  >
@@ -55,7 +55,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
55
55
  const htmlProps = buildHtmlProps(htmlOptions);
56
56
  const sideHighlightClass =
57
57
  sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null;
58
-
58
+
59
59
  const [isCollapsed, setIsCollapsed] = useCollapsible(true);
60
60
 
61
61
  const collapsibleRow = collapsible && isCollapsed === true ? "collapsible_table_row" : null;
@@ -83,14 +83,14 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
83
83
  target instanceof SVGElement &&
84
84
  (target.matches("svg.pb_custom_icon") || target.closest("svg.pb_custom_icon"));
85
85
 
86
- if (clickedCell || isIconClick) {
86
+ if (clickedCell || (clickedCell && isIconClick)) {
87
87
  setIsCollapsed(!isCollapsed);
88
88
  }
89
89
  } else {
90
90
  setIsCollapsed(!isCollapsed);
91
91
  }
92
92
  };
93
-
93
+
94
94
  return (
95
95
  <>
96
96
  {collapsible ? (
@@ -116,7 +116,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
116
116
  tag="td"
117
117
  >
118
118
  <tr/>
119
- <Collapsible.Content
119
+ <Collapsible.Content
120
120
  className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
121
121
  dark={dark}
122
122
  margin="none"
@@ -149,7 +149,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
149
149
  tag="td"
150
150
  >
151
151
  <tr/>
152
- <Collapsible.Content
152
+ <Collapsible.Content
153
153
  className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
154
154
  dark={dark}
155
155
  margin="none"
@@ -4,7 +4,7 @@
4
4
  border: true,
5
5
  icon: "user"
6
6
  },
7
- error: "Please enter a valid email address",
7
+ error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please enter a valid email address"),
8
8
  label: "Email Address",
9
9
  placeholder: "Enter email address",
10
10
  type: "email"
@@ -1,6 +1,7 @@
1
1
  import React, { useState } from 'react'
2
2
 
3
3
  import TextInput from '../_text_input'
4
+ import Icon from '../../pb_icon/_icon'
4
5
 
5
6
  const TextInputError = (props) => {
6
7
  const [email, setEmail] = useState('')
@@ -8,11 +9,18 @@ const TextInputError = (props) => {
8
9
  const handleUpdateEmail = ({ target }) => {
9
10
  setEmail(target.value)
10
11
  }
12
+
13
+ const error = (
14
+ <>
15
+ <Icon icon="warning" /> Please enter a valid email address
16
+ </>
17
+ )
18
+
11
19
  return (
12
20
  <div>
13
21
  <TextInput
14
22
  addOn={{ icon: 'user', alignment: 'left', border: true }}
15
- error="Please enter a valid email address"
23
+ error={error}
16
24
  label="Email Address"
17
25
  onChange={handleUpdateEmail}
18
26
  placeholder="Enter email address"
@@ -1 +1,5 @@
1
- <%= pb_rails("textarea", props: { error: "This field has an error!", label: "Label", rows: 4}) %>
1
+ <%= pb_rails("textarea", props: {
2
+ error: raw(pb_rails("icon", props: { icon: "warning" }) + " This field has an error!"),
3
+ label: "Label",
4
+ rows: 4
5
+ }) %>
@@ -1,15 +1,21 @@
1
1
  import React, {useState} from 'react'
2
2
  import Textarea from '../../pb_textarea/_textarea'
3
+ import Icon from '../../pb_icon/_icon'
3
4
 
4
5
  const TextareaError = (props) => {
5
6
  const [value, setValue] = useState('default value text')
6
7
  const handleChange = (event) => {
7
8
  setValue(event.target.value)
8
9
  }
10
+ const error = (
11
+ <>
12
+ <Icon icon="warning" /> This field has an error!
13
+ </>
14
+ )
9
15
  return (
10
16
  <div>
11
17
  <Textarea
12
- error="This field has an error!"
18
+ error={error}
13
19
  label="Label"
14
20
  name="comment"
15
21
  onChange={(e)=> handleChange(e)}
@@ -8,7 +8,14 @@
8
8
 
9
9
  %>
10
10
 
11
- <%= pb_rails("typeahead", props: { id: "typeahead-error-example", options: options, error: "Please make a valid selection", label: "Products", name: :foo, is_multi: false }) %>
11
+ <%= pb_rails("typeahead", props: {
12
+ id: "typeahead-error-example",
13
+ options: options,
14
+ error: "Please make a valid selection",
15
+ label: "Products",
16
+ name: :foo,
17
+ is_multi: false
18
+ }) %>
12
19
 
13
20
  <!-- This section is an example of the available JavaScript event hooks -->
14
21
  <%= javascript_tag defer: "defer" do %>
@@ -1,6 +1,7 @@
1
1
  import React, { useState, useEffect } from 'react'
2
2
 
3
3
  import Typeahead from '../_typeahead'
4
+ import Icon from '../../pb_icon/_icon'
4
5
 
5
6
  const options = [
6
7
  { label: 'Orange', value: '#FFA500' },
@@ -10,7 +11,10 @@ const options = [
10
11
  ]
11
12
 
12
13
  const TypeaheadErrorState = (props) => {
13
- const [errorState, setErrorState] = useState("Please make a valid selection");
14
+ const error = (<>
15
+ <Icon icon="warning" /> Please make a valid selection
16
+ </>)
17
+ const [errorState, setErrorState] = useState(error);
14
18
  const [searchValue, setSearchValue] = useState(null);
15
19
 
16
20
  const handleOnChange = (value) => setSearchValue(value)
@@ -19,7 +23,7 @@ const TypeaheadErrorState = (props) => {
19
23
  if(searchValue) {
20
24
  setErrorState("")
21
25
  } else {
22
- setErrorState("Please make a valid selection")
26
+ setErrorState(error)
23
27
  }
24
28
  }, [searchValue])
25
29
 
@@ -19,6 +19,7 @@ type UserProps = {
19
19
  className?: string,
20
20
  dark?: boolean,
21
21
  data?: {[key: string]: string},
22
+ avatarGrayscale?: boolean,
22
23
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
23
24
  id?: string,
24
25
  name?: string,
@@ -41,6 +42,7 @@ const User = (props: UserProps): React.ReactElement => {
41
42
  className,
42
43
  dark = false,
43
44
  data = {},
45
+ avatarGrayscale = false,
44
46
  htmlOptions = {},
45
47
  id,
46
48
  name,
@@ -145,6 +147,7 @@ const User = (props: UserProps): React.ReactElement => {
145
147
  >
146
148
  { avatarPresent &&
147
149
  <Avatar
150
+ grayscale={avatarGrayscale}
148
151
  imageUrl={avatarUrl}
149
152
  name={name}
150
153
  size={size}
@@ -0,0 +1,6 @@
1
+ <%= pb_rails("user", props: {
2
+ name: "Anna Black",
3
+ title: "Remodeling Consultant",
4
+ avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
5
+ avatar_grayscale: true,
6
+ }) %>
@@ -0,0 +1,16 @@
1
+ import React from 'react'
2
+ import User from '../../pb_user/_user'
3
+
4
+ const UserGrayscale = (props) => {
5
+ return (
6
+ <User
7
+ avatarGrayscale
8
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
9
+ name="Anna Black"
10
+ title="Remodeling Consultant"
11
+ {...props}
12
+ />
13
+ )
14
+ }
15
+
16
+ export default UserGrayscale
@@ -10,6 +10,7 @@ examples:
10
10
  - user_subtitle: Subtitle
11
11
  - user_block_content_subtitle_rails: Block Content Subtitle
12
12
  - user_font_options: Font Options
13
+ - user_grayscale: Grayscale Avatar
13
14
 
14
15
  react:
15
16
  - user_default: Default
@@ -21,6 +22,7 @@ examples:
21
22
  - user_subtitle: Subtitle
22
23
  - user_block_content_subtitle_react: Block Content Subtitle
23
24
  - user_font_options: Font Options
25
+ - user_grayscale: Grayscale Avatar
24
26
 
25
27
  swift:
26
28
  - user_horizontal_swift: Horizontal
@@ -7,3 +7,4 @@ export { default as UserVerticalSize } from './_user_vertical_size.jsx'
7
7
  export { default as UserSubtitle } from './_user_subtitle.jsx'
8
8
  export { default as UserBlockContentSubtitleReact } from './_user_block_content_subtitle_react.jsx'
9
9
  export { default as UserFontOptions } from './_user_font_options.jsx'
10
+ export { default as UserGrayscale } from './_user_grayscale.jsx'
@@ -3,7 +3,8 @@
3
3
  <%= pb_rails("avatar", props: {
4
4
  name: object.name,
5
5
  size: object.avatar_size,
6
- image_url: object.avatar_url
6
+ image_url: object.avatar_url,
7
+ grayscale: object.avatar_grayscale,
7
8
  }) %>
8
9
  <% end %>
9
10
  <%= content_tag(:div, class: "content_wrapper") do %>
@@ -8,6 +8,7 @@ module Playbook
8
8
  default: "left"
9
9
  prop :avatar, type: Playbook::Props::Boolean,
10
10
  default: false
11
+ prop :avatar_grayscale, type: Playbook::Props::Boolean, default: false
11
12
  prop :avatar_url
12
13
  prop :bold, type: Playbook::Props::Boolean, default: true
13
14
  prop :name