playbook_ui 13.19.0.pre.alpha.PBNTR211tablekitsubcomponentsreact2318 → 13.19.0.pre.alpha.play1141iconkitusinglibrary2264

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

@@ -1,58 +1,7 @@
-import React from "react";
-import { ensureAccessible, renderKit, render, screen } from "../utilities/test-utils"
+import { ensureAccessible, renderKit } 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
@@ -71,93 +20,3 @@ 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_header.html.erb

@@ -1,57 +1,47 @@
-<% 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_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 %>
         <%= 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 %>
-          <%= 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 %>
+          <% 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 %>
-      <% 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 %>
+    <% 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 %>
-<% else %>
-  <%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id) do %>
-      <%= content.presence || object.text %>
-  <% end %>
-<% end %>
+<% end %>

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

@@ -23,16 +23,9 @@ 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) + tag_class
-      end
-
-      def tag_class
-        " pb_table_th"
+        generate_classname("pb_table_header_kit", align_class)
       end
 
       def align_class

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

@@ -1,17 +1,7 @@
-<% 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 %>
+<%= content_tag(:tr,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+  <%= content.presence %>
+<% end %>

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

@@ -5,21 +5,14 @@ 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) + tag_class
+        generate_classname("pb_table_row_kit", side_highlight_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