playbook_ui 13.28.0.pre.alpha.PLAY1343fixTooltiprunwayissue2987 → 13.28.0.pre.alpha.PLAY1349checkboxzindexsticky2947
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +4 -14
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +2 -10
- 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 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +0 -10
- data/app/pb_kits/playbook/pb_pill/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +1 -1
- data/app/pb_kits/playbook/pb_tooltip/index.js +0 -1
- data/dist/playbook-rails.js +2 -2
- data/lib/playbook/forms/builder.rb +0 -1
- data/lib/playbook/version.rb +1 -1
- metadata +2 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb +0 -40
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +0 -34
- data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb +0 -31
- data/lib/playbook/forms/builder/dropdown_field.rb +0 -14
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c660f2fd185a40fdeb91e25b442941fafa276a8980f1936e41790d530cd5d4d3
|
4
|
+
data.tar.gz: 3ee7fe1d395298984639cbf785a471c1c0212f7014c3f7f58e2b36e40c2ed858
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 21993c9709fe42fb75413282f5943cfd1c2e448afd28fa77e58abf1fcb0628f3dcfe8f9f5f0bcc2c94f29b405a589a1beb5c2832c9a25655cc7ac4bf7947e4f3
|
7
|
+
data.tar.gz: 1fd33474bb45de18416efc4fbc9fdaf61ef2510ee0c5bb38d2236d065104cb43e8fa5928473dfb384fc8a943cf3cb98ae226e7a230b742856726e029d8ba7779
|
@@ -3,8 +3,8 @@
|
|
3
3
|
<% if content.present? %>
|
4
4
|
<% content.presence %>
|
5
5
|
<% else %>
|
6
|
-
<%= pb_rails("advanced_table/table_header", props: {
|
7
|
-
<%= pb_rails("advanced_table/table_body", props: {
|
6
|
+
<%= pb_rails("advanced_table/table_header", props: {column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion }) %>
|
7
|
+
<%= pb_rails("advanced_table/table_body", props: {table_data: object.table_data, column_definitions: object.column_definitions}) %>
|
8
8
|
<% end %>
|
9
9
|
<% end %>
|
10
10
|
<% end %>
|
@@ -1,3 +1,3 @@
|
|
1
1
|
`subRowHeaders` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
|
2
2
|
|
3
|
-
`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be
|
3
|
+
`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all', 'header" or "none". If set to 'all', the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to 'header' button will only appear in header and NOT in subRow headers. This is set to 'header' by default.
|
@@ -1,7 +1,6 @@
|
|
1
1
|
examples:
|
2
2
|
rails:
|
3
3
|
- advanced_table_beta: Default (Required Props)
|
4
|
-
- advanced_table_beta_subrow_headers: SubRow Headers
|
5
4
|
react:
|
6
5
|
- advanced_table_default: Default (Required Props)
|
7
6
|
- advanced_table_loading: Loading State
|
@@ -13,3 +12,4 @@ examples:
|
|
13
12
|
- advanced_table_table_options: Table Options
|
14
13
|
- advanced_table_table_props: Table Props
|
15
14
|
- advanced_table_inline_row_loading: inline Row Loading
|
15
|
+
|
@@ -3,30 +3,20 @@
|
|
3
3
|
module Playbook
|
4
4
|
module PbAdvancedTable
|
5
5
|
class TableBody < Playbook::KitBase
|
6
|
-
prop :id, type: Playbook::Props::String,
|
7
|
-
default: ""
|
8
6
|
prop :table_data, type: Playbook::Props::Array,
|
9
7
|
default: []
|
10
8
|
prop :column_definitions, type: Playbook::Props::Array,
|
11
9
|
default: []
|
12
|
-
prop :enable_toggle_expansion, type: Playbook::Props::Enum,
|
13
|
-
values: %w[all header none],
|
14
|
-
default: "header"
|
15
|
-
prop :subrow_headers, type: Playbook::Props::Array,
|
16
|
-
default: []
|
17
10
|
|
18
|
-
def render_row_and_children(row, column_definitions, current_depth
|
11
|
+
def render_row_and_children(row, column_definitions, current_depth = 0)
|
19
12
|
output = ActiveSupport::SafeBuffer.new
|
20
|
-
is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers[current_depth - 1].present?
|
21
13
|
|
22
|
-
output << pb_rails("advanced_table/
|
23
|
-
|
24
|
-
output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth })
|
14
|
+
output << pb_rails("advanced_table/table_row", props: { row: row, column_definitions: column_definitions, depth: current_depth })
|
25
15
|
|
26
16
|
if row[:children].present?
|
27
|
-
output << content_tag(:div, class: "toggle-content", data: { advanced_table_content: row.object_id
|
17
|
+
output << content_tag(:div, class: "toggle-content", data: { advanced_table_content: row.object_id }) do
|
28
18
|
row[:children].map do |child_row|
|
29
|
-
render_row_and_children(child_row, column_definitions, current_depth + 1
|
19
|
+
render_row_and_children(child_row, column_definitions, current_depth + 1)
|
30
20
|
end.join.html_safe
|
31
21
|
end
|
32
22
|
end
|
@@ -4,7 +4,7 @@
|
|
4
4
|
<%= pb_rails("table/table_header", props: { tag:"div", id:item[:accessor], classname:object.th_classname}) do %>
|
5
5
|
<%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", text_align:"end" }) do %>
|
6
6
|
<% if index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") %>
|
7
|
-
<button class="gray-icon toggle-all-icon"
|
7
|
+
<button class="gray-icon toggle-all-icon">
|
8
8
|
<%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right:"xs" }) %>
|
9
9
|
</button>
|
10
10
|
<% end %>
|
@@ -13,12 +13,4 @@
|
|
13
13
|
<% end %>
|
14
14
|
<% end %>
|
15
15
|
<% end %>
|
16
|
-
<% end %>
|
17
|
-
|
18
|
-
<script type="text/javascript">
|
19
|
-
var expandAllRows = (element) => {
|
20
|
-
element.closest('.pb_table').querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]').forEach((button) => {
|
21
|
-
button.dispatchEvent(new Event('click'));
|
22
|
-
});
|
23
|
-
};
|
24
|
-
</script>
|
16
|
+
<% end %>
|
@@ -5,7 +5,7 @@
|
|
5
5
|
<div style="padding-left: <%= depth * 1.25 %>em">
|
6
6
|
<%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
|
7
7
|
<% if index.zero? && object.row[:children].present? %>
|
8
|
-
<button id="<%= object.row.object_id
|
8
|
+
<button id="<%= object.row.object_id %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
|
9
9
|
<%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
|
10
10
|
<%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
|
11
11
|
</button>
|
@@ -13,15 +13,6 @@
|
|
13
13
|
]
|
14
14
|
%>
|
15
15
|
|
16
|
-
<%
|
17
|
-
example_dropdown_options = [
|
18
|
-
{ label: 'United States', value: 'United States', id: 'us' },
|
19
|
-
{ label: 'Canada', value: 'Canada', id: 'ca' },
|
20
|
-
{ label: 'Pakistan', value: 'Pakistan', id: 'pk' },
|
21
|
-
]
|
22
|
-
|
23
|
-
%>
|
24
|
-
|
25
16
|
<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
|
26
17
|
<%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
|
27
18
|
<%= form.text_field :example_text_field, props: { label: true } %>
|
@@ -32,7 +23,6 @@
|
|
32
23
|
<%= form.password_field :example_password_field, props: { label: true } %>
|
33
24
|
<%= form.url_field :example_url_field, props: { label: true } %>
|
34
25
|
<%= form.text_area :example_text_area, props: { label: true } %>
|
35
|
-
<%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %>
|
36
26
|
<%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
|
37
27
|
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
38
28
|
<%= form.check_box :example_checkbox,
|
@@ -1 +1 @@
|
|
1
|
-
A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color
|
1
|
+
A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color here: https://playbook.powerapp.cloud/utilities
|
@@ -127,7 +127,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
|
|
127
127
|
}
|
128
128
|
}}
|
129
129
|
role="tooltip_trigger"
|
130
|
-
style={{ display: "inline-
|
130
|
+
style={{ display: "inline-block" }}
|
131
131
|
{...ariaProps}
|
132
132
|
{...dataProps}
|
133
133
|
{...htmlProps}
|