From 7886616d8cacaa9fc1ab16e139ed83a4c94c4496 Mon Sep 17 00:00:00 2001 From: Carlos Lima Date: Thu, 19 Dec 2024 09:33:01 -0300 Subject: [PATCH 1/3] Adding Collapsible Trail to Rails Advanced Table --- .../Components/CollapsibleTrail.tsx | 7 +--- .../pb_advanced_table/_advanced_table.scss | 8 +++++ ...ced_table_collapsible_trail_rails.html.erb | 36 +++++++++++++++++++ ..._advanced_table_collapsible_trail_rails.md | 1 + .../pb_advanced_table/docs/example.yml | 1 + .../playbook/pb_advanced_table/table_body.rb | 4 ++- .../pb_advanced_table/table_row.html.erb | 8 +++++ .../playbook/pb_advanced_table/table_row.rb | 2 ++ 8 files changed, 60 insertions(+), 7 deletions(-) create mode 100644 playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.html.erb create mode 100644 playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.md diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx b/playbook/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx index 0b8aec98a1..7e1ef607a7 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx @@ -3,18 +3,13 @@ import React from "react" //CollapsibleTrail component const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => { const style: { [key: string]: string | number } = { - position: "absolute", left: `${leftOffset}em`, - top: 0, - bottom: 0, - width: "2px", - backgroundColor: "#E4E8F0", } return (
) } diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss index 5f564b08a0..6473aafe9b 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss @@ -110,6 +110,14 @@ height: auto; } + .collapsible-trail { + background-color: $border_light; + position: absolute; + top: 0; + bottom: 0; + width: 2px; + } + // Responsive Styles @media only screen and (max-width: $screen-xl-min) { &[class*="table-responsive-scroll"] { diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.html.erb b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.html.erb new file mode 100644 index 0000000000..80d2ffffdf --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.html.erb @@ -0,0 +1,36 @@ +<% column_definitions = [ + { + accessor: "year", + label: "Year", + cellAccessors: ["quarter", "month", "day"], + }, + { + accessor: "newEnrollments", + label: "New Enrollments", + }, + { + accessor: "scheduledMeetings", + label: "Scheduled Meetings", + }, + { + accessor: "attendanceRate", + label: "Attendance Rate", + }, + { + accessor: "completedClasses", + label: "Completed Classes", + }, + { + accessor: "classCompletionRate", + label: "Class Completion Rate", + }, + { + accessor: "graduatedStudents", + label: "Graduated Students", + } +] %> + +<%= pb_rails("advanced_table", props: { id: "collapsible_trail", table_data: @table_data, column_definitions: column_definitions }) do %> + <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %> + <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %> +<% end %> diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.md b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.md new file mode 100644 index 0000000000..a4556277cc --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.md @@ -0,0 +1 @@ +`collapsible_trail` is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of the rows when subRows are toggled open. \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml index c47594bde4..b0e6609b2e 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml @@ -4,6 +4,7 @@ examples: - advanced_table_beta_subrow_headers: SubRow Headers - advanced_table_beta_sort: Enable Sorting - advanced_table_custom_cell_rails: Custom Components for Cells + - advanced_table_collapsible_trail_rails: Collapsible Trail react: - advanced_table_default: Default (Required Props) diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_body.rb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_body.rb index ca52792677..08c3cb5cec 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_body.rb +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/table_body.rb @@ -14,6 +14,8 @@ class TableBody < Playbook::KitBase default: "header" prop :subrow_headers, type: Playbook::Props::Array, default: [] + prop :collapsible_trail, type: Playbook::Props::Boolean, + default: true def render_row_and_children(row, column_definitions, current_depth, first_parent_child) output = ActiveSupport::SafeBuffer.new @@ -21,7 +23,7 @@ def render_row_and_children(row, column_definitions, current_depth, first_parent output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: column_definitions, depth: current_depth, subrow_header: subrow_headers[current_depth - 1] }) if is_first_child_of_subrow && enable_toggle_expansion == "all" - output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth }) + output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth, collapsible_trail: collapsible_trail }) if row[:children].present? output << content_tag(:div, class: "toggle-content", data: { advanced_table_content: row.object_id.to_s + id }) do diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb index 4a16f93f2d..66268817ad 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb @@ -2,6 +2,14 @@ <% object.column_definitions.each_with_index do |column, index| %> <%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %> <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %> + <% if collapsible_trail && index.zero? %> + <% (1..depth).each do |i| %> + <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %> + <% left_offset = i * 1.0 + additional_offset %> +
+ <% end %> + <% end %> +
<%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %> <% if index.zero? && object.row[:children].present? %> diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_row.rb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_row.rb index 57bb025708..90dd238322 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_row.rb +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/table_row.rb @@ -9,6 +9,8 @@ class TableRow < Playbook::KitBase default: [] prop :row prop :depth + prop :collapsible_trail, type: Playbook::Props::Boolean, + default: true def classname generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ") From 7aecbeaf74149e0e5071739ad2b12427baca6914 Mon Sep 17 00:00:00 2001 From: Carlos Lima Date: Thu, 19 Dec 2024 12:02:40 -0300 Subject: [PATCH 2/3] Adding collapsible trail to subheaders --- .../app/pb_kits/playbook/pb_advanced_table/table_body.rb | 2 +- .../pb_advanced_table/table_subrow_header.html.erb | 8 ++++++++ .../playbook/pb_advanced_table/table_subrow_header.rb | 2 ++ 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_body.rb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_body.rb index 08c3cb5cec..0143ebaa90 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_body.rb +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/table_body.rb @@ -21,7 +21,7 @@ def render_row_and_children(row, column_definitions, current_depth, first_parent output = ActiveSupport::SafeBuffer.new is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers[current_depth - 1].present? - output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: column_definitions, depth: current_depth, subrow_header: subrow_headers[current_depth - 1] }) if is_first_child_of_subrow && enable_toggle_expansion == "all" + output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: column_definitions, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail }) if is_first_child_of_subrow && enable_toggle_expansion == "all" output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth, collapsible_trail: collapsible_trail }) diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb index 8815af0bf0..462516ee18 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb @@ -6,6 +6,14 @@ <% object.column_definitions.each_with_index do |column, index| %> <%= pb_rails("table/table_cell", props: { tag: "div", classname: object.td_classname}) do %> <%= pb_rails("flex", props:{ align: "center", justify: "start" }) do %> + <% if collapsible_trail && index.zero? %> + <% (1..depth).each do |i| %> + <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %> + <% left_offset = i * 1.0 + additional_offset %> +
+ <% end %> + <% end %> +
<%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %> <% if index.zero? && object.row[:children].present? %> diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb index e25fe4ce71..2d708b9b2f 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb @@ -12,6 +12,8 @@ class TableSubrowHeader < Playbook::KitBase default: "header" prop :subrow_header, type: Playbook::Props::String, default: "" + prop :collapsible_trail, type: Playbook::Props::Boolean, + default: true def classname generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ") From 2250b1edb6ff91d7f628237d0b7d78d793754231 Mon Sep 17 00:00:00 2001 From: Carlos Lima Date: Thu, 19 Dec 2024 16:29:08 -0300 Subject: [PATCH 3/3] Changing doc order --- .../app/pb_kits/playbook/pb_advanced_table/docs/example.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml index b0e6609b2e..aff46cceef 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml @@ -2,9 +2,9 @@ examples: rails: - advanced_table_beta: Default (Required Props) - advanced_table_beta_subrow_headers: SubRow Headers + - advanced_table_collapsible_trail_rails: Collapsible Trail - advanced_table_beta_sort: Enable Sorting - advanced_table_custom_cell_rails: Custom Components for Cells - - advanced_table_collapsible_trail_rails: Collapsible Trail react: - advanced_table_default: Default (Required Props)