playbook_ui 16.1.0.pre.alpha.play264213818 → 16.1.0.pre.rc.0

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 (100) 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_card/docs/_card_light.html.erb +3 -35
  14. data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +1 -3
  15. data/app/pb_kits/playbook/pb_icon/icon.rb +1 -6
  16. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +33 -35
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -1
  18. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx +1 -1
  19. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md +1 -1
  20. data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +0 -1
  21. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +7 -51
  22. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.rb +0 -1
  23. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +6 -33
  24. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +0 -3
  25. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +0 -2
  26. data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb +0 -5
  27. data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js +18 -33
  28. data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +11 -29
  29. data/app/pb_kits/playbook/pb_textarea/docs/example.yml +1 -4
  30. data/app/pb_kits/playbook/pb_textarea/docs/index.js +0 -1
  31. data/app/pb_kits/playbook/pb_textarea/index.ts +5 -12
  32. data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +10 -10
  33. data/app/pb_kits/playbook/pb_textarea/textarea.rb +0 -30
  34. data/app/pb_kits/playbook/pb_textarea/textarea.test.js +1 -18
  35. data/dist/chunks/{_pb_line_graph-BgKF_zz1.js → _pb_line_graph-hxi01lk7.js} +1 -1
  36. data/dist/chunks/{_typeahead-B9a6ZsEP.js → _typeahead-BgLnlhzP.js} +1 -1
  37. data/dist/chunks/{globalProps-BhVYCqRf.js → globalProps-DgYwLYNx.js} +1 -1
  38. data/dist/chunks/{lib-DD34ZrWL.js → lib-NLxTo8OB.js} +1 -1
  39. data/dist/chunks/vendor.js +2 -2
  40. data/dist/playbook-rails-react-bindings.js +1 -1
  41. data/dist/playbook-rails.js +1 -1
  42. data/lib/playbook/align_content.rb +3 -13
  43. data/lib/playbook/align_items.rb +3 -13
  44. data/lib/playbook/align_self.rb +3 -13
  45. data/lib/playbook/display.rb +0 -5
  46. data/lib/playbook/flex.rb +3 -13
  47. data/lib/playbook/flex_direction.rb +3 -13
  48. data/lib/playbook/flex_grow.rb +3 -13
  49. data/lib/playbook/flex_shrink.rb +3 -13
  50. data/lib/playbook/flex_wrap.rb +3 -13
  51. data/lib/playbook/justify_content.rb +3 -13
  52. data/lib/playbook/justify_self.rb +3 -13
  53. data/lib/playbook/order.rb +3 -13
  54. data/lib/playbook/spacing.rb +9 -39
  55. data/lib/playbook/text_align.rb +3 -13
  56. data/lib/playbook/version.rb +2 -2
  57. data/lib/playbook/vertical_align.rb +3 -13
  58. data/lib/playbook/z_index.rb +0 -5
  59. metadata +6 -47
  60. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.html.erb +0 -64
  61. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.md +0 -18
  62. data/app/pb_kits/playbook/pb_background/docs/_background_responsive.jsx +0 -30
  63. data/app/pb_kits/playbook/pb_background/docs/_background_responsive.md +0 -1
  64. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.html.erb +0 -74
  65. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.jsx +0 -87
  66. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md +0 -3
  67. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.html.erb +0 -30
  68. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx +0 -35
  69. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.md +0 -3
  70. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb +0 -10
  71. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx +0 -21
  72. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md +0 -3
  73. data/app/pb_kits/playbook/pb_table/docs/_sections.yml +0 -68
  74. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb +0 -39
  75. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md +0 -3
  76. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb +0 -5
  77. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.jsx +0 -25
  78. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.md +0 -3
  79. data/app/pb_kits/playbook/utilities/test/globalProps/borderRadius.test.js +0 -33
  80. data/app/pb_kits/playbook/utilities/test/globalProps/bottom.test.js +0 -60
  81. data/app/pb_kits/playbook/utilities/test/globalProps/cursor.test.js +0 -42
  82. data/app/pb_kits/playbook/utilities/test/globalProps/dark.test.js +0 -33
  83. data/app/pb_kits/playbook/utilities/test/globalProps/gap.test.js +0 -87
  84. data/app/pb_kits/playbook/utilities/test/globalProps/globalProps.integration.test.js +0 -936
  85. data/app/pb_kits/playbook/utilities/test/globalProps/height.test.js +0 -68
  86. data/app/pb_kits/playbook/utilities/test/globalProps/htmlOptions.test.js +0 -510
  87. data/app/pb_kits/playbook/utilities/test/globalProps/left.test.js +0 -60
  88. data/app/pb_kits/playbook/utilities/test/globalProps/lineHeight.test.js +0 -33
  89. data/app/pb_kits/playbook/utilities/test/globalProps/margin.test.js +0 -95
  90. data/app/pb_kits/playbook/utilities/test/globalProps/numberSpacing.test.js +0 -33
  91. data/app/pb_kits/playbook/utilities/test/globalProps/overflow.test.js +0 -68
  92. data/app/pb_kits/playbook/utilities/test/globalProps/padding.test.js +0 -95
  93. data/app/pb_kits/playbook/utilities/test/globalProps/position.test.js +0 -33
  94. data/app/pb_kits/playbook/utilities/test/globalProps/right.test.js +0 -60
  95. data/app/pb_kits/playbook/utilities/test/globalProps/shadow.test.js +0 -33
  96. data/app/pb_kits/playbook/utilities/test/globalProps/textAlign.test.js +0 -41
  97. data/app/pb_kits/playbook/utilities/test/globalProps/top.test.js +0 -60
  98. data/app/pb_kits/playbook/utilities/test/globalProps/verticalAlign.test.js +0 -40
  99. data/app/pb_kits/playbook/utilities/test/globalProps/width.test.js +0 -66
  100. data/app/pb_kits/playbook/utilities/test/globalProps/zIndex.test.js +0 -50
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a5780d8a980b27fef50be2bd9f824684732373c72b707d5af5f8071c627b878a
4
- data.tar.gz: b304d2a4a3bd2a77b73ba7e95b70f5aff9bd6b1f4b78ed99a494712666ce6a1a
3
+ metadata.gz: ec3832a5a9d172af005bea73161b414b33cce3a4b9351680a75be21567f70f1f
4
+ data.tar.gz: 9b88540268a3c696e5e810642e48ceeededa245b3ce5a3e46e23562b85e0a339
5
5
  SHA512:
6
- metadata.gz: c8133ed39e3328aa2e76508e31c51e7ff0c81103c99f8c2324367333e2168ea08610f59fdff5d1bef97d3372637ee29150ee3d6541d83c3cea7417414bed5481
7
- data.tar.gz: f5488d8e0b060a56590d3c390d832a1760d9bd7e1b97a02afc0958c9252ae67f9667f2856d2ff70d3cdfc8fe71658aa2135bccef62f154e68a1db7f2a20fa807
6
+ metadata.gz: ad0694a212c9b5924b651c30038152649a9f779f11ea81ad5970315aefcb3a14534654c366049d8ba1d725180c907a9611c3b7c4840ec4cd7f971a11599d135f
7
+ data.tar.gz: 7c69619d23491fde3af8952c6e899afffff9c65df6a42d81c938fc6fd37c08e90706bb7eb36f9d9dc6267c83826851424964c5adbc4ac4bd67a04e4294947b02
@@ -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,36 +1,4 @@
1
- <%= pb_rails("flex", props: {
2
- gap: "md",
3
- orientation: "column"
4
- }) do %>
5
-
6
- <%= pb_rails("caption", props: { text: "flex direction responsive: row on md + xl, column as default" }) %>
7
- <%= pb_rails("card", props: {
8
- flex_direction: { default: "column", md: "row", xl:"row" }
9
- }) do %>
10
- <%= pb_rails("body", props: { text: "Item 1", color: "default" }) %>
11
- <%= pb_rails("body", props: { text: "Item 2", color: "default" }) %>
12
- <%= pb_rails("body", props: { text: "Item 3", color: "default" }) %>
13
- <% end %>
14
-
15
- <%= pb_rails("caption", props: { text: "align items responsive: start on default, center on md, end on lg" }) %>
16
- <%= pb_rails("card", props: {
17
- display: "flex",
18
- flex_direction: "row",
19
- align_items: { default: "start", md: "center", lg: "end" },
20
- }) do %>
21
- <%= pb_rails("card", props: {height:"xs" }) do %> Card 1 <% end %>
22
- <%= pb_rails("card", props: { height:"sm" }) do %> Card 2 <% end %>
23
- <%= pb_rails("card", props: { height:"xs" }) do %> Card 3 <% end %>
24
- <% end %>
25
-
26
- <%= pb_rails("caption", props: { text: "Text Align responsive: left on default, center on md, right on lg" }) %>
27
- <%= pb_rails("card", props: {
28
- text_align: { default: "left", md: "center", lg: "right" },
29
- width: "100%"
30
- }) do %>
31
- <%= pb_rails("body", props: { }) do %> text 1 <% end %>
32
- <%= pb_rails("body", props: { }) do %> text 2 <% end %>
33
- <%= pb_rails("body", props: { }) do %> text 3 <% end %>
34
- <% end %>
1
+ <%= pb_rails("card", props: {
2
+ }) do %>
3
+ Card content
35
4
  <% end %>
36
-
@@ -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 %>
@@ -109,18 +109,13 @@ module Playbook
109
109
 
110
110
  svg["class"] = %w[pb_custom_icon svg-inline--fa].concat([object.custom_icon_classname]).join(" ")
111
111
  svg["id"] = object.id
112
+ svg["data"] = object.data
112
113
  svg["height"] = "auto"
113
114
  svg["width"] = "auto"
114
115
  svg["tabindex"] = object.tabindex
115
116
  fill_color = object.color || "currentColor"
116
117
  doc.at_css("path")["fill"] = fill_color
117
118
 
118
- if object.data.present?
119
- object.data.each do |key, value|
120
- svg["data-#{key}"] = value
121
- end
122
- end
123
-
124
119
  if object.aria.present?
125
120
  object.aria.each do |key, value|
126
121
  k = key.to_s
@@ -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'
@@ -38,5 +38,5 @@ const MultipleUsersWithTooltip = (props) => {
38
38
  </div>
39
39
  )
40
40
  }
41
-
41
+ ``
42
42
  export default MultipleUsersWithTooltip
@@ -1 +1 @@
1
- Use the `withTooltip` / `with_tooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.
1
+ Use the `withTooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.
@@ -4,7 +4,6 @@ examples:
4
4
  - multiple_users_default: Default
5
5
  - multiple_users_reverse: Reverse
6
6
  - multiple_users_size: Size
7
- - multiple_users_with_tooltip: With Tooltip
8
7
 
9
8
 
10
9
  react:
@@ -1,55 +1,11 @@
1
1
  <%= pb_content_tag do %>
2
- <% if object.with_tooltip %>
3
- <% object.users.take(object.display_count).each_with_index do |user, index| %>
4
- <% user_id = "multiple-users-#{object.object_id}-user-#{index}" %>
5
- <div id="<%= user_id %>" class="pb_multiple_users_item">
6
- <%= pb_rails("avatar", props: user.except(:tooltip).merge({size: object.size, dark: object.dark})) %>
7
- </div>
8
- <% end %>
9
-
10
- <% if object.more_than_four %>
11
- <% badge_id = "multiple-users-#{object.object_id}-badge" %>
12
- <div id="<%= badge_id %>" class="pb_multiple_users_item multiple_users_badge_<%= object.size %><%= object.dark ? " dark" : "" %>">
13
- <%= "+#{object.users.count - object.display_count}" %>
14
- </div>
15
- <% end %>
16
-
17
- <% object.users.take(object.display_count).each_with_index do |user, index| %>
18
- <% if user[:tooltip].present? %>
19
- <% user_id = "multiple-users-#{object.object_id}-user-#{index}" %>
20
- <%= pb_rails("tooltip", props: {
21
- trigger_element_selector: "##{user_id}",
22
- tooltip_id: "#{user_id}-tooltip",
23
- position: "top",
24
- z_index: "10"
25
- }) do %>
26
- <%= user[:tooltip] %>
27
- <% end %>
28
- <% end %>
29
- <% end %>
30
-
31
- <% if object.more_than_four %>
32
- <% badge_id = "multiple-users-#{object.object_id}-badge" %>
33
- <%= pb_rails("tooltip", props: {
34
- trigger_element_selector: "##{badge_id}",
35
- tooltip_id: "#{badge_id}-tooltip",
36
- position: "top",
37
- z_index: "10"
38
- }) do %>
39
- <% object.users.drop(object.display_count).each do |user| %>
40
- <div><%= user[:tooltip] || user[:name] %></div>
41
- <% end %>
42
- <% end %>
43
- <% end %>
44
- <% else %>
45
- <% object.users.take(object.display_count).each do |user| %>
46
- <%= pb_rails("avatar", props: user.merge({size: object.size, classname: "pb_multiple_users_item", dark: object.dark})) %>
47
- <% end %>
2
+ <% object.users.take(object.display_count).each do |user| %>
3
+ <%= pb_rails("avatar", props: user.merge({size: object.size, classname: "pb_multiple_users_item", dark: object.dark}) ) %>
4
+ <% end %>
48
5
 
49
- <% if object.more_than_four %>
50
- <div class="pb_multiple_users_item multiple_users_badge_<%= object.size %><%= object.dark ? " dark" : "" %>">
51
- <%= "+#{object.users.count - object.display_count}" %>
52
- </div>
53
- <% end %>
6
+ <% if object.more_than_four %>
7
+ <div class="pb_multiple_users_item multiple_users_badge_<%= object.size %><%= object.dark ? " dark" : "" %>">
8
+ <%= "+#{object.users.count - object.display_count}" %>
9
+ </div>
54
10
  <% end %>
55
11
  <% end %>
@@ -8,7 +8,6 @@ module Playbook
8
8
  values: %w[xxs xs],
9
9
  default: "xs"
10
10
  prop :users, type: Playbook::Props::HashArray, required: true
11
- prop :with_tooltip, type: Playbook::Props::Boolean, default: false
12
11
 
13
12
  def more_than_four
14
13
  users.count > 4
@@ -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'