playbook_ui 14.10.0.pre.alpha.play16825301 → 14.10.0.pre.rc.0

data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb

@@ -1,6 +1,6 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("body", props: { status: object.status, dark: object.dark }) do %>
-    <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon, dark: object.dark }) if object.returned_icon %>
-    <%= "#{object.value}%" if object.value %>
-  <% end %>
+      <%= pb_rails("body", props: { status: object.status }) do %>
+        <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
+        <%= "#{object.value}%" if object.value %>
+      <% end %>
 <% end %>

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

@@ -28,8 +28,7 @@ type TableProps = {
     singleLine?: boolean,
     size?: "sm" | "md" | "lg",
     sticky?: boolean,
-    stickyLeftColumn?: string[],
-    stickyRightColumn?: string[],
+    stickyLeftcolumn?: string[],
     striped?: boolean,
     tag?: "table" | "div",
     verticalBorder?: boolean,
@@ -53,8 +52,7 @@ const Table = (props: TableProps): React.ReactElement => {
         singleLine = false,
         size = 'sm',
         sticky = false,
-        stickyLeftColumn = [],
-        stickyRightColumn= [],
+        stickyLeftcolumn = [],
         striped = false,
         tag = 'table',
         verticalBorder = false,
@@ -69,7 +67,6 @@ const Table = (props: TableProps): React.ReactElement => {
     const outerPaddingCss = outerPadding ? `outer_padding_${spaceCssName}${outerPadding}` : ''
     const isTableTag = tag === 'table'
     const dynamicInlineProps = globalInlineProps(props)
-    const stickyRightColumnReversed = stickyRightColumn.reverse()
 
     const classNames = classnames(
         'pb_table',
@@ -82,8 +79,7 @@ const Table = (props: TableProps): React.ReactElement => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
-            'sticky-left-column': stickyLeftColumn,
-            'sticky-right-column': stickyRightColumn,
+            'sticky-left-column': stickyLeftcolumn,
             'striped': striped,
             [outerPaddingCss]: outerPadding !== '',
         },
@@ -94,106 +90,54 @@ const Table = (props: TableProps): React.ReactElement => {
     )
 
     useEffect(() => {
-        const handleStickyLeftColumns = () => {
-            if (!stickyLeftColumn.length) return;
+        const handleStickyColumns = () => {
             let accumulatedWidth = 0;
-
-            stickyLeftColumn.forEach((colId, index) => {
-                const isLastColumn = index === stickyLeftColumn.length - 1;
+    
+            stickyLeftcolumn.forEach((colId, index) => {
+                const isLastColumn = index === stickyLeftcolumn.length - 1;
                 const header = document.querySelector(`th[id="${colId}"]`);
                 const cells = document.querySelectorAll(`td[id="${colId}"]`);
-
+    
                 if (header) {
                     header.classList.add('sticky');
                     (header as HTMLElement).style.left = `${accumulatedWidth}px`;
-
+    
                     if (!isLastColumn) {
-                        header.classList.add('with-border-right');
-                        header.classList.remove('sticky-left-shadow');
+                        header.classList.add('with-border');
+                        header.classList.remove('sticky-shadow');
                     } else {
-                        header.classList.remove('with-border-right');
-                        header.classList.add('sticky-left-shadow');
+                        header.classList.remove('with-border');
+                        header.classList.add('sticky-shadow');
                     }
-
+    
                     accumulatedWidth += (header as HTMLElement).offsetWidth;
                 }
-
+    
                 cells.forEach((cell) => {
                     cell.classList.add('sticky');
                     (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
-
-                    if (!isLastColumn) {
-                        cell.classList.add('with-border-right');
-                        cell.classList.remove('sticky-left-shadow');
-                    } else {
-                        cell.classList.remove('with-border-right');
-                        cell.classList.add('sticky-left-shadow');
-                    }
-                });
-            });
-        };
-
-        setTimeout(() => {
-            handleStickyLeftColumns();
-        }, 10);
-
-        window.addEventListener('resize', handleStickyLeftColumns);
-
-        return () => {
-            window.removeEventListener('resize', handleStickyLeftColumns);
-        };
-    }, [stickyLeftColumn]);
-
-    useEffect(() => {
-        const handleStickyRightColumns = () => {
-            if (!stickyRightColumn.length) return;
-            let accumulatedWidth = 0;
-
-            stickyRightColumnReversed.forEach((colId, index) => {
-                const isLastColumn = index === stickyRightColumn.length - 1;
-                const header = document.querySelector(`th[id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[id="${colId}"]`);
-
-                if (header) {
-                    header.classList.add('sticky');
-                    (header as HTMLElement).style.right = `${accumulatedWidth}px`;
-
-                    if (!isLastColumn) {
-                        header.classList.add('with-border-left');
-                        header.classList.remove('sticky-right-shadow');
-                    } else {
-                        header.classList.remove('with-border-left');
-                        header.classList.add('sticky-right-shadow');
-                    }
-
-                    accumulatedWidth += (header as HTMLElement).offsetWidth;
-                }
-
-                cells.forEach((cell) => {
-                    cell.classList.add('sticky');
-                    (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
-
+                    
                     if (!isLastColumn) {
-                        cell.classList.add('with-border-left');
-                        cell.classList.remove('sticky-right-shadow');
+                        cell.classList.add('with-border');
+                        cell.classList.remove('sticky-shadow');
                     } else {
-                        cell.classList.remove('with-border-left');
-                        cell.classList.add('sticky-right-shadow');
+                        cell.classList.remove('with-border');
+                        cell.classList.add('sticky-shadow');
                     }
                 });
             });
         };
 
         setTimeout(() => {
-            handleStickyRightColumns();
+            handleStickyColumns();
         }, 10);
 
-        window.addEventListener('resize', handleStickyRightColumns);
+        window.addEventListener('resize', handleStickyColumns);
 
         return () => {
-            window.removeEventListener('resize', handleStickyRightColumns);
+            window.removeEventListener('resize', handleStickyColumns);
         };
-    }, [stickyRightColumn]);
+    }, [stickyLeftcolumn]);
 
     useEffect(() => {
         const instance = new PbTable()

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

@@ -6,7 +6,7 @@ const TableStickyLeftColumns = () => {
         <Table
             responsive="scroll"
             size="md"
-            stickyLeftColumn={["1", "2", "3"]}
+            stickyLeftcolumn={["1", "2", "3"]}
         >
             <thead>
                 <tr>

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

@@ -1,5 +1,2 @@
 The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
-
-If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
-
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using `stickyLeftColumn` prop.
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`

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

@@ -4,7 +4,6 @@ examples:
     - table_md: Medium
     - table_lg: Large
     - table_sticky: Sticky Header
-    - table_sticky_left_columns: Sticky Left Column
     - table_header: Table Header
     - table_alignment_row_rails: Row Alignment
     - table_alignment_column_rails: Cell Alignment
@@ -34,9 +33,6 @@ examples:
     - table_md: Medium
     - table_lg: Large
     - table_sticky: Sticky Header
-    - table_sticky_left_columns: Sticky Left Column
-    - table_sticky_right_columns: Sticky Right Column
-    - table_sticky_columns: Sticky Left and Right Columns
     - table_alignment_row: Row Alignment
     - table_alignment_column: Cell Alignment
     - table_alignment_shift_row: Row Shift
@@ -59,8 +55,3 @@ examples:
     - table_with_subcomponents: Table with Sub Components (Table Elements)
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
-    - table_with_collapsible: Table with Collapsible
-    - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
-    - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
-    - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
-    - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table

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

@@ -26,10 +26,3 @@ export { default as TableWithSubcomponents } from './_table_with_subcomponents.j
 export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
 export { default as TableOuterPadding } from './_table_outer_padding.jsx'
 export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'
-export { default as TableStickyRightColumns } from './_table_sticky_right_columns.jsx'
-export { default as TableStickyColumns } from './_table_sticky_columns.jsx'
-export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
-export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
-export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
-export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
-export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'

data/app/pb_kits/playbook/pb_table/index.ts

@@ -1,108 +1,32 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTable extends PbEnhancedElement {
-    private stickyLeftColumns: string[] = [];
-    private handleStickyLeftColumnsRef: () => void;
-
-    static get selector(): string {
-      return '.table-responsive-collapse'
-    }
-
-    connect(): void {
-      const tables = document.querySelectorAll('.table-responsive-collapse');
-      // Each Table
-      [].forEach.call(tables, (table: HTMLTableElement) => {
-        // Header Titles
-        const headers: string[] = [];
-        [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
-            const colSpan = header.colSpan
-            for (let i = 0; i < colSpan; i++) {
-              headers.push(header.textContent.replace(/\r?\n|\r/, ''));
-            }
-        });
-        // for each row in tbody
-        [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
-          // for each cell
-          [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
-            // apply the attribute
-            cell.setAttribute('data-title', headers[headerIndex])
-          })
-        })
-      });
-
-      // New sticky columns logic
-      this.initStickyLeftColumns();
-    }
-
-    private initStickyLeftColumns(): void {
-      // Find tables with sticky-left-column class
-      const tables = document.querySelectorAll('.sticky-left-column');
-
-      tables.forEach((table) => {
-        // Extract sticky left column IDs by looking at the component's class
-        const classList = Array.from(table.classList);
-
-        // Look for classes in the format sticky-left-column-{ids}
-        const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-columns-'));
-        if (stickyColumnClass) {
-          // Extract the IDs from the class name
-          this.stickyLeftColumns = stickyColumnClass
-              .replace('sticky-columns-', '')
-              .split('-');
-
-          if (this.stickyLeftColumns.length > 0) {
-            setTimeout(() => {
-              this.handleStickyLeftColumnsRef = this.handleStickyLeftColumns.bind(this);
-              this.handleStickyLeftColumns();
-              window.addEventListener('resize', this.handleStickyLeftColumnsRef);
-            }, 10);
-          }
+  static get selector(): string {
+    return '.table-responsive-collapse'
+  }
+
+  connect(): void {
+    const tables = document.querySelectorAll('.table-responsive-collapse');
+
+    // Each Table
+    [].forEach.call(tables, (table: HTMLTableElement) => {
+      // Header Titles
+      const headers: string[] = [];
+      [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
+        const colSpan = header.colSpan
+        for (let i = 0; i < colSpan; i++) {
+          headers.push(header.textContent.replace(/\r?\n|\r/, ''));
         }
       });
-    }
-
-    private handleStickyLeftColumns(): void {
-      let accumulatedWidth = 0;
 
-      this.stickyLeftColumns.forEach((colId, index) => {
-        const isLastColumn = index === this.stickyLeftColumns.length - 1;
-        const header = document.querySelector(`th[id="${colId}"]`);
-        const cells = document.querySelectorAll(`td[id="${colId}"]`);
-
-        if (header) {
-          header.classList.add('sticky');
-          (header as HTMLElement).style.left = `${accumulatedWidth}px`;
-
-          if (!isLastColumn) {
-            header.classList.add('with-border-right');
-            header.classList.remove('sticky-left-shadow');
-          } else {
-            header.classList.remove('with-border-right');
-            header.classList.add('sticky-left-shadow');
-          }
-
-          accumulatedWidth += (header as HTMLElement).offsetWidth;
-        }
-
-        cells.forEach((cell) => {
-          cell.classList.add('sticky');
-          (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
-
-          if (!isLastColumn) {
-            cell.classList.add('with-border-right');
-            cell.classList.remove('sticky-left-shadow');
-          } else {
-            cell.classList.remove('with-border-right');
-            cell.classList.add('sticky-left-shadow');
-          }
-        });
-      });
-    }
-
-    // Cleanup method to remove event listener
-    disconnect(): void {
-      if (this.handleStickyLeftColumnsRef) {
-        window.removeEventListener('resize', this.handleStickyLeftColumnsRef);
-      }
-    }
-}
+      // for each row in tbody
+      [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
+        // for each cell
+        [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
+          // apply the attribute
+          cell.setAttribute('data-title', headers[headerIndex])
+        })
+      })
+    })
+  }
+}

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

@@ -21,5 +21,4 @@
 @import "striped";
 @import "outer_padding";
 @import "sticky_columns";
-@import "scroll";
-@import "collapsible";
+@import "scroll";

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

@@ -1,65 +1,4 @@
-@import "../../tokens/screen_sizes";
-
-.table-responsive-scroll {
-    display: block;
-    overflow-x: scroll;
-
-    // hides duplicate scroll bar for those that see two (byproduct of repeated table-responsive-scroll class
-    // hides outer scroll bar in chrome and safari
-    &:not(.table-responsive-scroll .table-responsive-scroll) {
-        &::-webkit-scrollbar {
-            height: 0px;
-        }
-    }
-    // hides outer scroll bar in firefox
-    @supports (scrollbar-width: none) {
-        scrollbar-width: none;
-        .pb_table {
-            overflow-x: auto;
-            scrollbar-width: auto;
-        }
-    }
-    // ensures visible inner scroll bar can scroll
-    .pb_table {
+    .table-responsive-scroll {
+        display: block;
         overflow-x: auto;
     }
-
-    // Responsive Styles
-    @media (max-width: 1600px) {
-        &[class*="table-responsive-scroll"] {
-            border-radius: 4px;
-            box-shadow: 1px 0 0 0px $border_light,
-                        -1px 0 0 0px $border_light
-        }
-
-        &[class^=pb_table].table-sm.table-card thead tr th:first-child,
-        &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
-            border-left-width: 0px;
-        }
-
-        &[class^=pb_table].table-md.table-card thead tr th:first-child,
-        &[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:first-child {
-            border-left-width: 0px;
-        }
-
-        &[class^=pb_table].table-lg.table-card thead tr th:first-child,
-        &[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:first-child {
-            border-left-width: 0px;
-        }
-
-        &[class^=pb_table].table-sm.table-card thead tr th:last-child,
-        &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
-            border-right-width: 0px;
-        }
-
-        &[class^=pb_table].table-md.table-card thead tr th:last-child,
-        &[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:last-child {
-            border-right-width: 0px;
-        }
-
-        &[class^=pb_table].table-lg.table-card thead tr th:last-child,
-        &[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:last-child {
-            border-right-width: 0px;
-        }
-    }
-}

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

@@ -3,29 +3,16 @@
 [class^="pb_table"] {
     .sticky {
         position: sticky !important;
+        left: 0;
         z-index: 1;
         background-color: white;
     }
 
-    // For use with sticky left columns
-    .sticky-left-shadow {
-        box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
-        left: 0;
-    }
-
-    .with-border-right {
+    .with-border {
         border-right: 1px solid $border_light !important;
-        left: 0;
-    }
-
-    // For use with sticky right columns
-    .sticky-right-shadow {
-        box-shadow: -4px 0 10px rgba(60, 106, 172, 0.16) !important;
-        right: 0;
     }
 
-    .with-border-left {
-        border-left: 1px solid $border_light !important;
-        right: 0;
+    .sticky-shadow {
+        box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
     }
 }

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -7,21 +7,14 @@ import {
   buildHtmlProps,
 } from "../../utilities/props";
 import { globalProps } from "../../utilities/globalProps";
-import Collapsible from "../../pb_collapsible/_collapsible";
-import useCollapsible from "../../pb_collapsible/useCollapsible";
 
 type TableRowPropTypes = {
   aria?: { [key: string]: string };
   children: React.ReactNode[] | React.ReactNode;
   className: string;
-  collapsible?: boolean;
-  collapsibleContent?: React.ReactNode[] | React.ReactNode;
-  collapsibleSideHighlight?: boolean;
   data?: { [key: string]: string };
-  dark?: boolean;
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
-  toggleCellId?: string;
   sideHighlightColor: string;
   tag?: "table" | "div";
 };
@@ -30,15 +23,10 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,
-    collapsible,
-    collapsibleContent,
-    collapsibleSideHighlight = true,
     className,
     data = {},
-    dark = false,
     htmlOptions = {},
     id,
-    toggleCellId,
     sideHighlightColor = "none",
     tag = "table",
   } = props;
@@ -48,110 +36,17 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const htmlProps = buildHtmlProps(htmlOptions);
   const sideHighlightClass =
     sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null;
-  
-  const [isCollapsed, setIsCollapsed] = useCollapsible(true);
-
-  const collapsibleRow = collapsible && isCollapsed === true ? "collapsible_table_row" : null;
   const classes = classnames(
     buildCss("pb_table_row_kit", sideHighlightClass),
     "pb_table_tr",
-    collapsibleRow,
     globalProps(props),
     className
   );
   const isTableTag = tag === "table";
 
-  // const [isCollapsed, setIsCollapsed] = useCollapsible(true);
-
-  const colSpan = React.Children.count(children);
-
-  const handleRowClick = (event: React.MouseEvent) => {
-    if (toggleCellId) {
-      const target = event.target as HTMLElement;
-      const clickedCell = target.closest(`#${toggleCellId}`);
-      const isIconClick =
-      target instanceof SVGElement &&
-      (target.matches("svg.pb_custom_icon") || target.closest("svg.pb_custom_icon"));
-
-        if (clickedCell || isIconClick) { 
-      setIsCollapsed(!isCollapsed);
-      }
-    } else {
-      setIsCollapsed(!isCollapsed);
-    }
-  };
-    
   return (
     <>
-      {collapsible ? (
-        isTableTag ? (
-          <>
-            <tr
-                {...ariaProps}
-                {...dataProps}
-                {...htmlProps}
-                className={classes}
-                id={id}
-                onClick={(e)=>handleRowClick(e)}
-                style={{ cursor: toggleCellId ? "default" : "pointer" }}
-            >
-              {children}
-            </tr>
-            <tr>
-              <Collapsible
-                  collapsed={isCollapsed}
-                  dark={dark}
-                  htmlOptions={{ colSpan: colSpan }}
-                  padding="none"
-                  tag="td"
-              >
-                <tr/>
-                <Collapsible.Content 
-                    className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
-                    dark={dark}
-                    margin="none"
-                    padding="none"
-                >
-                 {collapsibleContent}
-                </Collapsible.Content>
-              </Collapsible>
-            </tr>
-          </>
-        ) : (
-          <>
-            <div
-                {...ariaProps}
-                {...dataProps}
-                {...htmlProps}
-                className={classes}
-                id={id}
-                onClick={handleRowClick}
-                style={{ cursor: "pointer" }}
-            >
-              {children}
-            </div>
-            <tr>
-              <Collapsible
-                  collapsed={isCollapsed}
-                  dark={dark}
-                  htmlOptions={{ colSpan: colSpan }}
-                  padding="none"
-                  tag="td"
-              >
-                <tr/>
-                <Collapsible.Content 
-                    className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
-                    dark={dark}
-                    margin="none"
-                    padding="none"
-                >
-                 {collapsibleContent}
-                </Collapsible.Content>
-              </Collapsible>
-            </tr>
-          </>
-        )
-      ) : isTableTag ? (
+      {isTableTag ? (
         <tr
             {...ariaProps}
             {...dataProps}

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

@@ -1,10 +1,4 @@
-<% if object.responsive_classname %>
-  <% responsive_class = object.responsive_classname %>
-<% else %>
-  <% responsive_class = nil %>
-<% end %>
-
-<%= content_tag(:div, class: responsive_class) do %>
+<%= content_tag(:div) do %>
   <% if object.tag == "table" %>
     <%= content_tag(:table,
       aria: object.aria,
@@ -24,4 +18,4 @@
       <%= content.presence %>
     <% end %>
   <% end %>
-<% end %>
+<% end %>