playbook_ui 14.6.0.pre.alpha.play1586datearea4218 → 14.6.0.pre.rc.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +7 -25
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/index.js +0 -60
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +9 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +9 -1
- data/app/pb_kits/playbook/pb_card/_card.tsx +1 -5
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +1 -5
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +7 -30
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md +2 -0
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +3 -84
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +5 -28
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +0 -3
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +1 -10
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx +0 -2
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +0 -2
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx +1 -4
- data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +2 -4
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_filter/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
- data/app/pb_kits/playbook/pb_filter/filter.rb +0 -2
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -3
- data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +2 -8
- data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +6 -3
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +2 -7
- data/app/pb_kits/playbook/pb_form/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_form/form.rb +0 -2
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +1 -9
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +227 -211
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +65 -169
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +9 -15
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +6 -28
- data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +1 -31
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +18 -86
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +6 -15
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss +931 -849
- data/app/pb_kits/playbook/pb_phone_number_input/types.d.ts +1 -4
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +2 -6
- data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_popover/popover.rb +1 -3
- data/app/pb_kits/playbook/pb_timeline/_item.tsx +23 -59
- data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +0 -8
- data/app/pb_kits/playbook/pb_timeline/docs/example.yml +1 -2
- data/app/pb_kits/playbook/pb_timeline/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_timeline/item.html.erb +21 -17
- data/app/pb_kits/playbook/pb_timeline/item.rb +0 -4
- data/app/pb_kits/playbook/pb_timeline/timeline.test.js +0 -84
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -4
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +1 -3
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -3
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +0 -3
- data/app/pb_kits/playbook/utilities/globalProps.ts +2 -39
- data/dist/chunks/_typeahead-BYw0HEgO.js +22 -0
- data/dist/chunks/_weekday_stacked-DumiyWjh.js +45 -0
- data/dist/chunks/{lib-D-mTv-kp.js → lib-CEpcaI8y.js} +1 -1
- data/dist/chunks/{pb_form_validation-BkWGwJsl.js → pb_form_validation-D9zkwt2b.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/kit_base.rb +1 -21
- data/lib/playbook/pb_doc_helper.rb +5 -5
- data/lib/playbook/pb_forms_helper.rb +1 -3
- data/lib/playbook/version.rb +2 -2
- metadata +6 -48
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +0 -72
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md +0 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +0 -45
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +0 -9
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +0 -33
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +0 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +0 -34
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +0 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb +0 -41
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx +0 -71
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md +0 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md +0 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +0 -39
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md +0 -1
- data/app/pb_kits/playbook/pb_form/formHelper.js +0 -27
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +0 -19
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +0 -27
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx +0 -5
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +0 -93
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +0 -105
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +0 -106
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +0 -149
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +0 -336
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +0 -97
- data/app/pb_kits/playbook/pb_timeline/date_area.html.erb +0 -12
- data/app/pb_kits/playbook/pb_timeline/date_area.rb +0 -13
- data/app/pb_kits/playbook/pb_timeline/detail_area.html.erb +0 -3
- data/app/pb_kits/playbook/pb_timeline/detail_area.rb +0 -11
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +0 -43
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +0 -68
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md +0 -4
- data/app/pb_kits/playbook/pb_timeline/node_area.html.erb +0 -14
- data/app/pb_kits/playbook/pb_timeline/node_area.rb +0 -16
- data/app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx +0 -29
- data/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx +0 -38
- data/app/pb_kits/playbook/pb_timeline/subcomponents/Step.tsx +0 -42
- data/app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx +0 -3
- data/dist/chunks/_typeahead-BhHnXJjy.js +0 -22
- data/dist/chunks/_weekday_stacked-C-VEa5Ar.js +0 -45
data/lib/playbook/kit_base.rb
CHANGED
@@ -73,10 +73,6 @@ module Playbook
|
|
73
73
|
prop :aria, type: Playbook::Props::HashProp, default: {}
|
74
74
|
prop :html_options, type: Playbook::Props::HashProp, default: {}
|
75
75
|
prop :children, type: Playbook::Props::Proc
|
76
|
-
prop :style, type: Playbook::Props::HashProp, default: {}
|
77
|
-
prop :height
|
78
|
-
prop :min_height
|
79
|
-
prop :max_height
|
80
76
|
|
81
77
|
def object
|
82
78
|
self
|
@@ -86,14 +82,6 @@ module Playbook
|
|
86
82
|
default_html_options.merge(html_options.deep_merge(data_attributes))
|
87
83
|
end
|
88
84
|
|
89
|
-
def global_inline_props
|
90
|
-
{
|
91
|
-
height: height,
|
92
|
-
min_height: min_height,
|
93
|
-
max_height: max_height,
|
94
|
-
}.compact
|
95
|
-
end
|
96
|
-
|
97
85
|
# rubocop:disable Layout/CommentIndentation
|
98
86
|
# pb_content_tag information (potentially to be abstracted into its own dev doc in the future)
|
99
87
|
# The pb_content_tag generates HTML content tags for rails kits with flexible options.
|
@@ -125,15 +113,12 @@ module Playbook
|
|
125
113
|
private
|
126
114
|
|
127
115
|
def default_options
|
128
|
-
|
116
|
+
{
|
129
117
|
id: id,
|
130
118
|
data: data,
|
131
119
|
class: classname,
|
132
120
|
aria: aria,
|
133
121
|
}
|
134
|
-
inline_styles = dynamic_inline_props
|
135
|
-
options[:style] = inline_styles if inline_styles.present?
|
136
|
-
options
|
137
122
|
end
|
138
123
|
|
139
124
|
def default_html_options
|
@@ -146,10 +131,5 @@ module Playbook
|
|
146
131
|
aria: aria,
|
147
132
|
}.transform_keys { |key| key.to_s.tr("_", "-").to_sym }
|
148
133
|
end
|
149
|
-
|
150
|
-
def dynamic_inline_props
|
151
|
-
styles = global_inline_props.map { |key, value| "#{key.to_s.gsub('_', '-')}: #{value};" if value.present? }.compact
|
152
|
-
styles.join(" ").presence
|
153
|
-
end
|
154
134
|
end
|
155
135
|
end
|
@@ -45,7 +45,7 @@ module Playbook
|
|
45
45
|
|
46
46
|
# rubocop:disable Naming/AccessorMethodName
|
47
47
|
def get_kits
|
48
|
-
menu =
|
48
|
+
menu = YAML.load_file(Playbook::Engine.root.join("dist/menu.yml"))
|
49
49
|
all_kits = []
|
50
50
|
menu["kits"].each do |kit|
|
51
51
|
kit_name = kit["name"]
|
@@ -61,7 +61,7 @@ module Playbook
|
|
61
61
|
end
|
62
62
|
|
63
63
|
def get_kits_pb_website
|
64
|
-
menu =
|
64
|
+
menu = YAML.load_file(Rails.root.join("config/menu.yml"))
|
65
65
|
menu["kits"]
|
66
66
|
end
|
67
67
|
# rubocop:enable Naming/AccessorMethodName
|
@@ -84,9 +84,9 @@ module Playbook
|
|
84
84
|
def pb_doc_kit_examples(kit, type)
|
85
85
|
example_file = pb_doc_kit_path(kit, "example.yml")
|
86
86
|
if File.exist?(example_file)
|
87
|
-
|
88
|
-
|
89
|
-
|
87
|
+
examples_list = YAML.load_file(example_file)
|
88
|
+
.inject({}) { |item, (k, v)| item[k.to_sym] = v; item }
|
89
|
+
examples_list.dig(:examples, type) || []
|
90
90
|
else
|
91
91
|
[]
|
92
92
|
end
|
@@ -22,10 +22,9 @@ module Playbook
|
|
22
22
|
# @param data [Hash] hash of data attributes
|
23
23
|
# @param validate [Boolean] whether validation should be triggered or not
|
24
24
|
# @see [#form_with] for other options
|
25
|
-
def pb_form_with(data: {}, validate: false,
|
25
|
+
def pb_form_with(data: {}, validate: false, **kwargs, &block)
|
26
26
|
data = data.merge("pb-form-validation" => validate)
|
27
27
|
classname = ["pb-form", kwargs[:class]].join(" ")
|
28
|
-
classname += " pb_form_loading" if loading
|
29
28
|
options = kwargs.merge(
|
30
29
|
class: classname,
|
31
30
|
data: data,
|
@@ -34,7 +33,6 @@ module Playbook
|
|
34
33
|
|
35
34
|
content_for(:pb_js, javascript_tag(<<~JS))
|
36
35
|
window.addEventListener("DOMContentLoaded", function() { PbFormValidation.start() })
|
37
|
-
window.addEventListener("DOMContentLoaded", () => formHelper())
|
38
36
|
JS
|
39
37
|
|
40
38
|
form_with(**options, &block)
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 14.6.0.pre.
|
4
|
+
version: 14.6.0.pre.rc.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2024-10-
|
12
|
+
date: 2024-10-01 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -268,8 +268,6 @@ files:
|
|
268
268
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md
|
269
269
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx
|
270
270
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md
|
271
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx
|
272
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md
|
273
271
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
|
274
272
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
|
275
273
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
|
@@ -1128,8 +1126,6 @@ files:
|
|
1128
1126
|
- app/pb_kits/playbook/pb_dropdown/context/index.tsx
|
1129
1127
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb
|
1130
1128
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
|
1131
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
|
1132
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
|
1133
1129
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
|
1134
1130
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
|
1135
1131
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
|
@@ -1137,15 +1133,10 @@ files:
|
|
1137
1133
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx
|
1138
1134
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb
|
1139
1135
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx
|
1140
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb
|
1141
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx
|
1142
1136
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx
|
1143
1137
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md
|
1144
1138
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.html.erb
|
1145
1139
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md
|
1146
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb
|
1147
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx
|
1148
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md
|
1149
1140
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
|
1150
1141
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md
|
1151
1142
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx
|
@@ -1242,10 +1233,6 @@ files:
|
|
1242
1233
|
- app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb
|
1243
1234
|
- app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx
|
1244
1235
|
- app/pb_kits/playbook/pb_filter/docs/_filter_placement.md
|
1245
|
-
- app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb
|
1246
|
-
- app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx
|
1247
|
-
- app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md
|
1248
|
-
- app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md
|
1249
1236
|
- app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb
|
1250
1237
|
- app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx
|
1251
1238
|
- app/pb_kits/playbook/pb_filter/docs/_sort_only.html.erb
|
@@ -1333,13 +1320,10 @@ files:
|
|
1333
1320
|
- app/pb_kits/playbook/pb_form/docs/_description.md
|
1334
1321
|
- app/pb_kits/playbook/pb_form/docs/_footer.md
|
1335
1322
|
- app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb
|
1336
|
-
- app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb
|
1337
|
-
- app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md
|
1338
1323
|
- app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb
|
1339
1324
|
- app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.md
|
1340
1325
|
- app/pb_kits/playbook/pb_form/docs/example.yml
|
1341
1326
|
- app/pb_kits/playbook/pb_form/form.rb
|
1342
|
-
- app/pb_kits/playbook/pb_form/formHelper.js
|
1343
1327
|
- app/pb_kits/playbook/pb_form/pb_form_validation.js
|
1344
1328
|
- app/pb_kits/playbook/pb_form_group/_form_group.scss
|
1345
1329
|
- app/pb_kits/playbook/pb_form_group/_form_group.tsx
|
@@ -1380,9 +1364,6 @@ files:
|
|
1380
1364
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx
|
1381
1365
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb
|
1382
1366
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx
|
1383
|
-
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb
|
1384
|
-
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx
|
1385
|
-
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md
|
1386
1367
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb
|
1387
1368
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx
|
1388
1369
|
- app/pb_kits/playbook/pb_form_pill/docs/example.yml
|
@@ -1812,7 +1793,6 @@ files:
|
|
1812
1793
|
- app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx
|
1813
1794
|
- app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss
|
1814
1795
|
- app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
|
1815
|
-
- app/pb_kits/playbook/pb_multi_level_select/context/index.tsx
|
1816
1796
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb
|
1817
1797
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx
|
1818
1798
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_rails.md
|
@@ -1820,8 +1800,6 @@ files:
|
|
1820
1800
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb
|
1821
1801
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
|
1822
1802
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md
|
1823
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
|
1824
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md
|
1825
1803
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb
|
1826
1804
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx
|
1827
1805
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.md
|
@@ -1835,17 +1813,12 @@ files:
|
|
1835
1813
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb
|
1836
1814
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx
|
1837
1815
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.md
|
1838
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx
|
1839
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md
|
1840
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx
|
1841
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md
|
1842
1816
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb
|
1843
1817
|
- app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
|
1844
1818
|
- app/pb_kits/playbook/pb_multi_level_select/docs/index.js
|
1845
1819
|
- app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb
|
1846
1820
|
- app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb
|
1847
1821
|
- app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx
|
1848
|
-
- app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx
|
1849
1822
|
- app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
|
1850
1823
|
- app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx
|
1851
1824
|
- app/pb_kits/playbook/pb_multiple_users/docs/_description.md
|
@@ -1875,8 +1848,6 @@ files:
|
|
1875
1848
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.jsx
|
1876
1849
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md
|
1877
1850
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md
|
1878
|
-
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb
|
1879
|
-
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx
|
1880
1851
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md
|
1881
1852
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md
|
1882
1853
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml
|
@@ -2718,18 +2689,11 @@ files:
|
|
2718
2689
|
- app/pb_kits/playbook/pb_timeline/_item.tsx
|
2719
2690
|
- app/pb_kits/playbook/pb_timeline/_timeline.scss
|
2720
2691
|
- app/pb_kits/playbook/pb_timeline/_timeline.tsx
|
2721
|
-
- app/pb_kits/playbook/pb_timeline/date_area.html.erb
|
2722
|
-
- app/pb_kits/playbook/pb_timeline/date_area.rb
|
2723
|
-
- app/pb_kits/playbook/pb_timeline/detail_area.html.erb
|
2724
|
-
- app/pb_kits/playbook/pb_timeline/detail_area.rb
|
2725
2692
|
- app/pb_kits/playbook/pb_timeline/docs/_description.md
|
2726
2693
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_default.html.erb
|
2727
2694
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx
|
2728
2695
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.html.erb
|
2729
2696
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx
|
2730
|
-
- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb
|
2731
|
-
- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx
|
2732
|
-
- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md
|
2733
2697
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb
|
2734
2698
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx
|
2735
2699
|
- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md
|
@@ -2737,12 +2701,6 @@ files:
|
|
2737
2701
|
- app/pb_kits/playbook/pb_timeline/docs/index.js
|
2738
2702
|
- app/pb_kits/playbook/pb_timeline/item.html.erb
|
2739
2703
|
- app/pb_kits/playbook/pb_timeline/item.rb
|
2740
|
-
- app/pb_kits/playbook/pb_timeline/node_area.html.erb
|
2741
|
-
- app/pb_kits/playbook/pb_timeline/node_area.rb
|
2742
|
-
- app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx
|
2743
|
-
- app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx
|
2744
|
-
- app/pb_kits/playbook/pb_timeline/subcomponents/Step.tsx
|
2745
|
-
- app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx
|
2746
2704
|
- app/pb_kits/playbook/pb_timeline/timeline.html.erb
|
2747
2705
|
- app/pb_kits/playbook/pb_timeline/timeline.rb
|
2748
2706
|
- app/pb_kits/playbook/pb_timeline/timeline.test.js
|
@@ -3112,11 +3070,11 @@ files:
|
|
3112
3070
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
3113
3071
|
- app/pb_kits/playbook/utilities/text.ts
|
3114
3072
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
3115
|
-
- dist/chunks/_typeahead-
|
3116
|
-
- dist/chunks/_weekday_stacked-
|
3073
|
+
- dist/chunks/_typeahead-BYw0HEgO.js
|
3074
|
+
- dist/chunks/_weekday_stacked-DumiyWjh.js
|
3117
3075
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3118
|
-
- dist/chunks/lib-
|
3119
|
-
- dist/chunks/pb_form_validation-
|
3076
|
+
- dist/chunks/lib-CEpcaI8y.js
|
3077
|
+
- dist/chunks/pb_form_validation-D9zkwt2b.js
|
3120
3078
|
- dist/chunks/vendor.js
|
3121
3079
|
- dist/menu.yml
|
3122
3080
|
- dist/playbook-doc.js
|
@@ -1,72 +0,0 @@
|
|
1
|
-
import React from "react"
|
2
|
-
import { AdvancedTable, Pill, Body, Flex, Detail, Caption } from "playbook-ui"
|
3
|
-
import MOCK_DATA from "./advanced_table_mock_data.json"
|
4
|
-
|
5
|
-
const AdvancedTableCustomCell = (props) => {
|
6
|
-
const columnDefinitions = [
|
7
|
-
{
|
8
|
-
accessor: "year",
|
9
|
-
label: "Year",
|
10
|
-
cellAccessors: ["quarter", "month", "day"],
|
11
|
-
|
12
|
-
},
|
13
|
-
{
|
14
|
-
accessor: "newEnrollments",
|
15
|
-
label: "New Enrollments",
|
16
|
-
customRenderer: (row, value) => (
|
17
|
-
<Pill text={value}
|
18
|
-
variant="success"
|
19
|
-
/>
|
20
|
-
),
|
21
|
-
},
|
22
|
-
{
|
23
|
-
accessor: "scheduledMeetings",
|
24
|
-
label: "Scheduled Meetings",
|
25
|
-
customRenderer: (row, value) => <Body><a href="#">{value}</a></Body>,
|
26
|
-
},
|
27
|
-
{
|
28
|
-
accessor: "attendanceRate",
|
29
|
-
label: "Attendance Rate",
|
30
|
-
customRenderer: (row, value) => (
|
31
|
-
<Flex alignItems="end"
|
32
|
-
orientation="column"
|
33
|
-
>
|
34
|
-
<Detail bold
|
35
|
-
color="default"
|
36
|
-
text={value}
|
37
|
-
/>
|
38
|
-
<Caption size="xs">{row.original.graduatedStudents}</Caption>
|
39
|
-
</Flex>
|
40
|
-
),
|
41
|
-
},
|
42
|
-
{
|
43
|
-
accessor: "completedClasses",
|
44
|
-
label: "Completed Classes",
|
45
|
-
},
|
46
|
-
{
|
47
|
-
accessor: "classCompletionRate",
|
48
|
-
label: "Class Completion Rate",
|
49
|
-
},
|
50
|
-
{
|
51
|
-
accessor: "graduatedStudents",
|
52
|
-
label: "Graduated Students",
|
53
|
-
},
|
54
|
-
]
|
55
|
-
|
56
|
-
return (
|
57
|
-
<div>
|
58
|
-
<AdvancedTable
|
59
|
-
columnDefinitions={columnDefinitions}
|
60
|
-
enableToggleExpansion="all"
|
61
|
-
responsive="none"
|
62
|
-
tableData={MOCK_DATA}
|
63
|
-
{...props}
|
64
|
-
>
|
65
|
-
<AdvancedTable.Header enableSorting />
|
66
|
-
<AdvancedTable.Body />
|
67
|
-
</AdvancedTable>
|
68
|
-
</div>
|
69
|
-
)
|
70
|
-
}
|
71
|
-
|
72
|
-
export default AdvancedTableCustomCell
|
@@ -1,5 +0,0 @@
|
|
1
|
-
The Advanced Table also allows for rendering custom components within individual Cells. To achieve this, you can make use of the optional `customRenderer` item within each columnDefinition. This function gives you access to the current Cell's value if you just want to use that with a custom Kit, but it also gives you access to the entire `row` object. The row object provides all data for the current row. To access the data, use `row.original` which is the entire data object for the current row. See the code snippet below for 3 separate use cases and how they were acheived.
|
2
|
-
|
3
|
-
See [here](https://playbook.powerapp.cloud/kits/advanced_table/react#columnDefinitions) for more indepth information on columnDefinitions are how to use them.
|
4
|
-
|
5
|
-
See [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme) for the structure of the tableData used.
|
@@ -1,45 +0,0 @@
|
|
1
|
-
import React, { useRef } from 'react'
|
2
|
-
import { Button, Dropdown } from 'playbook-ui'
|
3
|
-
|
4
|
-
const options = [
|
5
|
-
{
|
6
|
-
label: "United States",
|
7
|
-
value: "United States",
|
8
|
-
},
|
9
|
-
{
|
10
|
-
label: "Canada",
|
11
|
-
value: "Canada",
|
12
|
-
},
|
13
|
-
{
|
14
|
-
label: "Pakistan",
|
15
|
-
value: "Pakistan",
|
16
|
-
}
|
17
|
-
]
|
18
|
-
|
19
|
-
const DropdownClearSelection = (props) => {
|
20
|
-
const dropdownRef = useRef(null)
|
21
|
-
|
22
|
-
const handleReset = () => {
|
23
|
-
if (dropdownRef.current) {
|
24
|
-
dropdownRef.current.clearSelected()
|
25
|
-
}
|
26
|
-
}
|
27
|
-
|
28
|
-
return (
|
29
|
-
<>
|
30
|
-
<Dropdown
|
31
|
-
defaultValue={options[2]}
|
32
|
-
options={options}
|
33
|
-
ref={dropdownRef}
|
34
|
-
{...props}
|
35
|
-
/>
|
36
|
-
<Button
|
37
|
-
marginTop="md"
|
38
|
-
onClick={handleReset}
|
39
|
-
text="Reset"
|
40
|
-
/>
|
41
|
-
</>
|
42
|
-
)
|
43
|
-
}
|
44
|
-
|
45
|
-
export default DropdownClearSelection
|
@@ -1 +0,0 @@
|
|
1
|
-
To use an external control (like a reset button) to clear Dropdown selection, you can make use of the `useRef` hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.
|
@@ -1,9 +0,0 @@
|
|
1
|
-
<%
|
2
|
-
options = [
|
3
|
-
{ label: 'United States', value: 'United States', id: 'us' },
|
4
|
-
{ label: 'Canada', value: 'Canada', id: 'ca' },
|
5
|
-
{ label: 'Pakistan', value: 'Pakistan', id: 'pk' },
|
6
|
-
]
|
7
|
-
|
8
|
-
%>
|
9
|
-
<%= pb_rails("dropdown", props: {options: options, separators: false}) %>
|
@@ -1,33 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Dropdown } from 'playbook-ui'
|
3
|
-
|
4
|
-
const DropdownSeparatorsHidden = (props) => {
|
5
|
-
|
6
|
-
const options = [
|
7
|
-
{
|
8
|
-
label: "United States",
|
9
|
-
value: "United States",
|
10
|
-
},
|
11
|
-
{
|
12
|
-
label: "Canada",
|
13
|
-
value: "Canada",
|
14
|
-
},
|
15
|
-
{
|
16
|
-
label: "Pakistan",
|
17
|
-
value: "Pakistan",
|
18
|
-
}
|
19
|
-
];
|
20
|
-
|
21
|
-
|
22
|
-
return (
|
23
|
-
<div>
|
24
|
-
<Dropdown
|
25
|
-
options={options}
|
26
|
-
separators={false}
|
27
|
-
{...props}
|
28
|
-
/>
|
29
|
-
</div>
|
30
|
-
)
|
31
|
-
}
|
32
|
-
|
33
|
-
export default DropdownSeparatorsHidden
|
@@ -1,10 +0,0 @@
|
|
1
|
-
<%
|
2
|
-
options = [
|
3
|
-
{ label: 'United States', value: 'United States', id: 'us' },
|
4
|
-
{ label: 'Canada', value: 'Canada', id: 'ca' },
|
5
|
-
{ label: 'Pakistan', value: 'Pakistan', id: 'pk' },
|
6
|
-
]
|
7
|
-
|
8
|
-
%>
|
9
|
-
|
10
|
-
<%= pb_rails("dropdown", props: { options: options, variant: "subtle", separators: false }) %>
|
@@ -1,34 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Dropdown } from 'playbook-ui'
|
3
|
-
|
4
|
-
const DropdownSubtleVariant = (props) => {
|
5
|
-
|
6
|
-
const options = [
|
7
|
-
{
|
8
|
-
label: "United States",
|
9
|
-
value: "United States",
|
10
|
-
},
|
11
|
-
{
|
12
|
-
label: "Canada",
|
13
|
-
value: "Canada",
|
14
|
-
},
|
15
|
-
{
|
16
|
-
label: "Pakistan",
|
17
|
-
value: "Pakistan",
|
18
|
-
}
|
19
|
-
];
|
20
|
-
|
21
|
-
|
22
|
-
return (
|
23
|
-
<>
|
24
|
-
<Dropdown
|
25
|
-
options={options}
|
26
|
-
separators={false}
|
27
|
-
variant="subtle"
|
28
|
-
{...props}
|
29
|
-
/>
|
30
|
-
</>
|
31
|
-
)
|
32
|
-
}
|
33
|
-
|
34
|
-
export default DropdownSubtleVariant
|
@@ -1 +0,0 @@
|
|
1
|
-
For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a more cleaner look.
|
@@ -1,41 +0,0 @@
|
|
1
|
-
<%=
|
2
|
-
pb_rails("filter", props: {
|
3
|
-
id: "filter_popover_props",
|
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: { width: "250px" },
|
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 %>
|
@@ -1,71 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
|
3
|
-
|
4
|
-
const FilterPopoverProps = (props) => {
|
5
|
-
const options = [
|
6
|
-
{ value: 'USA' },
|
7
|
-
{ value: 'Canada' },
|
8
|
-
{ value: 'Brazil' },
|
9
|
-
{ value: 'Philippines' },
|
10
|
-
{ value: '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...' },
|
11
|
-
]
|
12
|
-
|
13
|
-
const popoverProps = {
|
14
|
-
width: "250px"
|
15
|
-
}
|
16
|
-
|
17
|
-
return (
|
18
|
-
<Filter
|
19
|
-
{...props}
|
20
|
-
double
|
21
|
-
filters={{
|
22
|
-
'Full Name': 'John Wick',
|
23
|
-
'City': 'San Francisco',
|
24
|
-
}}
|
25
|
-
popoverProps={popoverProps}
|
26
|
-
results={1}
|
27
|
-
sortOptions={{
|
28
|
-
popularity: 'Popularity',
|
29
|
-
// eslint-disable-next-line
|
30
|
-
manager_title: 'Manager\'s Title',
|
31
|
-
// eslint-disable-next-line
|
32
|
-
manager_name: 'Manager\'s Name',
|
33
|
-
}}
|
34
|
-
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
35
|
-
>
|
36
|
-
{({ closePopover }) => (
|
37
|
-
<form>
|
38
|
-
<TextInput
|
39
|
-
label="Example Text Field"
|
40
|
-
placeholder="Enter Text"
|
41
|
-
{...props}
|
42
|
-
/>
|
43
|
-
<Select
|
44
|
-
blankSelection="Select One..."
|
45
|
-
label="Example Collection Select"
|
46
|
-
name="Collection Select"
|
47
|
-
options={options}
|
48
|
-
{...props}
|
49
|
-
/>
|
50
|
-
<Flex
|
51
|
-
spacing="between"
|
52
|
-
{...props}
|
53
|
-
>
|
54
|
-
<Button
|
55
|
-
onClick={closePopover}
|
56
|
-
text="Apply"
|
57
|
-
{...props}
|
58
|
-
/>
|
59
|
-
<Button
|
60
|
-
text="Clear"
|
61
|
-
variant="secondary"
|
62
|
-
{...props}
|
63
|
-
/>
|
64
|
-
</Flex>
|
65
|
-
</form>
|
66
|
-
)}
|
67
|
-
</Filter>
|
68
|
-
)
|
69
|
-
}
|
70
|
-
|
71
|
-
export default FilterPopoverProps
|
@@ -1 +0,0 @@
|
|
1
|
-
This kit uses the [Popover kit](https://playbook.powerapp.cloud/kits/popover) under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional `popover_props` prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see [here](https://playbook.powerapp.cloud/kits/popover).
|
@@ -1 +0,0 @@
|
|
1
|
-
This kit uses the [Popover kit](https://playbook.powerapp.cloud/kits/popover/react) under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional `popoverProps` prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see [here](https://playbook.powerapp.cloud/kits/popover/react).
|