playbook_ui 13.19.0.pre.alpha.PBNTR207tabledivsupport2245 → 13.19.0.pre.alpha.PBNTR211tablekitsubcomponentsreact2318

data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss

@@ -7,22 +7,22 @@ $table-dark-card-bg: $card_dark;
   &.table-md,
   &.table-lg {
     &.table-dark {
-      thead, .thead {
-        tr, .tr {
+      thead, .pb_table_thead {
+        tr, .pb_table_tr {
           border-color: $border_dark !important;
 
-          th, .th {
+          th, .pb_table_th {
             border-color: $border_dark !important;
             color: $text_dk_light;
           }
         }
       }
-      tbody, .tbody {
-        tr, .tr {
+      tbody, .pb_table_tbody {
+        tr, .pb_table_tr {
           border-color: $border_dark;
           transition: none !important;
 
-          td, .td {
+          td, .pb_table_td {
             border-color: $border_dark !important;
             color: $white;
 
@@ -31,7 +31,7 @@ $table-dark-card-bg: $card_dark;
             }
           }
           &:first-child {
-            td, .td {
+            td, .pb_table_td {
               border-top-width: 0 !important;
             }
           }
@@ -54,9 +54,9 @@ $table-dark-card-bg: $card_dark;
         &.table-dark {
           background: none !important;
 
-          tbody, .tbody {
-            tr, .tr {
-              td, .td {
+          tbody, .pb_table_tbody {
+            tr, .pb_table_tr {
+              td, .pb_table_td {
                 background: $table-dark-card-bg !important;
               }
             }
@@ -64,15 +64,15 @@ $table-dark-card-bg: $card_dark;
         }
       }
       &.table-dark {
-        tbody, .tbody {
-          tr, .tr {
-            td, .td {
+        tbody, .pb_table_tbody {
+          tr, .pb_table_tr {
+            td, .pb_table_td {
               &:first-child {
                 border-top-color: $border_dark !important;
               }
             }
             &:first-child {
-              td, .td {
+              td, .pb_table_td {
                 border-top-width: 1px !important;
               }
             }

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

@@ -10,7 +10,7 @@ $text_align_values: (
 );
 
 [class^=pb_table] {
-  thead, .thead {
+  thead, .pb_table_thead {
     [class^=pb_table_header_kit] {
       @each $align_name, $align_value in $text_align_values {
         &[class*=_align_#{$align_name}] {
@@ -32,7 +32,7 @@ $text_align_values: (
 }
 
 [class^=pb_table] {
-  thead, .thead {
+  thead, .pb_table_thead {
     [class^=pb_th_active] {
       color: $primary !important;
     }

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

@@ -10,21 +10,21 @@
       width: 100%;
       background: none !important;
 
-      thead, .thead {
-        tr, .tr {
+      thead, .pb_table_thead {
+        tr, .pb_table_tr {
           left: $offscreen;
           position: absolute;
           top: $offscreen;
 
-          th, .th {
+          th, .pb_table_th {
             display: block;
             visibility: visible;
           }
         }
       }
-      tbody, .tbody {
-        tr, .tr {
-          td, .td {
+      tbody, .pb_table_tbody {
+        tr, .pb_table_tr {
+          td, .pb_table_td {
             display: block;
             visibility: visible;
             border-left-width: 1px !important;
@@ -63,7 +63,7 @@
           }
 
           &:first-child {
-            td, .td {
+            td, .pb_table_td {
               &:first-child {
                 margin-top: $space-xs !important;
               }
@@ -74,9 +74,9 @@
       &.table-card {
         background: none !important;
 
-        tbody, .tbody {
-          tr, .tr {
-            td, .td {
+        tbody, .pb_table_tbody {
+          tr, .pb_table_tr {
+            td, .pb_table_td {
               background: $white !important;
               border-left-width: 1px !important;
               border-right-width: 1px !important;
@@ -98,8 +98,8 @@
       }
       @media (hover:hover) {
         &:hover {
-          tbody, .tbody {
-            tr, .tr {
+          tbody, .pb_table_tbody {
+            tr, .pb_table_tr {
               box-shadow: 0 0 0 $white !important;
             }
           }
@@ -108,9 +108,9 @@
       // reset the first and last to normalize
       @each $name, $value in $cell-pad-list {
         &.#{$name} {
-          tbody, .tbody {
-            tr, .tr {
-              td, .td {
+          tbody, .pb_table_tbody {
+            tr, .pb_table_tr {
+              td, .pb_table_td {
                 &:first-child,
                 &:last-child {
                   padding: $value $cell-gutter !important;

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

@@ -1,12 +1,12 @@
 [class^=pb_table] {
   &.vertical-border {
-    td, th, .td, .th {
+    td, th, .pb_table_td, .pb_table_th {
       border-right: 1px solid $border_light !important;
     }
 
     @media screen and (min-width: $screen-xs-min) {
-      tr:hover, .tr:hover {
-        td:last-child, .td:last-child {
+      tr:hover, .pb_table_tr:hover {
+        td:last-child, .pb_table_td:last-child {
           border-right-color: darken($border_light, 10%) !important;
         }
       }

data/app/pb_kits/playbook/pb_table/table.html.erb

@@ -13,9 +13,7 @@
       class: object.classname,
       data: object.data,
       id: object.id) do %>
-      <%= content_tag(:div, class: "div-table") do %>
-        <%= content.presence %>
-      <% end %>
+      <%= content.presence %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/table.test.js

@@ -1,7 +1,58 @@
-import { ensureAccessible, renderKit } from "../utilities/test-utils"
+import React from "react";
+import { ensureAccessible, renderKit, render, screen } from "../utilities/test-utils"
 
 import Table from "./_table"
 
+const DivsTable = () => {
+  return (
+    <>
+      <Table 
+          data={{testid: "table"}}
+          size="sm" 
+          tag="div"
+      >
+        <Table.Head tag="div">
+          <Table.Row tag="div">
+            <Table.Header tag="div">{"Column 1"}</Table.Header>
+            <Table.Header tag="div">{"Column 2"}</Table.Header>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body tag="div">
+          <Table.Row tag="div">
+            <Table.Cell tag="div">{"Value 1"}</Table.Cell>
+            <Table.Cell tag="div">{"Value 2"}</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    </>
+  );
+};
+
+const TableTagTable = () => {
+  return (
+    <>
+      <Table 
+          data={{testid: "table"}}
+          size="sm" 
+      >
+        <Table.Head>
+          <Table.Row>
+            <Table.Header>{"Column 1"}</Table.Header>
+            <Table.Header>{"Column 2"}</Table.Header>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>{"Value 1"}</Table.Cell>
+            <Table.Cell>{"Value 2"}</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    </>
+  );
+};
+
+
 const props = {
   data: { testid: "table" },
   sticky: false
@@ -20,3 +71,93 @@ test("when striped is true", () => {
   const kit = renderKit(Table, props, { striped: true })
   expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card striped table-collapse-sm")
 })
+
+test("Renders Table.Head subkit for Div Table", () => {
+  render (<DivsTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_thead")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("DIV")
+})
+
+test("Renders Table.Header subkit for Div Table", () => {
+  render (<DivsTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_th")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("DIV")
+})
+
+test("Renders Table.Body subkit for Div Table", () => {
+  render (<DivsTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_tbody")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("DIV")
+})
+
+test("Renders Table.Row subkit for Div Table", () => {
+  render (<DivsTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_tr")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("DIV")
+})
+
+test("Renders Table.Cell subkit for Div Table", () => {
+  render (<DivsTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_td")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("DIV")
+})
+
+test("Renders Table.Head subkit for HTML Table elements Table", () => {
+  render (<TableTagTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_thead")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("THEAD")
+})
+
+test("Renders Table.Header subkit for HTML Table elements Table", () => {
+  render (<TableTagTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_th")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("TH")
+})
+
+test("Renders Table.Body subkit for HTML Table elements Table", () => {
+  render (<TableTagTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_tbody")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("TBODY")
+})
+
+test("Renders Table.Row subkit for HTML Table elements Table", () => {
+  render (<TableTagTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_tr")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("TR")
+})
+
+test("Renders Table.Cell subkit for HTML Table elements Table", () => {
+  render (<TableTagTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_td")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("TD")
+})

data/app/pb_kits/playbook/pb_table/table_body.html.erb

@@ -0,0 +1,17 @@
+<% if object.tag == "table" %>
+    <%= content_tag(:tbody,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence %>
+    <% end %>
+<% else %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence %>
+    <% end %>
+<% end %>

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTable
+    class TableBody < Playbook::KitBase
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[table div],
+                 default: "table"
+
+      def classname
+        generate_classname("pb_table_tbody")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_table/table_cell.html.erb

@@ -0,0 +1,17 @@
+<% if object.tag == "table" %>
+    <%= content_tag(:td,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence || object.text %>
+    <% end %>
+<% else %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence || object.text %>
+    <% end %>
+<% end %>

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTable
+    class TableCell < Playbook::KitBase
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[table div],
+                 default: "table"
+      prop :text, type: Playbook::Props::String,
+                  default: ""
+
+      def classname
+        generate_classname("pb_table_td")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_table/table_head.html.erb

@@ -0,0 +1,17 @@
+<% if object.tag == "table" %>
+    <%= content_tag(:thead,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence %>
+    <% end %>
+<% else %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence %>
+    <% end %>
+<% end %>

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTable
+    class TableHead < Playbook::KitBase
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[table div],
+                 default: "table"
+
+      def classname
+        generate_classname("pb_table_thead")
+      end
+    end
+  end
+end

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

@@ -1,47 +1,57 @@
-<%= content_tag(:th,
-    colspan: object.colspan,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: "pb-th#{object.id}" ) do %>
-  <% unless sorting_style? %>
-    <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
-      <%= content.presence || object.text %>
-    <% end %>
-  <% else %>
-    <%= link_to next_link, style: link_style do %>
-      <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_link" }) do %>
+<% if object.tag == "table" %>  
+  <%= content_tag(:th,
+      colspan: object.colspan,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: "pb-th#{object.id}" ) do %>
+    <% unless sorting_style? %>
+      <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
         <%= content.presence || object.text %>
-          <% if sorting_style? %>
-            <%= pb_rails("icon", props: { icon: object.sort_icon(active_item[:direction], active_item[:active]),
-                                          fixed_width: true,
-                                          classname: active_item.any? ? "pb_th_active" : "",
-                                          padding_left: "xs" }) %>
+      <% end %>
+    <% else %>
+      <%= link_to next_link, style: link_style do %>
+        <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_link" }) do %>
+          <%= content.presence || object.text %>
+            <% if sorting_style? %>
+              <%= pb_rails("icon", props: { icon: object.sort_icon(active_item[:direction], active_item[:active]),
+                                            fixed_width: true,
+                                            classname: active_item.any? ? "pb_th_active" : "",
+                                            padding_left: "xs" }) %>
+          <% end %>
         <% end %>
       <% end %>
-    <% end %>
-    <% if use_dropdown_select %>
-      <%= pb_rails("popover", props: { classname: "pb_filter_sort_menu",
-                                      close_on_click: "outside",
-                                      trigger_element_id: "pb-th#{object.id}",
-                                      tooltip_id: "sort-filter-btn-tooltip#{object.id}",
-                                      position: object.placement ,
-                                      padding: 'none'}) do %>
-        <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
-          <% object.sort_items.each do |sort_item| %>
-            <% item = active_or_first_item(sort_items_for(sort_item)) %>
-            <%= pb_rails("nav/item", props: {
-              text: item[:item],
-              link: next_link(sort_item: sort_item),
-              highlighted_border: false,
-              padding: "xs",
-              icon_right: sort_icon(item[:direction], item[:active]),
-              active: item[:active],
-              classname: "header_nav_item"
-            }) %>
+      <% if use_dropdown_select %>
+        <%= pb_rails("popover", props: { classname: "pb_filter_sort_menu",
+                                        close_on_click: "outside",
+                                        trigger_element_id: "pb-th#{object.id}",
+                                        tooltip_id: "sort-filter-btn-tooltip#{object.id}",
+                                        position: object.placement ,
+                                        padding: 'none'}) do %>
+          <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
+            <% object.sort_items.each do |sort_item| %>
+              <% item = active_or_first_item(sort_items_for(sort_item)) %>
+              <%= pb_rails("nav/item", props: {
+                text: item[:item],
+                link: next_link(sort_item: sort_item),
+                highlighted_border: false,
+                padding: "xs",
+                icon_right: sort_icon(item[:direction], item[:active]),
+                active: item[:active],
+                classname: "header_nav_item"
+              }) %>
+            <% end %>
           <% end %>
         <% end %>
       <% end %>
     <% end %>
   <% end %>
-<% end %>
+<% else %>
+  <%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+      <%= content.presence || object.text %>
+  <% end %>
+<% end %>

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

@@ -23,9 +23,16 @@ module Playbook
                   default: ""
       prop :sort_dropdown, type: Playbook::Props::Boolean,
                            default: false
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[table div],
+                 default: "table"
 
       def classname
-        generate_classname("pb_table_header_kit", align_class)
+        generate_classname("pb_table_header_kit", align_class) + tag_class
+      end
+
+      def tag_class
+        " pb_table_th"
       end
 
       def align_class

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

@@ -1,7 +1,17 @@
-<%= content_tag(:tr,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id) do %>
-  <%= content.presence %>
-<% end %>
+<% if object.tag == "table" %>
+    <%= content_tag(:tr,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence %>
+    <% end %>
+<% else %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence %>
+    <% end %>
+<% end %>

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

@@ -5,14 +5,21 @@ module Playbook
     class TableRow < Playbook::KitBase
       prop :side_highlight_color, type: Playbook::Props::String,
                                   default: "none"
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[table div],
+                 default: "table"
 
       def classname
-        generate_classname("pb_table_row_kit", side_highlight_class)
+        generate_classname("pb_table_row_kit", side_highlight_class) + tag_class
       end
 
       def side_highlight_class
         side_highlight_color.present? ? "side_highlight_#{side_highlight_color}" : nil
       end
+
+      def tag_class
+        " pb_table_tr"
+      end
     end
   end
 end