playbook_ui 14.16.0.pre.alpha.play1964tablekitheadertextstylefix7091 → 14.16.0.pre.rc.0

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import SelectableList from '../../pb_selectable_list/_selectable_list'
+import { SelectableList } from 'playbook-ui'
 
 const SelectableListDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import SelectableList from '../../pb_selectable_list/_selectable_list'
+import { SelectableList } from 'playbook-ui'
 
 const SelectableListDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <% if enable_drag %>
     <%= pb_rails("draggable", props: {initial_items: object.items}) do %>
       <%= pb_rails("draggable/draggable_container") do %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
+import { Flex, SkeletonLoading } from "playbook-ui"
 
-import Flex from '../../pb_flex/_flex'
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
 
 const SkeletonLoadingBorderRadius = (props) => (
   <Flex justify="evenly">

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
+import { Card, SkeletonLoading } from "playbook-ui"
 
-import Card from '../../pb_card/_card'
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
 
 const SkeletonLoadingColor = (props) => (
   <div>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
+import { SkeletonLoading } from "playbook-ui"
+
 
 const SkeletonLoadingDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx

@@ -1,12 +1,5 @@
 import React, { useState } from 'react';
-
-import Button from '../../pb_button/_button'
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
-import Card from '../../pb_card/_card'
-import Filter from '../../pb_filter/_filter'
-import Flex from '../../pb_flex/_flex'
-import Select from '../../pb_select/_select'
-import TextInput from '../../pb_text_input/_text_input'
+import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
 
 const SortingChangeCallback = (sortOptions) => {
   alert(JSON.stringify(sortOptions[0]))

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
+import { Card, SkeletonLoading } from "playbook-ui"
 
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
-import Card from '../../pb_card/_card'
 
 const SkeletonLoadingHeightWidth = (props) => (
   <div>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
+import { SkeletonLoading } from "playbook-ui"
+
 
 const SkeletonLoadingLayout = (props) => (
   <div>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx

@@ -1,9 +1,5 @@
 import React, { useState } from 'react';
-
-import Button from '../../pb_button/_button'
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
-import Flex from '../../pb_flex/_flex'
-import User from '../../pb_user/_user'
+import { Button, Flex, SkeletonLoading, User } from "playbook-ui";
 
 const SkeletonLoadingUser = (props) => {
   const [isLoading, setIsLoading] = useState(true)

data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
   <% if layout_option == "number" %>
     <% case object.size %>
       <% when "xs", "sm" %>

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import StatChange from '../../pb_stat_change/_stat_change'
+import { StatChange } from 'playbook-ui'
 
 const StatChangeDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import StatChange from '../../pb_stat_change/_stat_change'
+import { StatChange } from 'playbook-ui'
 
 const StatChangeUnit = (props) => {
   return (

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import StatChange from '../../pb_stat_change/_stat_change'
+import { StatChange } from 'playbook-ui'
 
 const StatChangeUnitTwo = (props) => {
   return (

data/app/pb_kits/playbook/pb_stat_change/stat_change.test.js

@@ -19,27 +19,23 @@ test('it renders preset icon', () => {
     render(
       <StatChange
           change="increase"
-          id="preset-icon"
           value="28.4"
       />
     )
 
-    const kit = document.querySelector('#preset-icon')
-    const icon = kit.querySelector(".pb_custom_icon")
-    expect(icon).toBeInTheDocument()
+    const kit = screen.getByLabelText('arrow-up icon')
+    expect(kit).toBeTruthy
 })
 
 test('it renders custom icon', () => {
     render(
       <StatChange
           icon="chart-line-down"
-          id="custom-icon"
           value={6.1}
       />
 
     )
 
-    const kit = document.querySelector('#custom-icon')
-    const icon = kit.querySelector(".pb_custom_icon")
-    expect(icon).toBeInTheDocument()
+    const kit = screen.getByLabelText('chart-line-down icon')
+    expect(kit).toBeTruthy
 })

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/_table_with_clickable_rows.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import Table from '../../pb_table/_table'
-import Icon from '../../pb_icon/_icon'
+import { Table, Icon } from 'playbook-ui'
 
 const TableWithClickableRows = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-import Table from '../../pb_table/_table'
-import Icon from '../../pb_icon/_icon'
-import Card from '../../pb_card/_card'
-import Body from '../../pb_body/_body'
+import { Table, Icon, Body, Card } from 'playbook-ui'
 
 const TableWithCollapsible = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-import Table from '../../pb_table/_table'
-import Icon from '../../pb_icon/_icon'
-import Card from '../../pb_card/_card'
-import Body from '../../pb_body/_body'
+import { Table, Card, Icon, Body } from 'playbook-ui'
 
 const TableWithCollapsibleWithCustomClick = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx

@@ -1,11 +1,5 @@
 import React from 'react'
-
-import Table from '../../pb_table/_table'
-import Icon from '../../pb_icon/_icon'
-import Card from '../../pb_card/_card'
-import Body from '../../pb_body/_body'
-import Image from '../../pb_image/_image'
-import Flex from '../../pb_flex/_flex'
+import { Table, Icon, Card, Body, Image, Flex } from 'playbook-ui'
 
 const TableWithCollapsibleWithCustomContent = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-
-import Table from '../../pb_table/_table'
-import Icon from '../../pb_icon/_icon'
-import Background from '../../pb_background/_background'
+import { Table, Background, Icon } from 'playbook-ui'
 
 const TableWithCollapsibleWithNestedRows = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx

@@ -1,9 +1,5 @@
 import React from 'react'
-
-import Pill from '../../pb_pill/_pill'
-import Background from '../../pb_background/_background'
-import Table from '../../pb_table/_table'
-import Icon from '../../pb_icon/_icon'
+import {Pill, Background, Table, Icon} from "playbook-ui"
 
 const TableWithCollapsibleWithNestedTable = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx

@@ -1,9 +1,5 @@
 import React, { useState } from 'react'
-import Table from '../../pb_table/_table'
-import Image from '../../pb_image/_image'
-import Flex from '../../pb_flex/_flex'
-import Checkbox from '../../pb_checkbox/_checkbox'
-import Button from '../../pb_button/_button'
+import { Table, Checkbox, Image, Flex, Button } from 'playbook-ui'
 
 const TableWithSelectableRows = (props) => {
     const [checkboxes, setCheckboxes] = useState([

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

@@ -6,99 +6,11 @@
   &.table-lg {
     thead, .pb_table_thead {
       tr, .pb_table_tr {
-        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 {
+          @include caption;
           border-bottom: 1px solid $border_light;
         }
       }
     }
   }
 }
-// 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/styles/_striped.scss

@@ -1,7 +1,7 @@
-[class^=pb_table]:not(:has(colgroup)) {
+[class^=pb_table] {
   &.striped {
     tbody, .pb_table_tbody {
-      tr:nth-child(odd):not(.pb_background_kit), .pb_table_tr:nth-child(odd):not(.pb_background_kit) {
+      tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
         background-color: $bg_light;
       }
     }
@@ -10,7 +10,7 @@
   &.dark {
     &.striped {
       tbody, .pb_table_tbody {
-        tr:nth-child(odd):not(.pb_background_kit), .pb_table_tr:nth-child(odd):not(.pb_background_kit) {
+        tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
           background-color: $bg_dark;
         }
       }

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

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

@@ -6,11 +6,21 @@
 
 <%= content_tag(:div, class: responsive_class, 'data-pb-table-wrapper' => true) do %>
   <% if object.tag == "table" %>
-    <%= pb_content_tag(:table) do %>
+    <%= content_tag(:table,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
   <% else %>
-    <%= pb_content_tag do %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
   <% end %>

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

@@ -167,20 +167,3 @@ test("Should have outerPadding class", () => {
   const kit = renderKit(Table, props, { outerPadding: "sm" })
   expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card outer_padding_space_sm table-collapse-sm")
 })
-
-test("when headerStyle is default", () => {
-  const kit = renderKit(Table, props)
-  expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card table-collapse-sm")
-  expect(kit).not.toHaveClass("header-borderless")
-  expect(kit).not.toHaveClass("header-floating")
-})
-
-test("when headerStyle is borderless", () => {
-  const kit = renderKit(Table, props, { headerStyle: "borderless" })
-  expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card header-borderless table-collapse-sm")
-})
-
-test("when headerStyle is floating", () => {
-  const kit = renderKit(Table, props, { headerStyle: "floating" })
-  expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card header-floating table-collapse-sm")
-})

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

@@ -4,12 +4,22 @@
         <%= content.presence %>
       <% end %>
     <% else %>
-      <%= pb_content_tag(:tbody) do %>
+      <%= content_tag(:tbody,
+        aria: object.aria,
+        class: object.classname,
+        data: object.data,
+        id: object.id,
+        **combined_html_options) do %>
         <%= content.presence %>
       <% end %>
     <% end %>
 <% else %>
-    <%= pb_content_tag do %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
 <% end %>

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

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

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

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

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

@@ -1,7 +1,11 @@
 <% if object.tag == "table" %>  
-  <%= pb_content_tag(:th,
+  <%= content_tag(:th,
       colspan: object.colspan,
-      id: "pb-th#{object.id}") do %>
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: "pb-th#{object.id}",
+      **combined_html_options) do %>
     <% unless sorting_style? %>
         <%= content.presence || object.text %>
     <% else %>
@@ -42,7 +46,12 @@
     <% end %>
   <% end %>
 <% else %>
-  <%= pb_content_tag do %>
+  <%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
       <% unless sorting_style? %>
         <%= content.presence || object.text %>
       <% else %>