playbook_ui 14.17.0.pre.alpha.PBNTR766tablenestedcollapsiblerowsborderdoubling7192 → 14.17.0.pre.alpha.PBNTR766tablenestedcollapsiblerowsborderdoubling7256

data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss

@@ -1,4 +1,5 @@
 @import "../../tokens/colors";
+@import "../../tokens/screen_sizes";
 
 .table_collapsible_side_highlight {
   border-left: 4px solid $primary;
@@ -50,26 +51,85 @@
   }
 
   // Removing borders from nested collapsible tables and table rows to prevent visual border doubling
-  .pb_collapsible_content_kit {
-    .pb_table {
-      th {
-        border-left: none !important;
-        border-right: none !important;
-        border-top: none !important;
-      }
-      tr td:first-child {
-        border-left: none !important;
-      }  
-      tr td:last-child {
-        border-right: none !important;
+  &.table-sm.table-collapse-sm,
+  &.table-md.table-collapse-sm,
+  &.table-lg.table-collapse-sm {
+    .pb_collapsible_content_kit {
+      .pb_table {
+        @media only screen and (min-width: $screen-xs-max) {
+          th {
+            border-left: none;
+            border-right: none;
+            border-top: none;
+          }
+          tr td:first-child {
+            border-left: none;
+          }
+          tr td:last-child {
+            border-right: none;
+          }
+          tr:first-child td {
+            border-top: none;
+          }
+          tr:last-child td {
+            border-bottom: none;
+          }
+        }
       }
-      tr:first-child td {
-        border-top: none !important;
+    }
+  }
+  &.table-sm.table-collapse-md,
+  &.table-md.table-collapse-md,
+  &.table-lg.table-collapse-md {
+    .pb_collapsible_content_kit {
+      .pb_table {
+        @media only screen and (min-width: $screen-lg-min) {
+          th {
+            border-left: none;
+            border-right: none;
+            border-top: none;
+          }
+          tr td:first-child {
+            border-left: none;
+          }
+          tr td:last-child {
+            border-right: none;
+          }
+          tr:first-child td {
+            border-top: none;
+          }
+          tr:last-child td {
+            border-bottom: none;
+          }
+        }
       }
-      tr:last-child td {
-        border-bottom: none !important;
+    }
+  }
+  &.table-sm.table-collapse-lg,
+  &.table-md.table-collapse-lg,
+  &.table-lg.table-collapse-lg {
+    .pb_collapsible_content_kit {
+      .pb_table {
+        @media only screen and (min-width: $screen-xl-min) {
+          th {
+            border-left: none;
+            border-right: none;
+            border-top: none;
+          }
+          tr td:first-child {
+            border-left: none;
+          }
+          tr td:last-child {
+            border-right: none;
+          }
+          tr:first-child td {
+            border-top: none;
+          }
+          tr:last-child td {
+            border-bottom: none;
+          }
+        }
       }
-  
     }
   }
 }

data/app/pb_kits/playbook/pb_table/styles/_headers.scss

@@ -6,8 +6,20 @@
   &.table-lg {
     thead, .pb_table_thead {
       tr, .pb_table_tr {
-        th, .pb_table_th {
+        th:not(:has(
+          [class*="pb_body_kit"],
+          [class*="pb_detail_kit"],
+          [class*="pb_title_kit"]
+        )),
+        .pb_table_th:not(:has(
+          [class*="pb_body_kit"],
+          [class*="pb_detail_kit"],
+          [class*="pb_title_kit"]
+        )) {
           @include caption;
+        }
+
+        th, .pb_table_th {
           border-bottom: 1px solid $border_light;
         }
       }
@@ -83,10 +95,10 @@
 
 // flatten out corners for floating headerstyle variant to avoid small triangle of white/empty space
 .header-floating > thead > tr:first-child > th:first-child,
-.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child { 
-  border-top-left-radius: 0 !important; 
-} 
-.header-floating > thead > tr:first-child > th:last-child, 
-.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child { 
-  border-top-right-radius: 0 !important; 
+.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
+  border-top-left-radius: 0 !important;
+}
+.header-floating > thead > tr:first-child > th:last-child,
+.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
+  border-top-right-radius: 0 !important;
 }

data/app/pb_kits/playbook/pb_table/table.rb

@@ -37,13 +37,16 @@ module Playbook
       prop :outer_padding, type: Playbook::Props::Enum,
                            values: ["none", "xxs", "xs", "sm", "md", "lg", "xl", nil],
                            default: nil
+      prop :header_style, type: Playbook::Props::Enum,
+                          values: %w[default borderless floating],
+                          default: "default"
 
       def classname
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
           disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class,
           sticky_right_column_class, collapse_class, vertical_border_class, striped_class, outer_padding_class,
-          "table-responsive-#{responsive}", separator: " "
+          "table-responsive-#{responsive}", header_style_class, separator: " "
         )
       end
 
@@ -123,6 +126,15 @@ module Playbook
           outer_padding.present? ? "outer_padding_#{space_css_name}#{outer_padding}" : nil
         end
       end
+
+      def header_style_class
+        case header_style
+        when "borderless"
+          "header-borderless"
+        when "floating"
+          "header-floating"
+        end
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_table/table_header.rb

@@ -26,9 +26,12 @@ module Playbook
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[table div],
                  default: "table"
+      prop :header_style, type: Playbook::Props::Enum,
+                          values: %w[default borderless floating],
+                          default: "default"
 
       def classname
-        generate_classname("pb_table_header_kit", align_class) + tag_class
+        generate_classname("pb_table_header_kit", align_class, header_style_class) + tag_class
       end
 
       def tag_class
@@ -106,6 +109,15 @@ module Playbook
         end
         active_item
       end
+
+      def header_style_class
+        case header_style
+        when "borderless"
+          "header-borderless"
+        when "floating"
+          "header-floating"
+        end
+      end
     end
   end
 end