playbook_ui 13.20.0 → 13.21.0.pre.alpha.pbntr220improveexpansionspeed2415

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 89bd4e938528cafc5784b31a33e8164edd9b132e4f63f2ebbf2ba1160b07738f
-  data.tar.gz: b87c8966e25b1b0b6fc2a01b84ae7164436a4f2be860f49c7414f667d1c5d40f
+  metadata.gz: 8bf6aed2f38b429e40629692119203c2c23a074cee5fbb73cc148df89b5749ef
+  data.tar.gz: 2f02146b9ad987ac9913ec8fd6fb2217bcfb12f9cfbdab6a813c04940baf2ca8
 SHA512:
-  metadata.gz: 7991e682deaf82d106bb0e2a29bb029a6299eba736a0c3e85de50366efa998db4f30026c9fcfc3cf4f7c2ac95f2fddaa38a90add59379d7c7b0890e070e8850a
-  data.tar.gz: 6f649c427896f5010b9721ffd3a0e0c9f282f6eb6c65c666cdbd2487aab6132175a7660b7e48bc89cbe1133736ac4a79d9911f053bb481193096f6032220e6c9
+  metadata.gz: 51b79d9f524bcb4181e3a03a0116598a16942f7f38783f574555c65e38b081919cafcaa55ba0241e6480cd03e0b943a120fd2ee28c51dda958d7ebfa2bf4253a
+  data.tar.gz: f9b0e07c9e8b6cde8df519926e0fc86de35a8f2e3b49b1884cb92d675b8a356e36c68abd438bfd91959cfbe853aa7f31603e6c2892775b1a91df668ff436a243

data/app/pb_kits/playbook/index.js

@@ -93,7 +93,7 @@ export { default as StarRating } from './pb_star_rating/_star_rating'
 export { default as StatChange } from './pb_stat_change/_stat_change'
 export { default as StatValue } from './pb_stat_value/_stat_value'
 export { default as Table } from './pb_table/_table'
-export { default as TableRow } from './pb_table/_table_row'
+export { default as TableRow } from './pb_table/subcomponents/_table_row'
 export { default as TextInput } from './pb_text_input/_text_input'
 export { default as Textarea } from './pb_textarea/_textarea'
 export { default as Time } from './pb_time/_time'

data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx

@@ -11,7 +11,12 @@ const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
     backgroundColor: "#E4E8F0",
   }
 
-  return <div style={style} />
+  return (
+    <div 
+        className="collapsible-trail" 
+        style={style} 
+    />
+  )
 }
 
 // Updated function to render multiple trails depending on depth

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -15,6 +15,7 @@ import { DataType } from "../Utilities/types"
 type TableBodyProps = {
   className?: string;
   collapsibleTrail?: boolean
+  dark?: boolean,
   id?: string;
   subRowHeaders?: string[]
 }
@@ -22,6 +23,7 @@ type TableBodyProps = {
 export const TableBody = ({
   className,
   collapsibleTrail = true,
+  dark = false,
   id,
   subRowHeaders,
   ...props

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -10,6 +10,7 @@ import { DataType } from "../Utilities/types"
 type TableHeaderProps = {
   children?: React.ReactNode | React.ReactNode[]
   className?: string
+  dark?: boolean,
   enableSorting?: boolean
   id?: string;
   sortIcon?: string | string[]
@@ -18,6 +19,7 @@ type TableHeaderProps = {
 export const TableHeader = ({
   children,
   className,
+  dark = false,
   enableSorting = false,
   id,
   sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],

data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx

@@ -15,42 +15,27 @@ export const updateExpandAndCollapseState = (
   expanded: Record<string, boolean>,
   targetParent: string
 ) => {
-  const updateExpandedRows: Record<string, boolean> = {}
-  const rows = tableRows.flatRows
-  // Variable checks if all rows in a section have same expansion state or not
-  let isExpansionConsistent = true
-  const areRowsExpanded = new Set<boolean>()
+  const updateExpandedRows: Record<string, boolean> = {};
+  const rows = tableRows.rows;
+
+  let isExpansionConsistent = true;
+  const areRowsExpanded = new Set<boolean>();
 
-  // Update isExpansionConsistent variable
   for (const row of rows) {
-    if (
-      targetParent === undefined
-        ? row.depth === 0
-        : targetParent === row.parentId
-    ) {
-      areRowsExpanded.add(row.getIsExpanded())
-      if (areRowsExpanded.size > 1) {
-        isExpansionConsistent = false
-        break
-      }
-    }
-  }
+    const shouldBeUpdated = targetParent === undefined ? row.depth === 0 : targetParent === row.parentId;
+    
+    if (shouldBeUpdated) {
+      const isExpanded = row.getIsExpanded();
+      areRowsExpanded.add(isExpanded);
 
-  // The if statement runs only for row depth 0, the else statement for the rest
-  if (targetParent === undefined) {
-    rows.forEach(row => {
-      if (row.depth === 0) {
-        updateExpandedRows[row.id] = !isExpansionConsistent
-          ? true
-          : !row.getIsExpanded()
-      }
-    })
-  } else {
-    for (const row of rows) {
-      if (targetParent === row.parentId) {
-        updateExpandedRows[row.id] = !isExpansionConsistent
-          ? true
-          : !row.getIsExpanded()
+      updateExpandedRows[row.id] = !isExpansionConsistent ? true : !isExpanded;
+
+      if (areRowsExpanded.size > 1) {
+        isExpansionConsistent = false;
+        // If expansion inconsistent, ensure all target rows are set to expand
+        for (const key in updateExpandedRows) {
+          updateExpandedRows[key] = true;
+        }
       }
     }
   }
@@ -58,5 +43,5 @@ export const updateExpandAndCollapseState = (
   return filterExpandableRows({
     ...(expanded as ExpandedStateObject),
     ...updateExpandedRows,
-  })
-}
+  });
+};

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

@@ -95,4 +95,49 @@
       border-right: $transparent !important;
     }
   }
+
+  &.dark {
+    .bg-white {
+      background: $bg_dark_card;
+    }
+
+    .bg-silver {
+      background: $bg_dark;
+    }
+
+    .table-header-cells:first-child, td:first-child {
+      box-shadow: 1px 0px 0px 0px $border_dark !important;
+    }
+
+    .collapsible-trail {
+      background-color: $border_dark !important;
+    }
+
+    .sort-button-icon, .header-sort-button > div {
+      color: $white !important;
+    }
+
+    .gray-icon {
+      color:  $text_dk_light !important;
+    }
+
+    .sticky-header {
+      background-color: $bg_dark_card;
+    }
+
+    .loading-toggle-icon,
+    .loading-cell {
+      &::after {
+        background-color: $bg_dark !important;
+        background-image: linear-gradient(
+          to left,
+          $bg_dark 0%,
+          lighten($bg_dark, 1%) 50%,
+          lighten($bg_dark, 2%) 60%,
+          $bg_dark 80%,
+          $bg_dark 100%
+        ) !important;
+      }
+    }
+  }
 }

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

@@ -27,6 +27,7 @@ type AdvancedTableProps = {
   children?: React.ReactNode | React.ReactNode[];
   className?: string;
   columnDefinitions: DataType[];
+  dark?: boolean,
   data?: { [key: string]: string };
   enableToggleExpansion?: "all" | "header" | "none";
   expandedControl?: DataType;
@@ -50,6 +51,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     children,
     className,
     columnDefinitions,
+    dark = false,
     data = {},
     enableToggleExpansion = "header",
     expandedControl,
@@ -189,14 +191,13 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }
   }, [loading, updateLoadingStateRowCount]);
 
-  const handleExpandOrCollapse = (row: Row<DataType>) => {
+  const handleExpandOrCollapse = async (row: Row<DataType>) => {
     onToggleExpansionClick && onToggleExpansionClick(row);
-
+  
     const expandedState = expanded;
     const targetParent = row?.parentId;
-    return setExpanded(
-      updateExpandAndCollapseState(tableRows, expandedState, targetParent)
-    );
+    const updatedRows = await updateExpandAndCollapseState(tableRows, expandedState, targetParent);
+    setExpanded(updatedRows);
   };
 
   const ariaProps = buildAriaProps(aria);
@@ -231,6 +232,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       >
         <Table
             className={`${loading ? "content-loading" : ""}`}
+            dark={dark}
             dataTable
             numberSpacing="tabular"
             responsive="none"

data/app/pb_kits/playbook/pb_date/docs/_date_alignment_swift.md

@@ -1,11 +1,31 @@
 ![date-alignment](https://github.com/powerhome/playbook/assets/92755007/094761cb-5151-4de5-a8e1-f905455c2aca)
 
 ```swift
-
-VStack(spacing: Spacing.small) {
-  PBDate(Date(), variant: .standard, typography: .title4, alignment: .leading)
-  PBDate(Date(), variant: .withIcon(isStandard: true), typography: .title4, iconSize: .x1, alignment: .center)
-  PBDate(Date(), variant: .short, typography: .title4, alignment: .trailing)
+ VStack(spacing: Spacing.small) {
+  HStack {
+    PBDate(
+      Date().makeDate(year: 1995, month: 12, day: 25),
+      variant: .standard,
+      typography: .title4
+    )
+  }
+  .frame(maxWidth: .infinity, alignment: .leading)
+  HStack {
+    PBDate(
+      Date().makeDate(year: 2020, month: 12, day: 25),
+      variant: .withIcon(isStandard: true),
+      typography: .title4,
+      iconSize: .x1
+    )
+  }
+  .frame(maxWidth: .infinity, alignment: .center)
+  HStack {
+    PBDate(
+    Date(),
+    variant: .short,
+    typography: .title4
+   )
+  }
+  .frame(maxWidth: .infinity, alignment: .trailing)
 }
-
 ```

data/app/pb_kits/playbook/pb_date/docs/_date_default_swift.md

@@ -2,15 +2,34 @@
 
 
 ```swift
-
 VStack(alignment: .leading, spacing: Spacing.small) {
-  PBDate(Date(), variant: .short)
-  PBDate(Date(), variant: .dayDate)
-  PBDate(Date(), variant: .standard)
+  PBDate(
+    Date(),
+    variant: .short
+  )
+  PBDate(
+    Date().makeDate(year: 2012, month: 8, day: 3),
+    variant: .standard
+  )
+  PBDate(
+    Date().makeDate(year: 2017, month: 12, day: 3),
+    variant: .dayDate(showYear: true)
+  )
   Spacer()
-  PBDate(Date(), variant: .short, typography: .title4)
-  PBDate(Date(), variant: .dayDate, typography: .title4)
-  PBDate(Date(), variant: .standard, typography: .title4)
+  PBDate(
+    Date(),
+    variant: .short, 
+    typography: .title4
+  )
+  PBDate(
+    Date().makeDate(year: 2012, month: 8, day: 3),
+    variant: .standard, 
+    typography: .title4
+  )
+  PBDate(
+    Date().makeDate(year: 2017, month: 12, day: 3),
+    variant: .dayDate(showYear: true),
+    typography: .title4
+  )
 }
-
 ```

data/app/pb_kits/playbook/pb_message/docs/_description.md

@@ -1 +1 @@
-This multi kit consist of a an avatar, a status, a caption, a body text, and a time stamp. All which can be optional.
+This multi kit consists of a an avatar, a status, a caption, a body text, and a time stamp, all of which are optional.

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -40,6 +40,10 @@
     &[class*="_active"] {
       color: $primary;
       letter-spacing: normal;
+
+      [class*="_icon_right"] {
+        color: $white;
+      }
     }
     &[class*="dark"] {
       [class*="_item_text"],

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

@@ -3,6 +3,13 @@ import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import PbTable from '.'
+import {
+  TableHead,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
+} from "./subcomponents";
 
 type TableProps = {
     aria?: { [key: string]: string },
@@ -105,4 +112,10 @@ const Table = (props: TableProps) => {
     )
 }
 
+Table.Head = TableHead
+Table.Header = TableHeader
+Table.Body = TableBody
+Table.Row = TableRow
+Table.Cell = TableCell
+
 export default Table

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

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import Table from '../_table'
-import TableRow from '../_table_row'
 
 const TableSideHighlight = (props) => {
   return (
@@ -20,7 +19,7 @@ const TableSideHighlight = (props) => {
           </tr>
         </thead>
         <tbody>
-          <TableRow
+          <Table.Row
               sideHighlightColor="product_1_highlight"
               {...props}
           >
@@ -29,8 +28,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="product_2_highlight"
               {...props}
           >
@@ -39,8 +38,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="product_3_highlight"
               {...props}
           >
@@ -49,8 +48,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="none"
               {...props}
           >
@@ -59,7 +58,7 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
+          </Table.Row>
         </tbody>
       </Table>
 
@@ -79,7 +78,7 @@ const TableSideHighlight = (props) => {
           </tr>
         </thead>
         <tbody>
-          <TableRow
+          <Table.Row
               sideHighlightColor="success"
               {...props}
           >
@@ -88,8 +87,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="warning"
               {...props}
           >
@@ -98,8 +97,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="error"
               {...props}
           >
@@ -108,8 +107,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="none"
               {...props}
           >
@@ -118,7 +117,7 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
+          </Table.Row>
         </tbody>
       </Table>
 
@@ -138,7 +137,7 @@ const TableSideHighlight = (props) => {
           </tr>
         </thead>
         <tbody>
-          <TableRow
+          <Table.Row
               sideHighlightColor="category_1"
               {...props}
           >
@@ -147,8 +146,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="category_2"
               {...props}
           >
@@ -157,8 +156,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="category_3"
               {...props}
           >
@@ -167,8 +166,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="none"
               {...props}
           >
@@ -177,7 +176,7 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
+          </Table.Row>
         </tbody>
       </Table>
     </div>

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

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import Table from '../_table'
+
+const TableWithSubcomponents = (props) => {
+  return (
+    <Table
+        size="sm"
+        {...props}
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{'Column 1'}</Table.Header>
+          <Table.Header>{'Column 2'}</Table.Header>
+          <Table.Header>{'Column 3'}</Table.Header>
+          <Table.Header>{'Column 4'}</Table.Header>
+          <Table.Header>{'Column 5'}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default TableWithSubcomponents

data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md

@@ -0,0 +1,7 @@
+You can optionally build your table using our sub-components, which map to their respective html table elements:
+
+`Table.Head` = `thead`
+`Table.Body` = `tbody`
+`Table.Row` = `tr`
+`Table.Header` = `th`
+`Table.Cell` = `td`

data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: { size: "sm", tag:"div" }) do %>
+    <%= pb_rails("table/table_head", props: {tag:"div"}) do %>
+        <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
+            <%= pb_rails("table/table_header", props: { text: "Column 1", tag:"div"}) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 2", tag:"div"}) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 3", tag:"div"}) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 4", tag:"div"}) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 5", tag:"div"}) %>       
+         <% end %>
+    <% end %>
+    <%= pb_rails("table/table_body", props: {tag:"div"}) do %>
+        <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
+        <% end %>
+        <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
+        <% end %>
+        <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
+        <% end %>
+    <% end %>
+<% end %>

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

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import Table from '../_table'
+
+const TableWithSubcomponentsAsDivs = (props) => {
+  return (
+    <Table
+        size="sm"
+        tag="div"
+        {...props}
+    >
+      <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.Header tag="div">{'Column 3'}</Table.Header>
+          <Table.Header tag="div">{'Column 4'}</Table.Header>
+          <Table.Header tag="div">{'Column 5'}</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.Cell tag="div">{'Value 3'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 4'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 5'}</Table.Cell>
+        </Table.Row>
+        <Table.Row tag="div">
+          <Table.Cell tag="div">{'Value 1'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 2'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 3'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 4'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 5'}</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell tag="div">{'Value 1'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 2'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 3'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 4'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 5'}</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default TableWithSubcomponentsAsDivs

data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md

@@ -0,0 +1,3 @@
+Optionally build your table with divs by passing `div` to the `tag` prop of all* your sub-components. 
+
+*NOTE: The `tag` prop defaults to `table`, which returns html elements.  If divs are desired, sub-components must be used and all table elements, including the initial kit call, must use `div` as their `tag` in order for the table to render properly.