playbook_ui_docs 14.18.0 → 14.19.0.pre.alpha.PLAY2172homeaddressstreetundefinedstatebug7716

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
@@ -0,0 +1,52 @@
1
+ import React from 'react'
2
+ import lineGraphTheme from '../lineGraphTheme'
3
+ import Highcharts from "highcharts"
4
+ import HighchartsReact from "highcharts-react-official"
5
+
6
+ const data = [{
7
+ name: 'Installation',
8
+ data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
9
+ }, {
10
+ name: 'Manufacturing',
11
+ data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
12
+ }, {
13
+ name: 'Sales & Distribution',
14
+ data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
15
+ }, {
16
+ name: 'Project Development',
17
+ data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
18
+ }, {
19
+ name: 'Other',
20
+ data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
21
+ }]
22
+
23
+ const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
24
+
25
+ const baseOptions = {
26
+ series: data,
27
+ title: { text: "Solar Employment Growth by Sector, 2010-2016" },
28
+ subtitle: { text: "Source: thesolarfoundation.com" },
29
+ xAxis: {
30
+ categories: categories,
31
+ },
32
+ yAxis: {
33
+ title: {
34
+ text: "Number of Employees",
35
+ },
36
+ },
37
+ }
38
+
39
+ const LineGraphPbStyles = () => {
40
+ const options = Highcharts.merge({}, lineGraphTheme, baseOptions)
41
+
42
+ return(
43
+ <div>
44
+ <HighchartsReact
45
+ highcharts={Highcharts}
46
+ options={options}
47
+ />
48
+ </div>
49
+ )
50
+ }
51
+
52
+ export default LineGraphPbStyles
@@ -0,0 +1 @@
1
+ You don't need to use the Line Graph Kit to apply Playbook styles to your Highcharts line graph. Just import lineGraphTheme.ts and merge it with your graph options—Playbook’s styling will apply automatically.
@@ -11,6 +11,7 @@ examples:
11
11
 
12
12
  react:
13
13
  - line_graph_default: Default
14
+ - line_graph_pb_styles: Playbook Styles
14
15
  - line_graph_legend: Legend
15
16
  - line_graph_legend_position: Legend Position
16
17
  - line_graph_legend_nonclickable: Legend Nonclickable
@@ -4,3 +4,4 @@ export { default as LineGraphLegendPosition } from './_line_graph_legend_positio
4
4
  export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
5
5
  export { default as LineGraphHeight } from './_line_graph_height.jsx'
6
6
  export { default as LineGraphColors } from './_line_graph_colors.jsx'
7
+ export { default as LineGraphPbStyles } from './_line_graph_pb_styles.jsx'
@@ -0,0 +1,9 @@
1
+ <%= pb_rails("message", props: {
2
+ label: "Mike Bishop",
3
+ message: "So long, and thanks for all the fish!",
4
+ timestamp: "3 months ago",
5
+ avatar_name: "Mike Bishop",
6
+ avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
7
+ avatar_status: "offline",
8
+ avatar_grayscale: true,
9
+ }) %>
@@ -0,0 +1,21 @@
1
+ import React from "react"
2
+
3
+ import Message from "../_message"
4
+
5
+ const MessageGrayscale = (props) => {
6
+ return (
7
+ <Message
8
+ avatarGrayscale
9
+ avatarName='Mike Bishop'
10
+ avatarStatus='offline'
11
+ avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
12
+ borderRadius='rounded'
13
+ label='Mike Bishop'
14
+ message='So long, and thanks for all the fish!'
15
+ timestamp='3 months ago'
16
+ {...props}
17
+ />
18
+ )
19
+ }
20
+
21
+ export default MessageGrayscale
@@ -5,12 +5,14 @@ examples:
5
5
  - message_timestamp: With Timestamp Hover
6
6
  - message_hover: Hover
7
7
  - message_mentions: Mentions
8
+ - message_grayscale: Grayscale Avatar
8
9
 
9
10
  react:
10
11
  - message_default: Default
11
12
  - message_timestamp: With Timestamp Hover
12
13
  - message_hover: Hover
13
14
  - message_mentions: Mentions
15
+ - message_grayscale: Grayscale Avatar
14
16
 
15
17
  swift:
16
18
  - message_default_swift: Default
@@ -2,3 +2,4 @@ export { default as MessageDefault } from './_message_default.jsx'
2
2
  export { default as MessageTimestamp } from './_message_timestamp.jsx'
3
3
  export { default as MessageHover } from './_message_hover.jsx'
4
4
  export { default as MessageMentions } from './_message_mentions.jsx'
5
+ export { default as MessageGrayscale } from './_message_grayscale.jsx'
@@ -9,7 +9,7 @@ const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
9
9
  <Flex
10
10
  columnGap="lg"
11
11
  orientation="row"
12
- ref={ref}
12
+ ref={ref}
13
13
  >
14
14
  {Array.from({ length: 15 }, (_, index) => (
15
15
  <FlexItem key={index}>
@@ -0,0 +1,10 @@
1
+ <%= pb_rails("phone_number_input", props: {
2
+ country_search: true,
3
+ id: "country-search",
4
+ }) %>
5
+
6
+ <%= pb_rails("phone_number_input", props: {
7
+ country_search: true,
8
+ id: "country-search-limited",
9
+ only_countries: ["br", "us", "ph", "gb"],
10
+ }) %>
@@ -0,0 +1,20 @@
1
+ import React from 'react'
2
+ import PhoneNumberInput from '../_phone_number_input'
3
+
4
+ const PhoneNumberInputCountrySearch = (props) => (
5
+ <>
6
+ <PhoneNumberInput
7
+ countrySearch
8
+ id='country-search'
9
+ {...props}
10
+ />
11
+ <PhoneNumberInput
12
+ countrySearch
13
+ id='country-search-limited'
14
+ onlyCountries={["br", "us", "ph", "gb"]}
15
+ {...props}
16
+ />
17
+ </>
18
+ )
19
+
20
+ export default PhoneNumberInputCountrySearch
@@ -0,0 +1 @@
1
+ Set `country_search` / `countrySearch` to true to allow users to search for a specific Country within the dropdown. If the range of countries has been limited, only the selected countries will be searchable.
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
3
3
  import Button from '../../pb_button/_button'
4
4
  import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
5
5
  import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
6
+ import Icon from '../../pb_icon/_icon'
6
7
 
7
8
  const PhoneNumberInputValidation = (props) => {
8
9
  const [formErrors, setFormErrors] = useState("");
@@ -29,6 +30,12 @@ const PhoneNumberInputValidation = (props) => {
29
30
  setShowFormErrors(formErrors.length > 0);
30
31
  }, [formErrors]);
31
32
 
33
+ const error = (
34
+ <>
35
+ <Icon icon="warning" /> Missing phone number.
36
+ </>
37
+ )
38
+
32
39
  return (
33
40
  <form
34
41
  action=""
@@ -43,7 +50,7 @@ const PhoneNumberInputValidation = (props) => {
43
50
  />
44
51
  )}
45
52
  <PhoneNumberInput
46
- error="Missing phone number."
53
+ error={error}
47
54
  id="validation"
48
55
  initialCountry={countryCode}
49
56
  onChange={handleOnChange}
@@ -9,6 +9,7 @@ examples:
9
9
  - phone_number_input_clear_field: Clearing the Input Field
10
10
  - phone_number_input_access_input_element: Accessing the Input Element
11
11
  - phone_number_input_format: Format as You Type
12
+ - phone_number_input_country_search: Country Search
12
13
 
13
14
  rails:
14
15
  - phone_number_input_default: Default
@@ -18,4 +19,5 @@ examples:
18
19
  - phone_number_input_validation: Form Validation
19
20
  - phone_number_input_format: Format as You Type
20
21
  - phone_number_input_hidden_inputs: Hidden Inputs
22
+ - phone_number_input_country_search: Country Search
21
23
 
@@ -6,3 +6,4 @@ export { default as PhoneNumberInputValidation } from './_phone_number_input_val
6
6
  export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
7
7
  export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
8
8
  export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
9
+ export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'
@@ -0,0 +1,46 @@
1
+ <%= pb_rails("flex", props: {
2
+ dark: true,
3
+ orientation: "row",
4
+ vertical: "center",
5
+ margin_bottom: "md"
6
+ }) do %>
7
+ <%= pb_rails("body", props: { text: "Click info for more details" }) %>
8
+ &nbsp;
9
+ <%= pb_rails("circle_icon_button", props: {
10
+ variant: "secondary",
11
+ icon: "info",
12
+ id: "append-to-popover-1"
13
+ }) %>
14
+ <%= pb_rails("popover", props: {
15
+ trigger_element_id: "append-to-popover-1",
16
+ tooltip_id: "append-to-tooltip-1",
17
+ offset: true,
18
+ position: "top",
19
+ append_to: "parent",
20
+ }) do %>
21
+ I'm a popover. I have been appended to my parent element.
22
+ <% end %>
23
+ <% end %>
24
+
25
+ <%= pb_rails("flex", props: {
26
+ dark: true,
27
+ orientation: "row",
28
+ vertical: "center"
29
+ }) do %>
30
+ <%= pb_rails("body", props: { text: "Click info for more details" }) %>
31
+ &nbsp;
32
+ <%= pb_rails("circle_icon_button", props: {
33
+ variant: "secondary",
34
+ icon: "info",
35
+ id: "append-to-popover-2"
36
+ }) %>
37
+ <%= pb_rails("popover", props: {
38
+ trigger_element_id: "append-to-popover-2",
39
+ tooltip_id: "append-to-tooltip-2",
40
+ offset: true,
41
+ position: "top",
42
+ append_to: ".kit-show-wrapper",
43
+ }) do %>
44
+ I'm a popover. I have been appended to the .kit-show-wrapper.
45
+ <% end %>
46
+ <% end %>
@@ -0,0 +1 @@
1
+ By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `append_to` prop. 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.
@@ -6,6 +6,7 @@ examples:
6
6
  - popover_z_index: Set Z-Index
7
7
  - popover_scroll_height: Scroll and Height Settings
8
8
  - popover_actionable_content: With Actionable Content
9
+ - popover_append_to: Append To
9
10
 
10
11
  react:
11
12
  - popover_default: Default
@@ -1,5 +1,5 @@
1
1
  <%= pb_rails("select", props: {
2
- error: "Please make a valid selection",
2
+ error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
3
3
  label: "Favorite Food",
4
4
  name: "food",
5
5
  options: [
@@ -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
  >
@@ -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
 
@@ -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'