playbook_ui 14.21.0 → 14.21.1.pre.alpha.PLAY2163roundedbottomcornersrails8143

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 238f79cc12714d5308f9c5313a0de643c70640fd43be04fe4836dbe2728d5041
-  data.tar.gz: 958840963550c75488c8d2150609e48717d7438a5c470368df8a5fce4ee5ff90
+  metadata.gz: 261d49972260d48525638957d0bc576040c9f2af7dbf91813c2e3a1f52c9444e
+  data.tar.gz: b3fdc7f37fe205f50b8644e705381f11dbbf4f2e55322945e2f3d6f0a9e456b3
 SHA512:
-  metadata.gz: 1bc844d45f1484a2010f47afb1399692251afe1a703e498d03fd85b6514a173ae00e2fcd2ac671379aad75887ee3994717467f7525385e69567ff7afe66181b3
-  data.tar.gz: 17d63048ce235183acd0e78586247b70854cd7e66cecff34726bc3f7763198e31017cdef6b932113d1045bf570bffb2c822e0dedc28649ad38fe42ed2c7d6e72
+  metadata.gz: 1f004dab7f6f6b7d70d14fa26e965a01f238e90d6b64a8ffb63cf6666c424dfdeae33adad6fbcc215bfbcdf5ae56cebe820bc3e751de698cd4dac10dcda6bc8c
+  data.tar.gz: e87ea7b0af0db639203ed63f0d5125458903730f6b12de14e00af1c7a78f3eb307ad3c25092610796f915591bd5229330b6f9b38ec4b46df2b893f2d7834c81f

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -40,7 +40,7 @@
 
       -ms-overflow-style: none !important;
       scrollbar-width: thin !important;
-      scrollbar-color: rgb(0 0 0 / .20) transparent;
+      scrollbar-color: #00000033 transparent !important;
   }
 
   [id$="-span"] {
@@ -563,6 +563,7 @@
   // Sticky Left Columns Styling
   &[class*="advanced-table-sticky-left-columns"] {
     overflow-x: scroll;
+    @include scrollbar-styling;
     .sticky-left {
       position: sticky !important;
       z-index: 2;
@@ -582,6 +583,7 @@
     &[class*="advanced-table-responsive-scroll"] {
       overflow-x: auto;
       width: 100%;
+      @include scrollbar-styling;
 
       // These are the responsive borders that should NOT inherit the custom color
       @include advanced-table-sticky-mixin(
@@ -620,6 +622,23 @@
     box-shadow: 0 4px 10px 0 rgba($shadow, 0.16) !important;
   }
 
+  // For Rails, we can't target the &:last-child since collapsed rows are display: none;
+  // With JS, we add a .last-visible-row class and add rounded corners to bottom row
+  .last-visible-row {
+    td, .pb_table_td {
+      border-width: 0 0 1px 0;
+
+      &:first-child {
+        border-radius: 0 0 0 4px;
+        border-width: 0 0 1px 1px;
+      }
+      &:last-child {
+        border-radius: 0 0 4px 0;
+        border-width: 0 1px 1px 0;
+      }
+    }
+  }
+
   &.dark {
     // Override default border color for dark mode
     --column-border-color: #{$border_dark};

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb

@@ -51,7 +51,7 @@
   ]
 %>
 
-<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "advanced_table_sorting" }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
   <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb

@@ -34,7 +34,7 @@
   subrow_headers = ["Quarter", "Month", "Day"]
 %>
 
-<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "subrow_headers" }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
   <%= pb_rails("advanced_table/table_body", props: { id: "test_table", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb

@@ -55,4 +55,4 @@
   },
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
+<%= pb_rails("advanced_table", props: { id: "beta_table_with_color_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "beta_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>
+<%= pb_rails("advanced_table", props: { id: "loading_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -266,6 +266,25 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         this.updateTableSelectedRowsAttribute();
       });
     }
+    this.addBorderRadiusOnLastVisibleRow()
+  }
+
+  addBorderRadiusOnLastVisibleRow() {
+    const parentElement = this.element.closest('.pb_advanced_table');
+    
+    const table = document.getElementById(parentElement.id);
+
+    if (table) {
+      const visibleRows = table.querySelectorAll('tr.is-visible, tr:not(.toggle-content)');
+  
+      visibleRows.forEach(row => row.classList.remove('last-visible-row'));
+  
+      const lastVisibleRow = visibleRows[visibleRows.length - 1];
+
+      if (lastVisibleRow) {
+        lastVisibleRow.classList.add('last-visible-row');
+      }
+    }
   }
 
 
@@ -367,6 +386,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       row.classList.toggle("bg-silver", !isVisible);
       row.classList.toggle("bg-white", isVisible);
     }
+
+    this.addBorderRadiusOnLastVisibleRow();
   }
 
   displayDownArrow() {