playbook_ui 16.0.0.pre.alpha.play267313765 → 16.0.0.pre.alpha.tempotextareasentry13639

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 (54) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +2 -2
  3. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +0 -4
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +2 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -1
  6. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +1 -51
  7. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +0 -34
  9. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
  10. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +0 -19
  11. data/app/pb_kits/playbook/pb_background/docs/example.yml +0 -1
  12. data/app/pb_kits/playbook/pb_background/docs/index.js +0 -1
  13. data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +1 -3
  14. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +33 -35
  15. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -1
  16. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +6 -33
  17. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +0 -3
  18. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +0 -2
  19. data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb +0 -5
  20. data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js +18 -33
  21. data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +11 -29
  22. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.md +1 -1
  23. data/app/pb_kits/playbook/pb_textarea/docs/example.yml +1 -4
  24. data/app/pb_kits/playbook/pb_textarea/docs/index.js +0 -1
  25. data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +10 -10
  26. data/app/pb_kits/playbook/pb_textarea/textarea.rb +0 -30
  27. data/app/pb_kits/playbook/pb_textarea/textarea.test.js +1 -18
  28. data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +1 -24
  29. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -2
  30. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +1 -4
  31. data/dist/chunks/{_typeahead-DlvhrqqP.js → _typeahead-BPqqGqv_.js} +1 -1
  32. data/dist/chunks/vendor.js +2 -2
  33. data/dist/playbook-rails-react-bindings.js +1 -1
  34. data/dist/playbook-rails.js +1 -1
  35. data/lib/playbook/version.rb +1 -1
  36. metadata +3 -21
  37. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.html.erb +0 -64
  38. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.md +0 -18
  39. data/app/pb_kits/playbook/pb_background/docs/_background_responsive.jsx +0 -30
  40. data/app/pb_kits/playbook/pb_background/docs/_background_responsive.md +0 -1
  41. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.html.erb +0 -74
  42. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.jsx +0 -87
  43. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md +0 -3
  44. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx +0 -35
  45. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.md +0 -3
  46. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb +0 -10
  47. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx +0 -21
  48. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md +0 -3
  49. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb +0 -39
  50. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md +0 -3
  51. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb +0 -5
  52. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.jsx +0 -25
  53. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.md +0 -3
  54. data/app/pb_kits/playbook/utilities/test/globalProps/globalProps.integration.test.js +0 -936
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ac10d2ec1ccce77a839f88b0a14f4328c5f382e44f1f722e4e789f0cdc3a51c9
4
- data.tar.gz: a23d74c5d2ad1c2d34953893a56b29e21f631cd9e862200b56241cee51e68c71
3
+ metadata.gz: da5469a3149a33e109e887283501bcb0470422e970cf1960d0f2b71e32a5f351
4
+ data.tar.gz: ccee25c3f7ee00d748a5d4f95222989dd04726379705380337f09ea0c85bc62c
5
5
  SHA512:
6
- metadata.gz: fb2fd3f590838627a23827456229e0fb206cb673e7eddc07c4f27fb94bd5a071735aeeacab49749f3e9d30563b419357829bf41e3ce4287811bffaa0efd5588e
7
- data.tar.gz: 2fa1d34d4e0c34afc990271677363268025f48851db9bb0967bbd19d99719ae5a9818c4ce716bf37236f14ae50f02b151dd0d43a2553785d825ee83a176fc15f
6
+ metadata.gz: 772b0891d17001f8cd2e5f18c70f3dae1c89f67d63233452bb5b773d973f1a51c9680585ab4de122d9d6cb81782e22964a99a90510984fa849b87a8267de2725
7
+ data.tar.gz: c70d0c3ae0b96251eb359c5abb623477b5f3cf91ce9aabc91bcb76cfbe521e84b65351fbe4216996df33145a0b45ed8e0bdac3fa28876a03b1abc61ee7ad2d76
@@ -11,8 +11,8 @@
11
11
  <% if content.present? %>
12
12
  <% content.presence %>
13
13
  <% else %>
14
- <%= pb_rails("advanced_table/table_header", props: { table_id: object.id, column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar, inline_row_loading: object.inline_row_loading, persist_toggle_expansion_button: object.persist_toggle_expansion_button, table_data: object.table_data }) %>
15
- <%= pb_rails("advanced_table/table_body", props: { table_id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling, inline_row_loading: object.inline_row_loading }) %>
14
+ <%= pb_rails("advanced_table/table_header", props: { table_id: object.id, column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
15
+ <%= pb_rails("advanced_table/table_body", props: { table_id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling }) %>
16
16
  <% end %>
17
17
  <% end %>
18
18
  <% end %>
@@ -33,10 +33,6 @@ module Playbook
33
33
  default: false
34
34
  prop :row_styling, type: Playbook::Props::Array,
35
35
  default: []
36
- prop :inline_row_loading, type: Playbook::Props::Boolean,
37
- default: false
38
- prop :persist_toggle_expansion_button, type: Playbook::Props::Boolean,
39
- default: false
40
36
 
41
37
  def classname
42
38
  additional_classes = [
@@ -6,9 +6,9 @@ In the first Advanced Table in this code example, 2021 has an empty children arr
6
6
  This prop is set to `false` by default.
7
7
 
8
8
 
9
- ### persistToggleExpansionButton
9
+ ### persistToggleExpansion
10
10
  The `persistToggleExpansionButton` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty `children` arrays and advanced querying logic explained in the preceeding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
11
11
 
12
12
  In the second and third Advanced Tables in this code example, all 3 rows have empty children arrays. The second Advanced Table demonstrates that the toggle all button does not render (prior to an initial row expansion) without `persistToggleExpansionButton` in place. The third Advanced Table shows the toggle all button due to `persistToggleExpansionButton`.
13
13
 
14
- This prop is set to `false` by default and should only be used in conjunction with `inlineRowLoading`.
14
+ This prop is set to false by default and should only be used in conjunction with `inlineRowLoading`.
@@ -29,7 +29,6 @@ examples:
29
29
  - advanced_table_background_control_rails: Column Styling Background Color
30
30
  - advanced_table_background_colors_rails: Column Styling Individual Cell Background Color
31
31
  - advanced_table_column_border_color_rails: Column Group Border Color
32
- - advanced_table_inline_row_loading_rails: Inline Row Loading
33
32
 
34
33
 
35
34
  react:
@@ -25,8 +25,6 @@ module Playbook
25
25
  default: false
26
26
  prop :row_styling, type: Playbook::Props::Array,
27
27
  default: []
28
- prop :inline_row_loading, type: Playbook::Props::Boolean,
29
- default: false
30
28
 
31
29
  def flatten_columns(columns)
32
30
  columns.flat_map do |col|
@@ -71,24 +69,7 @@ module Playbook
71
69
  end
72
70
 
73
71
  # Additional class and data attributes needed for toggle logic
74
- output << pb_rails("advanced_table/table_row", props: { table_id: table_id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id, inline_row_loading: inline_row_loading })
75
-
76
- # Render inline loading row when inline_row_loading is enabled and row has empty children
77
- if inline_row_loading
78
- children = row_children_for(row)
79
- if children.is_a?(::Array) && children.empty?
80
- max_depth = cell_accessors_length(column_definitions)
81
- if current_depth < max_depth
82
- loading_row_data_attributes = {
83
- advanced_table_content: "#{new_ancestor_ids.join('-')}-loading",
84
- row_depth: current_depth + 1,
85
- row_parent: "#{table_id}_#{row.object_id}",
86
- inline_loading_row: true,
87
- }
88
- output << render_inline_loading_row(leaf_columns.length, current_depth, loading_row_data_attributes)
89
- end
90
- end
91
- end
72
+ output << pb_rails("advanced_table/table_row", props: { table_id: table_id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id })
92
73
 
93
74
  if row[:children].present?
94
75
  row[:children].each do |child_row|
@@ -123,37 +104,6 @@ module Playbook
123
104
  ""
124
105
  end
125
106
 
126
- # 3 helper methods for inline row loading
127
- def render_inline_loading_row(column_count, depth, data_attributes)
128
- padding_left = depth.zero? ? "0.5em" : "#{(depth + 1) * 2}em"
129
-
130
- content_tag(:tr, class: "toggle-content inline-loading-row", data: data_attributes) do
131
- content_tag(:td, colspan: column_count, style: "padding-left: #{padding_left}") do
132
- pb_rails("loading_inline")
133
- end
134
- end
135
- end
136
-
137
- def row_children_for(row)
138
- if row.respond_to?(:children)
139
- row.children
140
- elsif row.respond_to?(:[])
141
- row[:children] || row["children"]
142
- end
143
- end
144
-
145
- def cell_accessors_length(col_defs)
146
- first_col = col_defs.first
147
- return 0 unless first_col
148
-
149
- accessors = if first_col.respond_to?(:cellAccessors)
150
- first_col.cellAccessors
151
- elsif first_col.respond_to?(:[])
152
- first_col[:cellAccessors] || first_col["cellAccessors"]
153
- end
154
- accessors&.length || 0
155
- end
156
-
157
107
  private
158
108
 
159
109
  def has_grouped_headers?
@@ -14,7 +14,7 @@
14
14
  <%= object.render_select_all_checkbox %>
15
15
  <% end %>
16
16
  <% end %>
17
- <% if object.show_toggle_all_button? %>
17
+ <% if object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all" %>
18
18
  <% if loading %>
19
19
  <div class="<%= object.loading ? 'loading-toggle-icon' : '' %>"></div>
20
20
  <% else %>
@@ -19,12 +19,6 @@ module Playbook
19
19
  default: false
20
20
  prop :show_actions_bar, type: Playbook::Props::Boolean,
21
21
  default: true
22
- prop :inline_row_loading, type: Playbook::Props::Boolean,
23
- default: false
24
- prop :persist_toggle_expansion_button, type: Playbook::Props::Boolean,
25
- default: false
26
- prop :table_data, type: Playbook::Props::Array,
27
- default: []
28
22
 
29
23
  def classname
30
24
  additional_classes = []
@@ -141,20 +135,6 @@ module Playbook
141
135
  original_def.dig(:column_styling, :header_font_color)
142
136
  end
143
137
 
144
- # Check if any row in the table has children
145
- def has_any_sub_rows?
146
- return false if table_data.blank?
147
-
148
- table_data.any? { |row| row_has_children?(row) }
149
- end
150
-
151
- # Determines if the toggle-all button should be shown in the header based on inline row loading and persist toggle expansion button props
152
- def show_toggle_all_button?
153
- return false unless enable_toggle_expansion == "header" || enable_toggle_expansion == "all"
154
-
155
- has_any_sub_rows? || (inline_row_loading && persist_toggle_expansion_button)
156
- end
157
-
158
138
  # Check if header has custom background color
159
139
  def has_custom_header_background_color?(cell)
160
140
  cell[:header_background_color].present?
@@ -337,20 +317,6 @@ module Playbook
337
317
  end
338
318
  nil
339
319
  end
340
-
341
- # 2 inline row loading helper methods
342
- def row_has_children?(row)
343
- children = row_children_for(row)
344
- children.present? && children.is_a?(::Array) && !children.empty?
345
- end
346
-
347
- def row_children_for(row)
348
- if row.respond_to?(:children)
349
- row.children
350
- elsif row.respond_to?(:[])
351
- row[:children] || row["children"]
352
- end
353
- end
354
320
  end
355
321
  end
356
322
  end
@@ -32,7 +32,7 @@
32
32
  <%= object.render_row_checkbox %>
33
33
  <% end %>
34
34
  <% end %>
35
- <% if object.show_expand_button? %>
35
+ <% if object.row[:children].present? %>
36
36
  <button
37
37
  id="<%= "#{object.table_id}_#{object.row.object_id}" %>"
38
38
  class="gray-icon expand-toggle-icon"
@@ -33,8 +33,6 @@ module Playbook
33
33
  default: false
34
34
  prop :immediate_parent_row_id, type: Playbook::Props::String,
35
35
  default: ""
36
- prop :inline_row_loading, type: Playbook::Props::Boolean,
37
- default: false
38
36
 
39
37
  def data
40
38
  Hash(prop(:data)).merge(table_data_attributes)
@@ -188,23 +186,6 @@ module Playbook
188
186
  end
189
187
  end
190
188
 
191
- # Determines if the row should show an expand button (true if row has children or inline_row_loading true and row has empty children array)
192
- def show_expand_button?
193
- children = row_children
194
- return true if children.present?
195
- return true if inline_row_loading && children.is_a?(::Array) && children.empty?
196
-
197
- false
198
- end
199
-
200
- def row_children
201
- if row.respond_to?(:children)
202
- row.children
203
- elsif row.respond_to?(:[])
204
- row[:children] || row["children"]
205
- end
206
- end
207
-
208
189
  private
209
190
 
210
191
  def custom_renderer_value(column, index)
@@ -20,4 +20,3 @@ examples:
20
20
  - background_category: Category
21
21
  - background_size: Size
22
22
  - background_overlay: Overlay
23
- - background_responsive: Responsive
@@ -7,4 +7,3 @@ export { default as BackgroundStatusSubtle } from './_background_status_subtle.j
7
7
  export { default as BackgroundCategory } from './_background_category.jsx'
8
8
  export { default as BackgroundSize } from './_background_size.jsx'
9
9
  export { default as BackgroundOverlay } from './_background_overlay.jsx'
10
- export { default as BackgroundResponsive } from './_background_responsive.jsx'
@@ -1,8 +1,6 @@
1
1
  <%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
2
2
  <%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
3
3
  <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
4
- <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
5
- <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
6
4
  <%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
7
5
  <%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
8
6
  <%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
@@ -13,4 +11,4 @@
13
11
  <%= action.submit %>
14
12
  <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
15
13
  <% end %>
16
- <% end %>
14
+ <% end %>
@@ -1,39 +1,37 @@
1
1
  examples:
2
2
  rails:
3
- - multi_level_select_default: Default
4
- - multi_level_select_single: Single Select
5
- - multi_level_select_single_children_only: Single Select w/ Hidden Radios
6
- - multi_level_select_return_all_selected: Return All Selected
7
- - multi_level_select_input_display: With Input Display None
8
- - multi_level_select_selected_ids: Selected Ids
9
- - multi_level_select_with_form: With Form
10
- - multi_level_select_color: With Pills (Custom Color)
11
- - multi_level_select_reset: Reset Selection
12
- - multi_level_select_label: With Label
13
- - multi_level_select_error: Error
14
- - multi_level_select_disabled: Disabled Input
15
- - multi_level_select_disabled_options_default: Disabled Options (Default)
16
- - multi_level_select_disabled_options: Disabled Options (Return All Selected)
17
- - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
18
- - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
19
- - multi_level_select_single_disabled: Disabled Options (Single Select)
3
+ - multi_level_select_default: Default
4
+ - multi_level_select_single: Single Select
5
+ - multi_level_select_single_children_only: Single Select w/ Hidden Radios
6
+ - multi_level_select_return_all_selected: Return All Selected
7
+ - multi_level_select_selected_ids: Selected Ids
8
+ - multi_level_select_with_form: With Form
9
+ - multi_level_select_color: With Pills (Custom Color)
10
+ - multi_level_select_reset: Reset Selection
11
+ - multi_level_select_label: With Label
12
+ - multi_level_select_error: Error
13
+ - multi_level_select_disabled: Disabled Input
14
+ - multi_level_select_disabled_options_default: Disabled Options (Default)
15
+ - multi_level_select_disabled_options: Disabled Options (Return All Selected)
16
+ - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
17
+ - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
18
+ - multi_level_select_single_disabled: Disabled Options (Single Select)
20
19
 
21
20
  react:
22
- - multi_level_select_default: Default
23
- - multi_level_select_react_hook: React Hook
24
- - multi_level_select_single: Single Select
25
- - multi_level_select_single_children_only: Single Select w/ Hidden Radios
26
- - multi_level_select_return_all_selected: Return All Selected
27
- - multi_level_select_input_display: With Input Display None
28
- - multi_level_select_selected_ids_react: Selected Ids
29
- - multi_level_select_color: With Pills (Custom Color)
30
- - multi_level_select_with_children: Checkboxes With Children
31
- - multi_level_select_with_children_with_radios: Single Select With Children
32
- - multi_level_select_label: With Label
33
- - multi_level_select_error: Error
34
- - multi_level_select_disabled: Disabled Input
35
- - multi_level_select_disabled_options_default: Disabled Options (Default)
36
- - multi_level_select_disabled_options: Disabled Options (Return All Selected)
37
- - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
38
- - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
39
- - multi_level_select_single_disabled: Disabled Options (Single Select)
21
+ - multi_level_select_default: Default
22
+ - multi_level_select_react_hook: React Hook
23
+ - multi_level_select_single: Single Select
24
+ - multi_level_select_single_children_only: Single Select w/ Hidden Radios
25
+ - multi_level_select_return_all_selected: Return All Selected
26
+ - multi_level_select_selected_ids_react: Selected Ids
27
+ - multi_level_select_color: With Pills (Custom Color)
28
+ - multi_level_select_with_children: Checkboxes With Children
29
+ - multi_level_select_with_children_with_radios: Single Select With Children
30
+ - multi_level_select_label: With Label
31
+ - multi_level_select_error: Error
32
+ - multi_level_select_disabled: Disabled Input
33
+ - multi_level_select_disabled_options_default: Disabled Options (Default)
34
+ - multi_level_select_disabled_options: Disabled Options (Return All Selected)
35
+ - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
36
+ - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
37
+ - multi_level_select_single_disabled: Disabled Options (Single Select)
@@ -4,7 +4,6 @@ export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_se
4
4
  export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
5
5
  export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
6
6
  export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
7
- export { default as MultiLevelSelectInputDisplay } from './_multi_level_select_input_display.jsx'
8
7
  export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
9
8
  export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
10
9
  export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.jsx'
@@ -4,8 +4,6 @@ import { TrixEditor } from 'react-trix'
4
4
 
5
5
  import inlineFocus from './inlineFocus'
6
6
  import useFocus from './useFocus'
7
- import Caption from '../pb_caption/_caption'
8
- import colors from '../tokens/exports/_colors.module.scss'
9
7
  import { globalProps, GlobalProps } from '../utilities/globalProps'
10
8
  import { buildAriaProps, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
11
9
 
@@ -42,14 +40,12 @@ type RichTextEditorProps = {
42
40
  inputOptions?: { [key: string]: string | number | boolean | (() => void) },
43
41
  id?: string,
44
42
  inline?: boolean,
45
- label?: string,
46
43
  extensions?: { [key: string]: string }[],
47
44
  name?: string,
48
45
  onChange: (html: string, text: string) => void,
49
46
  placeholder?: string,
50
47
  inputHeight?: "sm" | "md" | "lg",
51
48
  inputMinHeight?: "sm" | "md" | "lg",
52
- requiredIndicator?: boolean,
53
49
  simple?: boolean,
54
50
  sticky?: boolean,
55
51
  template: string,
@@ -68,7 +64,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
68
64
  data = {},
69
65
  focus = false,
70
66
  htmlOptions = {},
71
- id,
72
67
  inputOptions = {},
73
68
  inline = false,
74
69
  extensions,
@@ -81,9 +76,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
81
76
  sticky = false,
82
77
  template = '',
83
78
  value = '',
84
- maxWidth = "md",
85
- requiredIndicator = false,
86
- label,
79
+ maxWidth = "md"
87
80
  } = props
88
81
 
89
82
  const ariaProps = buildAriaProps(aria),
@@ -93,7 +86,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
93
86
  containerRef = useRef<HTMLDivElement>(null)
94
87
 
95
88
  const htmlProps = buildHtmlProps(htmlOptions)
96
-
89
+
97
90
  const handleOnEditorReady = (editorInstance: Editor) => {
98
91
  setEditor(editorInstance)
99
92
  setTimeout(() => {
@@ -101,7 +94,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
101
94
  if (oldId) {
102
95
  const hiddenInput = document.getElementById(oldId)
103
96
  if (hiddenInput) {
104
- const newId = (inputOptions.id as string) || oldId
97
+ const newId = (inputOptions.id as string) || oldId
105
98
  hiddenInput.id = newId
106
99
  editorInstance.element.setAttribute('input', newId)
107
100
 
@@ -126,7 +119,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
126
119
  // set button attributes
127
120
  inlineCodeButton.dataset.trixAttribute = 'inlineCode'
128
121
  blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
129
- }
122
+ }
130
123
 
131
124
  if (toolbarBottom) editor.element.after(toolbarElement)
132
125
 
@@ -154,7 +147,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
154
147
  if (!advancedEditor || !focus) return
155
148
 
156
149
  const handleFocus = () => setShowToolbarOnFocus(true)
157
-
150
+
158
151
  const handleClickOutside = (event: Event) => {
159
152
  if (isClickInContainer(event) || isClickInPopover(event)) return
160
153
  setShowToolbarOnFocus(false)
@@ -222,29 +215,9 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
222
215
  className={css}
223
216
  ref={focus ? containerRef : undefined}
224
217
  >
225
- {label && (
226
- <label htmlFor={id}>
227
- {
228
- requiredIndicator ? (
229
- <Caption className="pb_text_input_kit_label"
230
- marginBottom="xs"
231
- >
232
- {label} <span style={{ color: `${colors.error}` }}>*</span>
233
- </Caption>
234
- ) : (
235
- <Caption
236
- className="pb_text_input_kit_label"
237
- marginBottom="xs"
238
- text={label}
239
- />
240
- )
241
- }
242
-
243
- </label>
244
- )}
245
218
  {
246
219
  advancedEditor ? (
247
- <div
220
+ <div
248
221
  className={classnames(
249
222
  "pb_rich_text_editor_advanced_container",
250
223
  { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
@@ -9,7 +9,6 @@ examples:
9
9
  - rich_text_editor_templates: Templates
10
10
  # - rich_text_editor_toolbar_bottom: Toolbar Bottom
11
11
  - rich_text_editor_inline: Inline
12
- - rich_text_editor_required_indicator: Required Indicator
13
12
  - rich_text_editor_preview: Preview
14
13
 
15
14
  react:
@@ -32,7 +31,5 @@ examples:
32
31
  - rich_text_editor_advanced_inline: Advanced (Inline)
33
32
  - rich_text_editor_advanced_height: Advanced Height
34
33
  - rich_text_editor_advanced_min_height: Advanced Min Height
35
- - rich_text_editor_required_indicator: Required Indicator
36
- - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
37
34
  - rich_text_editor_preview: Preview
38
35
  - rich_text_editor_advanced_preview: Advanced Preview
@@ -19,5 +19,3 @@ export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_adv
19
19
  export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
20
20
  export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_advanced_height.jsx'
21
21
  export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
22
- export { default as RichTextEditorRequiredIndicator } from './_rich_text_editor_required_indicator.jsx'
23
- export { default as RichTextEditorAdvancedRequiredIndicator } from './_rich_text_editor_advanced_required_indicator.jsx'
@@ -21,9 +21,6 @@ module Playbook
21
21
  prop :template
22
22
  prop :placeholder
23
23
  prop :input_options
24
- prop :label
25
- prop :required_indicator, type: Playbook::Props::Boolean,
26
- default: false
27
24
 
28
25
  def classname
29
26
  generate_classname("pb_rich_text_editor_kit", simple_class, focus_class, sticky_class, separator: " ")
@@ -54,8 +51,6 @@ module Playbook
54
51
  template: template,
55
52
  placeholder: placeholder,
56
53
  inputOptions: input_options,
57
- label: label,
58
- requiredIndicator: required_indicator,
59
54
  }
60
55
  end
61
56
  end
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { render, screen, fireEvent, waitFor, within } from '../utilities/test-utils'
2
+ import { render, screen, fireEvent, waitFor } from '../utilities/test-utils'
3
3
  import { useEditor, EditorContent } from "@tiptap/react"
4
4
  import StarterKit from "@tiptap/starter-kit"
5
5
 
@@ -89,14 +89,14 @@ const TestAdvancedEditor = ({ toolbarOnFocus = false, ...props }) => {
89
89
  describe('Advanced TipTap Editor works as expected', () => {
90
90
  test('renders advanced editor with toolbar', () => {
91
91
  render(<TestAdvancedEditor />)
92
-
92
+
93
93
  const kit = screen.getByTestId(testId)
94
94
  expect(kit).toHaveClass(kitClass)
95
-
95
+
96
96
  // Check for advanced container
97
97
  const advancedContainer = kit.querySelector('.pb_rich_text_editor_advanced_container')
98
98
  expect(advancedContainer).toBeInTheDocument()
99
-
99
+
100
100
  // Check for toolbar
101
101
  const toolbar = kit.querySelector('.toolbar')
102
102
  expect(toolbar).toBeInTheDocument()
@@ -104,7 +104,7 @@ describe('Advanced TipTap Editor works as expected', () => {
104
104
 
105
105
  test('renders advanced editor without toolbar when advancedEditorToolbar is false', () => {
106
106
  render(<TestAdvancedEditor advancedEditorToolbar={false} />)
107
-
107
+
108
108
  const kit = screen.getByTestId(testId)
109
109
  const toolbar = kit.querySelector('.toolbar')
110
110
  expect(toolbar).not.toBeInTheDocument()
@@ -112,17 +112,17 @@ describe('Advanced TipTap Editor works as expected', () => {
112
112
 
113
113
  test('shows/hides toolbar on focus when focus is enabled', async () => {
114
114
  render(<TestAdvancedEditor focus />)
115
-
115
+
116
116
  const kit = screen.getByTestId(testId)
117
-
117
+
118
118
  // Initially toolbar should be hidden
119
119
  let toolbar = kit.querySelector('.toolbar')
120
120
  expect(toolbar).not.toBeInTheDocument()
121
-
121
+
122
122
  const editorElement = kit.querySelector('.ProseMirror')
123
123
  // Focus the editor
124
124
  fireEvent.focus(editorElement)
125
-
125
+
126
126
  // Toolbar should now be visible
127
127
  await waitFor(() => {
128
128
  toolbar = kit.querySelector('.toolbar')
@@ -133,7 +133,7 @@ describe('Advanced TipTap Editor works as expected', () => {
133
133
 
134
134
  test('supports simple prop with advanced editor', () => {
135
135
  render(<TestAdvancedEditor simple />)
136
-
136
+
137
137
  const kit = screen.getByTestId(testId)
138
138
  const toolbar = kit.querySelector('.toolbar')
139
139
  expect(toolbar).toBeInTheDocument()
@@ -144,7 +144,7 @@ describe('Advanced TipTap Editor works as expected', () => {
144
144
 
145
145
  test('supports sticky prop with advanced editor', () => {
146
146
  render(<TestAdvancedEditor sticky />)
147
-
147
+
148
148
  const kit = screen.getByTestId(testId)
149
149
  const stickyToolbar = kit.querySelector('.pb_rich_text_editor_tiptap_toolbar_sticky')
150
150
  expect(stickyToolbar).toBeInTheDocument()
@@ -154,52 +154,37 @@ describe('Advanced TipTap Editor works as expected', () => {
154
154
  test('applies aria-label when provided', () => {
155
155
  const ariaLabel = 'Rich Text Editor'
156
156
  render(<TestAdvancedEditor aria={{ label: ariaLabel }} />)
157
-
157
+
158
158
  const kit = screen.getByTestId(testId)
159
159
  expect(kit).toHaveAttribute('aria-label', ariaLabel)
160
160
  })
161
161
 
162
162
  test('supports inline prop with advanced editor', () => {
163
163
  render(<TestAdvancedEditor inline />)
164
-
164
+
165
165
  const kit = screen.getByTestId(testId)
166
166
  const toolbar = kit.querySelector('.toolbar')
167
167
  expect(toolbar).toBeInTheDocument()
168
168
  expect(kit).toHaveClass(`${kitClass} inline`)
169
169
  })
170
170
 
171
- test('renders required indicator asterisk when requiredIndicator is true', () => {
172
- render(
173
- <RichTextEditor
174
- data={{ testid: testId }}
175
- label="Label"
176
- requiredIndicator
177
- />
178
- )
179
-
180
- const kit = screen.getByTestId(testId)
181
- const label = within(kit).getByText(/Label/)
182
-
183
- expect(label).toBeInTheDocument()
184
- expect(kit).toHaveTextContent('*')
185
- })
186
-
187
171
  describe('TipTap Editor Functionality', () => {
188
172
  test('can type and update content', async () => {
189
173
  render(<TestAdvancedEditor />)
190
-
174
+
191
175
  const kit = screen.getByTestId(testId)
192
176
  const editorContent = kit.querySelector('.ProseMirror')
193
-
177
+
194
178
  // Focus and type in the editor
195
179
  fireEvent.focus(editorContent)
196
- fireEvent.input(editorContent, {
180
+ fireEvent.input(editorContent, {
197
181
  target: { textContent: 'New content' }
198
182
  })
199
-
183
+
200
184
  await waitFor(() => {
201
185
  expect(editorContent).toHaveTextContent('New content')
202
186
  })
203
187
  })
204
188
  })
205
189
  })
190
+