playbook_ui 14.16.0.pre.alpha.PBNTR924reacttablecustomheaders6846 → 14.16.0.pre.alpha.PLAY1938completetooltipfloatinguitransition6830

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dd82bb6f3ee44ed655fa00a9063867e0bf1b2475e14053635cfa045d9eabc19c
-  data.tar.gz: 17de2ee4fb645c07918923b762f2c4195ff451056c85e4dd41fd7655fd1004a7
+  metadata.gz: 794a2d3bca7088071c4fbd83fff2a367725c1919abc36cc77cd4b46aebd7d752
+  data.tar.gz: 78a0d55d2565ea0f8181c350c797dbd8cf68ab5be5de79fb8956b48183ce7fca
 SHA512:
-  metadata.gz: e798db2746cc1381cdf2a6bf3d988f784a133ad65cddc0e6cc5085eb7586e28808b461d1d9aae1e5ad4b579474698380765c393a3ab6ff9b8537541ca8d299a5
-  data.tar.gz: 5bee6ba2e97346c45b8b38df8839d6f2e0ad481eb8c4f2299cdb01eb3b8b79a6df40c919236a4f765b0de50d9a29a8a4c877ed9a1374348f3ab14cb92f45e302
+  metadata.gz: c8c882af3d81f788032d5b534917b5494d149610824acc75cca8337fb13826f526ceec4c851784985b5e0e2a9af5f895980a9c4d8b904435353afe2ff851683a
+  data.tar.gz: 13ccd9cf6c192109eee944d6bd83fe8b8ba03d40d48e3481f04e96d63c49a7d455c9a812478920c575fdf5a89db751c29823ae99fa52bfe696be2a966a080f24

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

@@ -101,15 +101,6 @@
       border-top-left-radius: 0px !important;
       border-top-right-radius: 0px !important;
     }
-    // Right align header content of first data column in selectable row no subrow setup
-    &.selectable-rows-enabled {
-      tr { 
-        th:nth-child(2),
-        .pb_flex_kit_orientation_row_justify_content_start_align_items_center_spacing_none.gap_none {
-          justify-content: flex-end;
-        }
-      }
-    }
 
     // Set fixed width for header cells to match table body
     th {
@@ -121,8 +112,7 @@
       }
 
       // Set fixed width for checkbox column
-      &.table-header-cells-custom, 
-      &.checkbox-cell.checkbox-cell-header {
+      &.table-header-cells-custom {
         width: 40px !important;
         min-width: 40px !important;
         box-sizing: border-box !important;
@@ -178,15 +168,6 @@
         text-align: right;
       }
     }
-    // Right align row content of first data column in selectable row no subrow setup
-    &.selectable-rows-enabled {
-      tr {
-        td:nth-child(2),
-        .pb_flex_kit_orientation_row_justify_content_start_align_items_center_spacing_none {
-          justify-content: end;
-        }
-      }
-    }
   }
 
   .table-header-cells-active:first-child {
@@ -281,8 +262,7 @@
   .table-header-cells:first-child,
   .table-header-cells-custom:first-child,
   td:first-child,
-  .pb_table_td:first-child,
-  .checkbox-cell.checkbox-cell-header:first-child {
+  .pb_table_td:first-child {
     box-shadow: 1px 0px 0px 0px $border_light !important;
   }
 
@@ -338,7 +318,6 @@
       .table-header-cells:first-child,
       td:first-child,
       .pb_table_td:first-child,
-      .checkbox-cell.checkbox-cell-header:first-child,
       [class*="pinned-left"] {
           background-color: $white;
           box-shadow: $shadow_deep !important;
@@ -456,16 +435,6 @@
         ) !important;
       }
     }
-
-    // Vertical separator
-    .table-header-cells:first-child,
-    .table-header-cells-custom:first-child,
-    td:first-child,
-    .pb_table_td:first-child,
-    .checkbox-cell.checkbox-cell-header:first-child {
-      box-shadow: 1px 0px 0px 0px $border_dark !important;
-    }
-
     // Dark Mode Responsive Styles
     @media only screen and (max-width: $screen-xl-min) {
       &[class*="advanced-table-responsive-scroll"] {
@@ -490,7 +459,6 @@
         .table-header-cells:first-child,
         td:first-child,
         .pb_table_td:first-child,
-        .checkbox-cell.checkbox-cell-header:first-child,
         [class*="pinned-left"] {
           background: $bg_dark_card;
           border-right: $border_dark;

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -3,8 +3,8 @@
           <% if content.present? %>
             <% content.presence %>
           <% else %>
-            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows }) %>
-            <%= pb_rails("advanced_table/table_body", props: { 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 }) %>
+            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading }) %>
+            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading }) %>
           <% end %>
         <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -20,8 +20,6 @@ module Playbook
       prop :max_height, type: Playbook::Props::Enum,
                         values: %w[auto xs sm md lg xl xxl xxxl],
                         default: "auto"
-      prop :selectable_rows, type: Playbook::Props::Boolean,
-                             default: false
 
       def classname
         generate_classname("pb_advanced_table", responsive_classname, max_height_classname, separator: " ")
@@ -34,14 +32,6 @@ module Playbook
       def max_height_classname
         max_height.present? ? "advanced-table-max-height-#{max_height}" : ""
       end
-
-      def selected_rows
-        @selected_rows ||= []
-      end
-
-      def selected_rows_length
-        selected_rows.length
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -11,8 +11,6 @@ examples:
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
-  # - advanced_table_selectable_rows: Selectable Rows
-  # - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
 
 
   react:

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

@@ -231,4 +231,4 @@ window.expandAllRows = (element) => {
 
 window.expandAllSubRows = (element, rowDepth) => {
   PbAdvancedTable.handleToggleAllSubRows(element, rowDepth);
-};
+};

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -21,8 +21,6 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"
-      prop :selectable_rows, type: Playbook::Props::Boolean,
-                             default: false
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -58,7 +56,7 @@ module Playbook
         current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { id: 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 })
+        output << pb_rails("advanced_table/table_row", props: { id: 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 })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -83,7 +81,7 @@ module Playbook
       def classname
         additional_classes = []
         additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
-        additional_classes << "selectable-rows-enabled" if selectable_rows && enable_toggle_expansion == "none"
+
         generate_classname("pb_advanced_table_body", *additional_classes, separator: " ")
       end
 

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -1,29 +1,19 @@
 <%= pb_content_tag(:thead) do %>
   <% object.header_rows.each_with_index do |header_row, row_index| %>
     <%= pb_rails("table/table_row") do %>
-      <% if row_index == 0 && object.selectable_rows && object.enable_toggle_expansion == "none" %>
-        <%= object.render_select_all_header %>
-      <% end %>
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
         <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
           <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
-            <% if cell_index.zero? && row_index === header_rows.size - 1 %>
-              <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
-                <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>
-                  <%= object.render_select_all_checkbox %>
-                <% end %>
-              <% end %>
-              <% if object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all" %>
-                <% if loading %>
-                  <div class="<%= object.loading ? 'loading-toggle-icon' : '' %>"></div>
-                <% else %>
-                  <button
-                    class="gray-icon toggle-all-icon"
-                    onclick="expandAllRows(this); event.preventDefault();">
-                    <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
-                  </button>
-                <% end %>
+            <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
+              <% if loading %>
+                <div class="<%= object.loading ? 'loading-toggle-icon' : '' %>"></div>
+              <% else %>
+                <button
+                  class="gray-icon toggle-all-icon"
+                  onclick="expandAllRows(this); event.preventDefault();">
+                  <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
+                </button>
               <% end %>
             <% end %>
             <%= cell[:label] %>

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

@@ -13,20 +13,17 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"
-      prop :selectable_rows, type: Playbook::Props::Boolean,
-                             default: false
 
       def classname
         additional_classes = []
         additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
-        additional_classes << "selectable-rows-enabled" if selectable_rows && enable_toggle_expansion == "none"
 
         generate_classname("pb_advanced_table_header", "pb_table_thead", *additional_classes, separator: " ")
       end
 
       def th_classname(is_first_column: false)
         additional_classes = []
-        additional_classes << "pinned-left" if is_first_column && responsive == "scroll" && !selectable_rows
+        additional_classes << "pinned-left" if is_first_column && responsive == "scroll"
 
         generate_classname("table-header-cells", *additional_classes, separator: " ")
       end
@@ -41,40 +38,6 @@ module Playbook
         rows
       end
 
-      # Selectable Rows No Subrows - checkboxes in their own first cell
-      def render_select_all_header
-        if selectable_rows
-          additional_classes = []
-          additional_classes << "table-header-cells-custom"
-          additional_classes << "checkbox-cell-header"
-          additional_classes << "pinned-left" if responsive == "scroll"
-          pb_rails("table/table_header", props: {
-                     classname: additional_classes.join(" "),
-                   }) do
-            pb_rails("checkbox", props: {
-                       id: "select-all-rows",
-                       name: "select-all-rows",
-                       data: {
-                         action: "click->pb-advanced-table#toggleAllRowSelection",
-                       },
-                     })
-          end
-        end
-      end
-
-      # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
-      def render_select_all_checkbox
-        if selectable_rows
-          pb_rails("checkbox", props: {
-                     id: "select-all-rows",
-                     name: "select-all-rows",
-                     data: {
-                       action: "click->pb-advanced-table#toggleAllRowSelection",
-                     },
-                   })
-        end
-      end
-
     private
 
       def compute_max_depth(columns)

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -1,60 +1,48 @@
 <%= pb_content_tag(:tr) do %>
-    <% has_separate_checkbox = object.selectable_rows && object.enable_toggle_expansion == "none" %>
-    <% if has_separate_checkbox %>
-        <%= object.render_checkbox_cell %>
-    <% end %>
-    <% object.column_definitions.each_with_index do |column, index| %>
-        <% next unless column[:accessor].present? %>
-        <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
-            <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) 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 %>
-                        <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
+        <% object.column_definitions.each_with_index do |column, index| %>
+            <% next unless column[:accessor].present? %>
+            <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
+                <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) 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 %>
+                            <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
+                        <% end %>
                     <% end %>
-                <% end %>
 
-                <div style="padding-left: <%= depth * 1.25 %>em">
-                    <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
-                        <% if index.zero? %>
-                            <% has_integrated_checkbox = object.selectable_rows && object.enable_toggle_expansion != "none" %>
-                            <% if has_integrated_checkbox %>
-                                <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>
-                                    <%= object.render_row_checkbox %>
-                                <% end %>
+                    <div style="padding-left: <%= depth * 1.25 %>em">
+                        <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
+                            <% if index.zero? && object.row[:children].present? %>
+                              <button
+                                id="<%= "#{object.id}_#{object.row.object_id}" %>"
+                                class="gray-icon expand-toggle-icon"
+                                data-advanced-table="true">
+                                <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
+                                <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                              </button>
                             <% end %>
-                            <% if object.row[:children].present? %>
-                                <button
-                                    id="<%= "#{object.id}_#{object.row.object_id}" %>"
-                                    class="gray-icon expand-toggle-icon"
-                                    data-advanced-table="true">
-                                    <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
-                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
-                                </button>
-                            <% end %>
-                        <% end %>
-                        <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && (object.row[:children].present? || has_integrated_checkbox) ? "none" : "xs"}) do %>       
-                            <% if column[:custom_renderer].present? %>
-                                <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
-                            <% elsif index.zero? %>
-                                <% if object.depth.zero? %>
-                                    <%= object.row[column[:accessor].to_sym] %>
-                                <% else %>
-                                    <% object.depth_accessors.each_with_index do |item, accessor_index| %>
-                                        <% if object.depth - 1 == accessor_index %>
-                                            <% key = item.to_sym %>
-                                            <%= object.row[key] %>
+                            <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
+                                <% if column[:custom_renderer].present? %>
+                                    <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
+                                <% elsif index.zero? %>
+                                    <% if object.depth.zero? %>
+                                        <%= object.row[column[:accessor].to_sym] %>
+                                    <% else %>
+                                        <% object.depth_accessors.each_with_index do |item, accessor_index| %>
+                                            <% if object.depth - 1 == accessor_index %>
+                                                <% key = item.to_sym %>
+                                                <%= object.row[key] %>
+                                            <% end %>
                                         <% end %>
                                     <% end %>
+                                <% else %>
+                                    <%= object.row[column[:accessor].to_sym] %>
                                 <% end %>
-                            <% else %>
-                                <%= object.row[column[:accessor].to_sym] %>
                             <% end %>
                         <% end %>
-                    <% end %>
-                </div>
+                    </div>
+                <% end %>
             <% end %>
         <% end %>
-    <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -20,13 +20,6 @@ module Playbook
                         default: "scroll"
       prop :is_pinned_left, type: Playbook::Props::Boolean,
                             default: false
-      prop :selectable_rows, type: Playbook::Props::Boolean,
-                             default: false
-      prop :row_id, type: Playbook::Props::String,
-                    default: ""
-      prop :enable_toggle_expansion, type: Playbook::Props::Enum,
-                                     values: %w[all header none],
-                                     default: "header"
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
@@ -49,38 +42,6 @@ module Playbook
         end.compact
       end
 
-      # Selectable Rows No Subrows - checkboxes in their own first cell
-      def render_checkbox_cell
-        if selectable_rows
-          pb_rails("table/table_cell", props: {
-                     classname: "checkbox-cell",
-                   }) do
-            pb_rails("checkbox", props: {
-                       id: "select-row-#{row_id || row.object_id}",
-                       name: "select-row-#{row_id || row.object_id}",
-                       data: {
-                         row_id: row_id || row.object_id.to_s,
-                         action: "click->pb-advanced-table#toggleRowSelection",
-                       },
-                     })
-          end
-        end
-      end
-
-      # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
-      def render_row_checkbox
-        if selectable_rows
-          pb_rails("checkbox", props: {
-                     id: "select-row-#{row_id || row.object_id}",
-                     name: "select-row-#{row_id || row.object_id}",
-                     data: {
-                       row_id: row_id || row.object_id.to_s,
-                       action: "click->pb-advanced-table#toggleRowSelection",
-                     },
-                   })
-        end
-      end
-
     private
 
       def custom_renderer_value(column, index)

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -21,7 +21,6 @@ type TableProps = {
     data?: { [key: string]: string },
     dataTable: boolean,
     disableHover?: boolean,
-    headerStyle?: "default" | "borderless" | "floating"
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     outerPadding?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
@@ -47,7 +46,6 @@ const Table = (props: TableProps): React.ReactElement => {
         data = {},
         dataTable = false,
         disableHover = false,
-        headerStyle = "default",
         htmlOptions = {},
         id,
         outerPadding = '',
@@ -87,8 +85,6 @@ const Table = (props: TableProps): React.ReactElement => {
             'sticky-left-column': stickyLeftColumn,
             'sticky-right-column': stickyRightColumn,
             'striped': striped,
-            'header-borderless': headerStyle === 'borderless',
-            'header-floating': headerStyle === 'floating',
             [outerPaddingCss]: outerPadding !== '',
         },
         globalProps(props),

data/app/pb_kits/playbook/pb_table/docs/example.yml

@@ -75,5 +75,3 @@ examples:
     - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
     - table_with_clickable_rows: Table with Clickable Rows
     - table_with_selectable_rows: Table with Selectable Rows
-    - table_with_header_style_borderless: Header Style Borderless
-    - table_with_header_style_floating: Header Style Floating

data/app/pb_kits/playbook/pb_table/docs/index.js

@@ -35,5 +35,3 @@ export { default as TableWithCollapsibleWithNestedRows } from './_table_with_col
 export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
 export { default as TableWithSelectableRows } from './_table_with_selectable_rows.jsx'
 export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
-export { default as TableWithHeaderStyleBorderless } from './_table_with_header_style_borderless.jsx'
-export { default as TableWithHeaderStyleFloating } from './_table_with_header_style_floating.jsx'

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

@@ -14,79 +14,3 @@
     }
   }
 }
-// remove all outward facing borders from header
-.header-borderless > thead,
-.header-borderless > thead > tr,
-.header-borderless > thead > tr > th,
-.header-borderless > .pb_table_thead,
-.header-borderless > .pb_table_thead > .pb_table_tr,
-.header-borderless > .pb_table_thead .pb_table_th {
-  border-top: none !important;
-  border-left: none !important;
-  border-right: none !important;
-}
-
-// remove bottom border (internal to table) on header cells - only light mode needs this redundancy handled likely due to a difference in the base scss and table-dark.scss
-.header-borderless:not(.table-dark) > thead > tr:last-child > th,
-.header-borderless:not(.table-dark) > .pb_table_thead > .pb_table_tr:last-child > .pb_table_th {
-  border-bottom: none !important;
-}
-
-// preserves top rounded corners to header at top of table-card for unnested card
-.header-borderless > thead > tr:first-child > th:first-child,
-.header-borderless > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
-  border-top-left-radius: $border_radius_md !important;
-}
-
-.header-borderless > thead > tr:first-child > th:last-child,
-.header-borderless > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
-  border-top-right-radius: $border_radius_md !important;
-}
-
-// ensures top border is from first row of body to prevent double borders
-.header-borderless > tbody > tr:first-child > td,
-.header-borderless > .pb_table_tbody > .pb_table_tr:first-child > .pb_table_td {
-  border-top: 1px solid $border_light !important;
-}
-
-// floating code - this carries over everything for header-borderless
-.header-floating > thead,
-.header-floating > thead > tr,
-.header-floating > thead > tr > th,
-.header-floating > .pb_table_thead,
-.header-floating > .pb_table_thead > .pb_table_tr,
-.header-floating > .pb_table_thead .pb_table_th {
-  border-top: none !important;
-  border-left: none !important;
-  border-right: none !important;
-}
-
-.header-floating:not(.table-dark) > thead > tr:last-child > th,
-.header-floating:not(.table-dark) > .pb_table_thead > .pb_table_tr:last-child > .pb_table_th {
-  border-bottom: none !important;
-}
-
-.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: $border_radius_md !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: $border_radius_md !important;
-}
-
-.header-floating > tbody > tr:first-child > td,
-.header-floating > .pb_table_tbody > .pb_table_tr:first-child > .pb_table_td {
-  border-top: 1px solid $border_light !important;
-}
-
-// 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; 
-}

data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx

@@ -12,7 +12,6 @@ type TableHeadPropTypes = {
   children: React.ReactNode[] | React.ReactNode;
   className: string;
   data?: { [key: string]: string };
-  headerStyle?: "default" | "borderless" | "floating";
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   tag?: "table" | "div";
@@ -24,7 +23,6 @@ const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
     children,
     className,
     data = {},
-    headerStyle = "default",
     htmlOptions = {},
     id,
     tag = "table",
@@ -33,15 +31,7 @@ const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames(
-    "pb_table_thead", 
-    {
-      "pb_table_thead_borderless": headerStyle === "borderless" || headerStyle === "floating",
-      "pb_table_thead_floating": headerStyle === "floating",
-    },
-    globalProps(props), 
-    className
-  );
+  const classes = classnames("pb_table_thead", globalProps(props), className);
   const isTableTag = tag === "table";
 
   return (

data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx

@@ -12,7 +12,6 @@ type TableHeaderPropTypes = {
   children: React.ReactNode[] | React.ReactNode;
   className: string;
   data?: { [key: string]: string };
-  headerStyle?: "default" | "borderless" | "floating";
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   tag?: "table" | "div";
@@ -25,7 +24,6 @@ const TableHeader = (props: TableHeaderPropTypes): React.ReactElement => {
     children,
     className,
     data = {},
-    headerStyle = "default",
     htmlOptions = {},
     id,
     tag = "table",
@@ -35,15 +33,7 @@ const TableHeader = (props: TableHeaderPropTypes): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames(
-    "pb_table_th", 
-    {
-      "pb_table_thead_borderless": headerStyle === "borderless" || headerStyle === "floating",
-      "pb_table_thead_floating": headerStyle === "floating",
-    },
-    globalProps(props), 
-    className
-  );
+  const classes = classnames("pb_table_th", globalProps(props), className);
   const isTableTag = tag === "table";
 
   return (

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -22,7 +22,6 @@ type TableRowPropTypes = {
   dark?: boolean;
   dragId?: string;
   draggableItem?: boolean;
-  headerStyle?: "default" | "borderless" | "floating";
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   toggleCellId?: string;
@@ -42,7 +41,6 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
     dark = false,
     dragId,
     draggableItem = false,
-    headerStyle = "default",
     htmlOptions = {},
     id,
     toggleCellId,
@@ -62,9 +60,6 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const classes = classnames(
     buildCss("pb_table_row_kit", sideHighlightClass),
     "pb_table_tr",
-    {
-      "pb_table_tr_borderless_header": headerStyle === "borderless",
-    },
     collapsibleRow,
     globalProps(props),
     className