playbook_ui 13.19.0.pre.alpha.play1141iconkitusinglibrary2264 → 13.19.0.pre.alpha.play1174fixconfimationtoastmobilebug2306

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dc85d46bc740674b47dbae257e9c81833befa30e371132c6b8c666e5b9085d10
-  data.tar.gz: e5f9fddaf77380e589222c5a5a5b7d4f6113a3b972daf02d8b5a5a2428056111
+  metadata.gz: 10050594b83a89e2dd77aa948fb31cd71c1bc292dc5ccbda469728d89ede9747
+  data.tar.gz: e74efd0e2d006ef868d070109c3f099ecf86068e59bd8d9fb55c2b9db8bc91ff
 SHA512:
-  metadata.gz: 873f1d7fd3362e9e8825e9565864de562f7df6a3867f872f34e937ad494595ff9741534192c545f28673e0ce2f6790483eb4a059fc733393dfe1342663f95a59
-  data.tar.gz: 0b5450fc7b8d3311f2d1ae1d6f1923d3aaee4c4c5267daab6080e535fa88dec66695131ea87e28f95f8ee20cfd7bd6e8891e4c902b96421dfbd4a6de30d6f113
+  metadata.gz: 412c6be317738582dec9a87b3c16a1278292c71f23e23441f8f81f9857ffae29ccd30ade66ddc910e4d5f8d4ba99bbde5946e822bbf35280aff771d229ed4530
+  data.tar.gz: 214b373b93c39b439ba7a335b8928daecb56a6c377d7f9ea0f7ac92c0082cdb5b8fde80287ad43015f21b9e40b690f60cb1bec2fbaeae3fa03bcdef629e832cc

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;
@@ -83,8 +91,11 @@ $confirmation_toast_colors: (
       &[class*=_multi_line] .pb_fixed_confirmation_toast_text {
         color: $white;
         margin: 0 $space_md 0 $space_md;
-        max-width: 100%;
-        white-space: break-spaces;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical; 
+        white-space: normal;
       }
     }
   }

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.play1174fixconfimationtoastmobilebug2306"
 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.play1174fixconfimationtoastmobilebug2306
 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