playbook_ui 13.19.0.pre.alpha.play1141iconkitusinglibrary2264 → 13.19.0.pre.alpha.play1174fixconfimationtoastmobilebug2305

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dc85d46bc740674b47dbae257e9c81833befa30e371132c6b8c666e5b9085d10
-  data.tar.gz: e5f9fddaf77380e589222c5a5a5b7d4f6113a3b972daf02d8b5a5a2428056111
+  metadata.gz: 627646a36323dec23447929cde628bff93ea62a9b440e90bfd541dc2c10d0f62
+  data.tar.gz: 72a6fa94171482b9cf39da6a7745c8184cfa1bd966e2e1671d91d47a30229c9d
 SHA512:
-  metadata.gz: 873f1d7fd3362e9e8825e9565864de562f7df6a3867f872f34e937ad494595ff9741534192c545f28673e0ce2f6790483eb4a059fc733393dfe1342663f95a59
-  data.tar.gz: 0b5450fc7b8d3311f2d1ae1d6f1923d3aaee4c4c5267daab6080e535fa88dec66695131ea87e28f95f8ee20cfd7bd6e8891e4c902b96421dfbd4a6de30d6f113
+  metadata.gz: b4e1e46f4be920c62cac1294efcacdc5e81de8209b6561c03b8824f3e5955ee139f56af3c1b82434ff131efa4a3d5b0e007eb5697a36449f236c4b06f1664bdb
+  data.tar.gz: 49a740f3432cf59dc36f660448a1dff773afec0d18714c53ce7f550cf2d448b9929ce2f51c46465088be72acaa7990a6672526c3bed62ddbd4b3cbd8657ca10a

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

@@ -20,7 +20,7 @@ import AdvancedTableContext from "./Context/AdvancedTableContext";
 import { TableHeader } from "./SubKits/TableHeader";
 import { TableBody } from "./SubKits/TableBody";
 
-import { DataType, ExpandedStateObject } from "./Utilities/types";
+import { DataType } from "./Utilities/types";
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string };
@@ -80,7 +80,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     ? expandedControl.onChange
     : setLocalExpanded;
 
-  const columnHelper = createColumnHelper<DataType>();
+  const columnHelper = createColumnHelper();
 
   //Create cells for first columns
   const createCellFunction = (cellAccessors: string[]) => {
@@ -163,7 +163,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     data: loading ? Array(loadingStateRowCount).fill({}) : tableData,
     columns,
     onExpandedChange: setExpanded,
-    getSubRows: (row) => row.children,
+    getSubRows: (row: DataType) => row.children,
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -192,7 +192,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const handleExpandOrCollapse = (row: Row<DataType>) => {
     onToggleExpansionClick && onToggleExpansionClick(row);
 
-    const expandedState = expanded as ExpandedStateObject;
+    const expandedState = expanded;
     const targetParent = row?.parentId;
     return setExpanded(
       updateExpandAndCollapseState(tableRows, expandedState, targetParent)

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss

@@ -56,6 +56,14 @@ $confirmation_toast_colors: (
       transform: translateX(-50%);
     }
 
+    @media only screen and (max-width: 600px) {
+      &.center {
+      left: 5%;
+      right: 5%;
+      transform: translateX(-0%);
+      }
+    }
+
     &.right {
       left: auto;
       right: $space_md;

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb

@@ -1,5 +1,36 @@
+<%= pb_rails("button", props: { text: "Multiline Example", variant: "primary", data: { toast: "#toast-top-center-multi" } }) %>
+
 <%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "toast-to-hide",
+  closeable: true,
+  id: "toast-top-center-multi",
   multi_line: true,
-  text: "Scan to Assign Selected Items. Click here to generate report",
+  text: "Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.",
   status: "tip",
+  vertical: "top",
+  horizontal: "center"
 }) %>
+
+<script type="text/javascript">
+  const alltoasts = document.queryselectorall(".toast-to-hide")
+  const allbuttons = document.queryselectorall("button[data-toast]")
+
+  const hidealltoasts = () => {
+    alltoasts.foreach((toast) => {
+      toast.style.display = "none"
+    })
+  }
+
+  hidealltoasts()
+
+  allbuttons.foreach((button) => {
+    button.onclick = () => {
+      hidealltoasts()
+      let toast = document.queryselector(button.getattribute("data-toast"))
+
+      if (toast) {
+        toast.style.display = "flex"
+      }
+    }
+  })
+</script>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx

@@ -1,18 +1,52 @@
-import React from 'react'
 
+import React, { useState } from 'react'
+
+import Button from '../../pb_button/_button'
 import FixedConfirmationToast from '../_fixed_confirmation_toast'
 
-const FixedConfirmationToastMultiLine = (props) => {
+const FixedConfirmationToastPositions = (props) => {
+  const [state, setState] = useState({
+    open: false,
+    vertical: 'top',
+    horizontal: 'center',
+  })
+
+  const { vertical, horizontal, open } = state
+
+  const handleClick = (newState) => () => {
+    setState({ open: true, ...newState })
+  }
+
+  const handleClose = () => {
+    setState({ ...state, open: false })
+  }
+
   return (
     <div>
+      <Button
+          onClick={handleClick({
+            horizontal: 'center',
+            open: true,
+            vertical: 'top',
+          })}
+          text="Multiline Example"
+          variant="primary"
+          {...props}
+      />
+      {' '}
       <FixedConfirmationToast
+          closeable
+          horizontal={horizontal}
           multiLine
+          onClose={handleClose}
+          open={open}
           status="tip"
-          text="Scan to Assign Selected Items. Click here to generate report"
+          text={`Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.`}
+          vertical={vertical}
           {...props}
       />
     </div>
   )
 }
 
-export default FixedConfirmationToastMultiLine
+export default FixedConfirmationToastPositions

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

@@ -5,67 +5,60 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 import PbTable from '.'
 
 type TableProps = {
-  aria?: { [key: string]: string },
-  children: React.ReactNode[] | React.ReactNode,
-  className: string,
-  collapse?: "sm" | "md" | "lg",
-  container?: boolean,
-  dark?: boolean,
-  data?: { [key: string]: string },
-  dataTable: boolean,
-  disableHover?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string,
-  responsive?: "collapse" | "scroll" | "none",
-  singleLine?: boolean,
-  size?: "sm" | "md" | "lg",
-  sticky?: boolean,
-  striped?: boolean,
-  verticalBorder?: boolean,
+    aria?: { [key: string]: string },
+    children: React.ReactNode[] | React.ReactNode,
+    className: string,
+    collapse?: "sm" | "md" | "lg",
+    container?: boolean,
+    dark?: boolean,
+    data?: { [key: string]: string },
+    dataTable: boolean,
+    disableHover?: boolean,
+    htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
+    id?: string,
+    responsive?: "collapse" | "scroll" | "none",
+    singleLine?: boolean,
+    size?: "sm" | "md" | "lg",
+    sticky?: boolean,
+    striped?: boolean,
+    tag?: "table" | "div",
+    verticalBorder?: boolean,
 } & GlobalProps
 
 const Table = (props: TableProps) => {
-  const {
-    aria = {},
-    children,
-    className,
-    collapse = 'sm',
-    container = true,
-    dark,
-    data = {},
-    dataTable = false,
-    disableHover = false,
-    htmlOptions = {},
-    id,
-    responsive = 'collapse',
-    singleLine = false,
-    size = 'sm',
-    sticky = false,
-    striped = false,
-    verticalBorder = false,
-  } = props
+    const {
+        aria = {},
+        children,
+        className,
+        collapse = 'sm',
+        container = true,
+        dark,
+        data = {},
+        dataTable = false,
+        disableHover = false,
+        htmlOptions = {},
+        id,
+        responsive = 'collapse',
+        singleLine = false,
+        size = 'sm',
+        sticky = false,
+        striped = false,
+        tag = 'table',
+        verticalBorder = false,
+    } = props
 
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
-  const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
-  const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
+    const ariaProps = buildAriaProps(aria)
+    const dataProps = buildDataProps(data)
+    const htmlProps = buildHtmlProps(htmlOptions)
+    const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
+    const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
+    const isTableTag = tag === 'table'
 
-  useEffect(() => {
-    const instance = new PbTable()
-    instance.connect()
-  }, [])
-
-  return (
-    <table
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classnames(
-          'pb_table',
-          `table-${size}`,
-          `table-responsive-${responsive}`,
-          {
+    const classNames = classnames(
+        'pb_table',
+        `table-${size}`,
+        `table-responsive-${responsive}`,
+        {
             'table-card': container,
             'table-dark': dark,
             'data_table': dataTable,
@@ -73,17 +66,43 @@ const Table = (props: TableProps) => {
             'no-hover': disableHover,
             'sticky-header': sticky,
             'striped': striped,
-          },
-          globalProps(props),
-          tableCollapseCss,
-          verticalBorderCss,
-          className
-        )}
-        id={id}
-    >
-        {children}
-    </table>
-  )
+        },
+        globalProps(props),
+        tableCollapseCss,
+        verticalBorderCss,
+        className
+    )
+
+    useEffect(() => {
+        const instance = new PbTable()
+        instance.connect()
+    }, [])
+
+    return (
+        <>
+            {isTableTag ? (
+                <table
+                    {...ariaProps}
+                    {...dataProps}
+                    {...htmlProps}
+                    className={classNames}
+                    id={id}
+                >
+                    {children}
+                </table>
+            ) : (
+                <div
+                    {...ariaProps}
+                    {...dataProps}
+                    {...htmlProps}
+                    className={classNames}
+                    id={id}
+                >
+                    {children}
+                </div>
+            )}
+        </>
+    )
 }
 
 export default Table

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

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: { size: "sm", tag: "div" }) do %>
+  <div class="pb_table_thead">
+    <div class="pb_table_tr">
+      <div class="pb_table_th">Column 1</div>
+      <div class="pb_table_th">Column 2</div>
+      <div class="pb_table_th">Column 3</div>
+      <div class="pb_table_th">Column 4</div>
+      <div class="pb_table_th">Column 5</div>
+    </div>
+  </div>
+  <div class="pb_table_tbody">
+    <div class="pb_table_tr">
+      <div class="pb_table_td">Value 1</div>
+      <div class="pb_table_td">Value 2</div>
+      <div class="pb_table_td">Value 3</div>
+      <div class="pb_table_td">Value 4</div>
+      <div class="pb_table_td">Value 5</div>
+    </div>
+    <div class="pb_table_tr">
+      <div class="pb_table_td">Value 1</div>
+      <div class="pb_table_td">Value 2</div>
+      <div class="pb_table_td">Value 3</div>
+      <div class="pb_table_td">Value 4</div>
+      <div class="pb_table_td">Value 5</div>
+    </div>
+    <div class="pb_table_tr">
+      <div class="pb_table_td">Value 1</div>
+      <div class="pb_table_td">Value 2</div>
+      <div class="pb_table_td">Value 3</div>
+      <div class="pb_table_td">Value 4</div>
+      <div class="pb_table_td">Value 5</div>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,47 @@
+import React from 'react'
+import Table from '../_table'
+
+const TableDiv = (props) => {
+  return (
+    <Table
+        size="sm"
+        tag="div"
+        {...props}
+    >
+      <div className="pb_table_thead">
+        <div className="pb_table_tr">
+          <div className="pb_table_th">{'Column 1'}</div>
+          <div className="pb_table_th">{'Column 2'}</div>
+          <div className="pb_table_th">{'Column 3'}</div>
+          <div className="pb_table_th">{'Column 4'}</div>
+          <div className="pb_table_th">{'Column 5'}</div>
+        </div>
+      </div>
+      <div className="pb_table_tbody">
+        <div className="pb_table_tr">
+          <div className="pb_table_td">{'Value 1'}</div>
+          <div className="pb_table_td">{'Value 2'}</div>
+          <div className="pb_table_td">{'Value 3'}</div>
+          <div className="pb_table_td">{'Value 4'}</div>
+          <div className="pb_table_td">{'Value 5'}</div>
+        </div>
+        <div className="pb_table_tr">
+          <div className="pb_table_td">{'Value 1'}</div>
+          <div className="pb_table_td">{'Value 2'}</div>
+          <div className="pb_table_td">{'Value 3'}</div>
+          <div className="pb_table_td">{'Value 4'}</div>
+          <div className="pb_table_td">{'Value 5'}</div>
+        </div>
+        <div className="pb_table_tr">
+          <div className="pb_table_td">{'Value 1'}</div>
+          <div className="pb_table_td">{'Value 2'}</div>
+          <div className="pb_table_td">{'Value 3'}</div>
+          <div className="pb_table_td">{'Value 4'}</div>
+          <div className="pb_table_td">{'Value 5'}</div>
+        </div>
+      </div>
+    </Table>
+  )
+}
+
+export default TableDiv

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

@@ -1,5 +1,6 @@
 examples:
   rails:
+    # - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
@@ -26,6 +27,7 @@ examples:
     - table_striped: Striped Table
 
   react:
+    # - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large

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

@@ -21,3 +21,4 @@ export { default as TableAlignmentShiftData } from './_table_alignment_shift_dat
 export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
 export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
 export { default as TableStriped } from './_table_striped.jsx'
+export { default as TableDiv } from './_table_div.jsx'

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

@@ -2,9 +2,9 @@
   &.table-sm,
   &.table-md,
   &.table-lg {
-    tbody {
-      tr {
-        td {
+    tbody, .pb_table_tbody {
+      tr, .pb_table_tr {
+        td, .pb_table_td {
           font-size: $default-font-size;
         }
       }

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

@@ -10,21 +10,21 @@
       width: 100%;
       background: none !important;
 
-      thead {
-        tr {
+      thead, .pb_table_thead {
+        tr, .pb_table_tr {
           left: $offscreen;
           position: absolute;
           top: $offscreen;
 
-          th {
+          th, .pb_table_th {
             display: block;
             visibility: visible;
           }
         }
       }
-      tbody {
-        tr {
-          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, .pb_table_td {
               &:first-child {
                 margin-top: $space-xs !important;
               }
@@ -74,9 +74,9 @@
       &.table-card {
         background: none !important;
 
-        tbody {
-          tr {
-            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 {
-            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 {
-            tr {
-              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/_headers.scss

@@ -4,9 +4,9 @@
   &.table-sm,
   &.table-md,
   &.table-lg {
-    thead {
-      tr {
-        th {
+    thead, .pb_table_thead {
+      tr, .pb_table_tr {
+        th, .pb_table_th {
           @include caption;
           border-bottom: 1px solid $border_light;
         }

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

@@ -9,17 +9,17 @@ $border_hover_color_dark: lighten($border_dark, 5%);
   &.table-lg {
     &:not(.no-hover) {
       border-collapse: collapse;
-      tbody {
-        tr {
+      tbody, .pb_table_tbody {
+        tr, .pb_table_tr {
           box-shadow: 0 0 0 $white;
           transition: box-shadow $transition-speed ease;
-          td {
+          td, .pb_table_td {
             border-top-color: transparent;
             border-top-width: 0;
             transition: all $transition-speed ease;
           }
           @media (hover:hover) {
-            td {
+            td, .pb_table_td {
               position: relative;
               &:after {
                 transition: background-color $transition-speed ease, height $transition-speed ease;
@@ -41,7 +41,7 @@ $border_hover_color_dark: lighten($border_dark, 5%);
             }
             &:hover {
               box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
-              td {
+              td, .pb_table_td {
                 border-color: darken($border_light, 10%);
                 border-top-width: 0;
                 border-top-color: transparent;
@@ -57,9 +57,9 @@ $border_hover_color_dark: lighten($border_dark, 5%);
       }
       &.table-card {
         border-collapse: separate;
-        tbody {
-          tr {
-            td {
+        tbody, .pb_table_tbody {
+          tr, .pb_table_tr {
+            td, .pb_table_td {
               &:first-child {
                 border-left-width: 1px;
               }
@@ -72,12 +72,12 @@ $border_hover_color_dark: lighten($border_dark, 5%);
       }
 
       &.dark  {
-        tbody {
-          tr {
+        tbody, .pb_table_tbody {
+          tr, .pb_table_tr {
             @media (hover:hover) {
               &:hover {
                 box-shadow: 0 2px 10px 0 $shadow_dark;
-                td {
+                td, .pb_table_td {
                   border-top-width: 0;
                   border-top-color: transparent;
                   border-color: $border_hover_color_dark !important;

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

@@ -10,21 +10,21 @@
       width: 100%;
       background: none !important;
 
-      thead {
-        tr {
+      thead, .pb_table_thead {
+        tr, .pb_table_tr {
           left: $offscreen;
           position: absolute;
           top: $offscreen;
 
-          th {
+          th, .pb_table_th {
             display: block;
             visibility: visible;
           }
         }
       }
-      tbody {
-        tr {
-          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, .pb_table_td {
               &:first-child {
                 margin-top: $space-xs !important;
               }
@@ -74,9 +74,9 @@
       &.table-card {
         background: none !important;
 
-        tbody {
-          tr {
-            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 {
-            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 {
-            tr {
-              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/_mobile_collapse.scss

@@ -10,21 +10,21 @@
       width: 100%;
       background: none !important;
 
-      thead {
-        tr {
+      thead, .pb_table_thead {
+        tr, .pb_table_tr {
           left: $offscreen;
           position: absolute;
           top: $offscreen;
 
-          th {
+          th, .pb_table_th {
             display: block;
             visibility: visible;
           }
         }
       }
-      tbody {
-        tr {
-          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, .pb_table_td {
               &:first-child {
                 margin-top: $space-xs !important;
               }
@@ -74,9 +74,9 @@
       &.table-card {
         background: none !important;
 
-        tbody {
-          tr {
-            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 {
-            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 {
-            tr {
-              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/_reset.scss

@@ -6,9 +6,9 @@
     background-color: unset;
     background: unset;
 
-    thead {
-      tr {
-        th {
+    thead, .pb_table_thead {
+      tr, .pb_table_tr {
+        th, .pb_table_th {
           text-align: left;
         }
       }

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

@@ -8,11 +8,11 @@ $pb_table_row_kit_side_highlight_colors: map-merge(map-merge($status_colors, $pr
 }
 
 [class^=pb_table] {
-  tbody {
+  tbody, .pb_table_tbody {
     [class^=pb_table_row_kit] {
       @each $color_name, $color_value in $pb_table_row_kit_side_highlight_colors {
         &[class*=_side_highlight_#{$color_name}] {
-          td {
+          td, .pb_table_td {
             &:first-child {
               @include pb_table_row_kit_side_highlight($color_value);
             }

data/app/pb_kits/playbook/pb_table/styles/_single-line.scss

@@ -4,9 +4,9 @@
     max-width: 100vw;
     table-layout: fixed;
 
-    tbody {
-      tr {
-        td {
+    tbody, .pb_table_tbody {
+      tr, .pb_table_tr {
+        td, .pb_table_td {
           white-space: nowrap;
           text-overflow: ellipsis;
 
@@ -20,7 +20,7 @@
             display: block !important;
           }
 
-          br {
+          br, .pb_table_br {
             content:' ' !important;
 
             &::after {

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

@@ -2,7 +2,7 @@
 
 [class^="pb_table"] {
   &.sticky-header {
-    thead {
+    thead, .pb_table_thead {
       background: $white;
       position: sticky;
       top: 0;
@@ -12,7 +12,7 @@
 
   &.dark {
     &.sticky-header {
-      thead {
+      thead, .pb_table_thead {
         background: $bg_dark;
         position: sticky;
         top: 0;

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

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

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

@@ -1,12 +1,19 @@
 @import "../../tokens/colors";
 
 [class^=pb_table] {
+  display: table;
+
   @each $name, $value in $cell-pad-list {
     &.#{$name} {
       width: 100%;
-      thead {
-        tr {
-          th {
+      thead, .pb_table_thead {
+        display: table-header-group;
+
+        tr, .pb_table_tr {
+          display: table-row;
+
+          th, .pb_table_th {
+            display: table-cell;
             padding: $cell-pad-md $cell-gutter;
 
             &:first-child {
@@ -18,9 +25,14 @@
           }
         }
       }
-      tbody {
-        tr {
-          td {
+      tbody, .pb_table_tbody {
+        display: table-row-group;
+
+        tr, .pb_table_tr {
+          display: table-row;
+
+          td, .pb_table_td {
+            display: table-cell;
             border-color: $border_light;
             border-style: solid;
             border-width: 0 0 1px;

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

@@ -7,9 +7,9 @@
       border-spacing: 0;
       background: $white;
 
-      thead {
-        tr {
-          th {
+      thead, .pb_table_thead {
+        tr, .pb_table_tr {
+          th, .pb_table_th {
             border-color: $border_light;
             border-style: solid;
             border-width: 1px 0 1px 0;
@@ -26,9 +26,9 @@
         }
       }
 
-      tbody {
-        tr {
-          td {
+      tbody, .pb_table_tbody {
+        tr, .pb_table_tr {
+          td, .pb_table_td {
             border-color: $border_light;
             border-style: solid;
             border-width: 0 0 1px 0;
@@ -42,7 +42,7 @@
           }
 
           &:last-child {
-            td {
+            td, .pb_table_td {
               border-width: 0 0 1px 0;
 
               &:first-child {

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 {
-        tr {
+      thead, .pb_table_thead {
+        tr, .pb_table_tr {
           border-color: $border_dark !important;
 
-          th {
+          th, .pb_table_th {
             border-color: $border_dark !important;
             color: $text_dk_light;
           }
         }
       }
-      tbody {
-        tr {
+      tbody, .pb_table_tbody {
+        tr, .pb_table_tr {
           border-color: $border_dark;
           transition: none !important;
 
-          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, .pb_table_td {
               border-top-width: 0 !important;
             }
           }
@@ -54,9 +54,9 @@ $table-dark-card-bg: $card_dark;
         &.table-dark {
           background: none !important;
 
-          tbody {
-            tr {
-              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 {
-          tr {
-            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, .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, .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, .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 {
-        tr {
+      thead, .pb_table_thead {
+        tr, .pb_table_tr {
           left: $offscreen;
           position: absolute;
           top: $offscreen;
 
-          th {
+          th, .pb_table_th {
             display: block;
             visibility: visible;
           }
         }
       }
-      tbody {
-        tr {
-          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, .pb_table_td {
               &:first-child {
                 margin-top: $space-xs !important;
               }
@@ -74,9 +74,9 @@
       &.table-card {
         background: none !important;
 
-        tbody {
-          tr {
-            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 {
-            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 {
-            tr {
-              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,13 +1,12 @@
 [class^=pb_table] {
   &.vertical-border {
-    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 {
-        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

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

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

@@ -27,6 +27,9 @@ module Playbook
                              default: false
       prop :striped, type: Playbook::Props::Boolean,
                      default: false
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[table div],
+                 default: "table"
 
       def classname
         generate_classname(

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "13.19.0"
-  VERSION = "13.19.0.pre.alpha.play1141iconkitusinglibrary2264"
+  VERSION = "13.19.0.pre.alpha.play1174fixconfimationtoastmobilebug2305"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.19.0.pre.alpha.play1141iconkitusinglibrary2264
+  version: 13.19.0.pre.alpha.play1174fixconfimationtoastmobilebug2305
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-03-01 00:00:00.000000000 Z
+date: 2024-03-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -2245,6 +2245,8 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_data_table.md
 - app/pb_kits/playbook/pb_table/docs/_table_disable_hover.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_disable_hover.jsx
+- app/pb_kits/playbook/pb_table/docs/_table_div.html.erb
+- app/pb_kits/playbook/pb_table/docs/_table_div.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_header.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_header.md
 - app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb