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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +0 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +1 -51
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +0 -34
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +0 -19
- data/app/pb_kits/playbook/pb_background/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_background/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb +3 -35
- data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +1 -3
- data/app/pb_kits/playbook/pb_icon/icon.rb +1 -6
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +33 -35
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx +1 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md +1 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +7 -51
- data/app/pb_kits/playbook/pb_multiple_users/multiple_users.rb +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +6 -33
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb +0 -5
- data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js +18 -33
- data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +11 -29
- data/app/pb_kits/playbook/pb_textarea/docs/example.yml +1 -4
- data/app/pb_kits/playbook/pb_textarea/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_textarea/index.ts +5 -12
- data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +10 -10
- data/app/pb_kits/playbook/pb_textarea/textarea.rb +0 -30
- data/app/pb_kits/playbook/pb_textarea/textarea.test.js +1 -18
- data/dist/chunks/{_pb_line_graph-BgKF_zz1.js → _pb_line_graph-hxi01lk7.js} +1 -1
- data/dist/chunks/{_typeahead-B9a6ZsEP.js → _typeahead-BgLnlhzP.js} +1 -1
- data/dist/chunks/{globalProps-BhVYCqRf.js → globalProps-DgYwLYNx.js} +1 -1
- data/dist/chunks/{lib-DD34ZrWL.js → lib-NLxTo8OB.js} +1 -1
- data/dist/chunks/vendor.js +2 -2
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/align_content.rb +3 -13
- data/lib/playbook/align_items.rb +3 -13
- data/lib/playbook/align_self.rb +3 -13
- data/lib/playbook/display.rb +0 -5
- data/lib/playbook/flex.rb +3 -13
- data/lib/playbook/flex_direction.rb +3 -13
- data/lib/playbook/flex_grow.rb +3 -13
- data/lib/playbook/flex_shrink.rb +3 -13
- data/lib/playbook/flex_wrap.rb +3 -13
- data/lib/playbook/justify_content.rb +3 -13
- data/lib/playbook/justify_self.rb +3 -13
- data/lib/playbook/order.rb +3 -13
- data/lib/playbook/spacing.rb +9 -39
- data/lib/playbook/text_align.rb +3 -13
- data/lib/playbook/version.rb +2 -2
- data/lib/playbook/vertical_align.rb +3 -13
- data/lib/playbook/z_index.rb +0 -5
- metadata +6 -47
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.html.erb +0 -64
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.md +0 -18
- data/app/pb_kits/playbook/pb_background/docs/_background_responsive.jsx +0 -30
- data/app/pb_kits/playbook/pb_background/docs/_background_responsive.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.html.erb +0 -74
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.jsx +0 -87
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md +0 -3
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.html.erb +0 -30
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx +0 -35
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.md +0 -3
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb +0 -10
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx +0 -21
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md +0 -3
- data/app/pb_kits/playbook/pb_table/docs/_sections.yml +0 -68
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb +0 -39
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md +0 -3
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb +0 -5
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.jsx +0 -25
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.md +0 -3
- data/app/pb_kits/playbook/utilities/test/globalProps/borderRadius.test.js +0 -33
- data/app/pb_kits/playbook/utilities/test/globalProps/bottom.test.js +0 -60
- data/app/pb_kits/playbook/utilities/test/globalProps/cursor.test.js +0 -42
- data/app/pb_kits/playbook/utilities/test/globalProps/dark.test.js +0 -33
- data/app/pb_kits/playbook/utilities/test/globalProps/gap.test.js +0 -87
- data/app/pb_kits/playbook/utilities/test/globalProps/globalProps.integration.test.js +0 -936
- data/app/pb_kits/playbook/utilities/test/globalProps/height.test.js +0 -68
- data/app/pb_kits/playbook/utilities/test/globalProps/htmlOptions.test.js +0 -510
- data/app/pb_kits/playbook/utilities/test/globalProps/left.test.js +0 -60
- data/app/pb_kits/playbook/utilities/test/globalProps/lineHeight.test.js +0 -33
- data/app/pb_kits/playbook/utilities/test/globalProps/margin.test.js +0 -95
- data/app/pb_kits/playbook/utilities/test/globalProps/numberSpacing.test.js +0 -33
- data/app/pb_kits/playbook/utilities/test/globalProps/overflow.test.js +0 -68
- data/app/pb_kits/playbook/utilities/test/globalProps/padding.test.js +0 -95
- data/app/pb_kits/playbook/utilities/test/globalProps/position.test.js +0 -33
- data/app/pb_kits/playbook/utilities/test/globalProps/right.test.js +0 -60
- data/app/pb_kits/playbook/utilities/test/globalProps/shadow.test.js +0 -33
- data/app/pb_kits/playbook/utilities/test/globalProps/textAlign.test.js +0 -41
- data/app/pb_kits/playbook/utilities/test/globalProps/top.test.js +0 -60
- data/app/pb_kits/playbook/utilities/test/globalProps/verticalAlign.test.js +0 -40
- data/app/pb_kits/playbook/utilities/test/globalProps/width.test.js +0 -66
- 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:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ec3832a5a9d172af005bea73161b414b33cce3a4b9351680a75be21567f70f1f
|
|
4
|
+
data.tar.gz: 9b88540268a3c696e5e810642e48ceeededa245b3ce5a3e46e23562b85e0a339
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
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
|
|
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
|
|
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
|
-
###
|
|
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
|
|
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
|
|
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.
|
|
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
|
|
@@ -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)
|
|
@@ -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("
|
|
2
|
-
|
|
3
|
-
|
|
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
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
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
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Use the `withTooltip`
|
|
1
|
+
Use the `withTooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.
|
|
@@ -1,55 +1,11 @@
|
|
|
1
1
|
<%= pb_content_tag do %>
|
|
2
|
-
<%
|
|
3
|
-
|
|
4
|
-
|
|
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
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
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 %>
|
|
@@ -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'
|