RubyGems - playbook_ui - Versions diffs - 14.9.0 → 14.10.0.pre.alpha.PBNTR662stickyrightcolumnreact5160 - Mend

playbook_ui 14.9.0 → 14.10.0.pre.alpha.PBNTR662stickyrightcolumnreact5160

Files changed (139) hide show

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

@@ -0,0 +1,108 @@
+import React from 'react'
+import { Table, Card, Icon, Body } from 'playbook-ui'
+const TableWithCollapsibleWithCustomClick = (props) => {
+  const Content = () => {
+    return (
+      <Card
+          borderNone
+          borderRadius="none"
+          padding="md"
+          {...props}
+      >
+        <Body {...props}>Nested content inside a Table Row</Body>
+      </Card>
+    );
+  };
+return (
+      <Table
+          size="sm"
+          {...props}
+      >
+        <Table.Head>
+          <Table.Row>
+            <Table.Header>{'Column 1'}</Table.Header>
+            <Table.Header>{'Column 2'}</Table.Header>
+            <Table.Header>{'Column 3'}</Table.Header>
+            <Table.Header>{'Column 4'}</Table.Header>
+            <Table.Header>{'Column 5'}</Table.Header>
+            <Table.Header>{''}</Table.Header>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row collapsible
+              collapsibleContent={<Content/>}
+              toggleCellId="cell-1"
+              {...props}
+          >
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell cursor="pointer"
+                id="cell-1"
+                textAlign="right"
+            >
+              <Icon
+                  color="primary"
+                  fixedWidth
+                  icon="chevron-down"
+              />
+            </Table.Cell>
+          </Table.Row>
+          <Table.Row collapsible
+              collapsibleContent={<Content/>}
+              toggleCellId="cell-2"
+              {...props}
+          >
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell cursor="pointer"
+                id="cell-2"
+                textAlign="right"
+            >
+              <Icon
+                  color="primary"
+                  fixedWidth
+                  icon="chevron-down"
+              />
+            </Table.Cell>
+          </Table.Row>
+          <Table.Row collapsible
+              collapsibleContent={<Content/>}
+              toggleCellId="cell-3"
+              {...props}
+          >
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell cursor="pointer"
+                id="cell-3"
+                textAlign="right"
+            >
+              <Icon
+                  color="primary"
+                  fixedWidth
+                  icon="chevron-down"
+              />
+            </Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+  )
+}
+export default TableWithCollapsibleWithCustomClick

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggleCellId` prop to pass in the id of the Cell you want to use as the trigger.
2	+ __NOTE__: `toggleCellId` and the id on the Cell you want to use as the trigger MUST be the same.

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

@@ -0,0 +1,94 @@
+import React from 'react'
+import { Table, Icon, Card, Body, Image, Flex } from 'playbook-ui'
+const TableWithCollapsibleWithCustomContent = (props) => {
+  const Content = () => {
+    return (
+      <Card
+          borderNone
+          borderRadius="none"
+          color="light"
+          paddingX="xl"
+          paddingY="md"
+          {...props}
+      >
+         <Body paddingBottom="sm"
+             text="Expanded Custom Layout"
+             {...props}
+         />
+         <Flex justify="between">
+           <Image
+               url="https://via.placeholder.com/150"
+           />
+           <Image
+               url="https://via.placeholder.com/150"
+           />
+           <Image
+               url="https://via.placeholder.com/150"
+           />
+           <Image
+               url="https://via.placeholder.com/150"
+           />
+          </Flex>
+      </Card>
+    );
+  };
+    return (
+    <Table
+        size="sm"
+        {...props}
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{'Column 1'}</Table.Header>
+          <Table.Header>{'Column 2'}</Table.Header>
+          <Table.Header>{'Column 3'}</Table.Header>
+          <Table.Header>{'Column 4'}</Table.Header>
+          <Table.Header>{'Column 5'}</Table.Header>
+          <Table.Header>{''}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row collapsible
+            collapsibleContent={<Content/>}
+            {...props}
+        >
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+          <Table.Cell textAlign="right">{
+            <Icon
+                color="primary"
+                fixedWidth
+                icon="chevron-down"
+            />}
+          </Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+          <Table.Cell>{''}</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+          <Table.Cell>{''}</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+}
+export default TableWithCollapsibleWithCustomContent

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md ADDED Viewed

File without changes

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

@@ -0,0 +1,83 @@
+import React from 'react'
+import { Table, Background, Icon } from 'playbook-ui'
+const TableWithCollapsibleWithNestedRows = (props) => {
+  const Content = () => {
+    return (
+      <Table
+          borderRadius="none"
+          container={false}
+          size="sm"
+          {...props}
+      >
+      <Background tag="tr"
+          {...props}
+      >
+        <Table.Cell>Expanded</Table.Cell>
+        <Table.Cell>Expanded</Table.Cell>
+        <Table.Cell>Expanded</Table.Cell>
+        <Table.Cell>Expanded</Table.Cell>
+        <Table.Cell>Expanded</Table.Cell>
+      </Background>
+      </Table>
+    );
+  };
+    return (
+    <Table
+        size="sm"
+        {...props}
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{'Column 1'}</Table.Header>
+          <Table.Header>{'Column 2'}</Table.Header>
+          <Table.Header>{'Column 3'}</Table.Header>
+          <Table.Header>{'Column 4'}</Table.Header>
+          <Table.Header>{'Column 5'}</Table.Header>
+          <Table.Header>{''}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row collapsible
+            collapsibleContent={<Content/>}
+            collapsibleSideHighlight={false}
+        >
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+          <Table.Cell textAlign="right">{
+            <Icon
+                color="primary"
+                fixedWidth
+                icon="chevron-down"
+            />}
+          </Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+          <Table.Cell>{''}</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+          <Table.Cell>{''}</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+}
+export default TableWithCollapsibleWithNestedRows

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md ADDED Viewed

@@ -0,0 +1,3 @@
+The `collapsibleContent` can display any content, including nested Table Rows.
+Additionally, the `collapsibleSideHighlight` can also be removed by setting it to false if needed. This prop is set to true by default.

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

@@ -0,0 +1,120 @@
+import React from 'react'
+import {Pill, Background, Table, Icon} from "playbook-ui"
+const TableWithCollapsibleWithNestedTable = (props) => {
+  const Content = () => {
+    return (
+        <Table
+            borderRadius="none"
+            container={false}
+            size="sm"
+            {...props}
+        >
+          <Table.Head>
+            <Background
+                tag="tr"
+                {...props}
+            >
+              <Table.Header>{"Alt Header"}</Table.Header>
+              <Table.Header>{"Alt Header"}</Table.Header>
+              <Table.Header>{"Alt Header"}</Table.Header>
+              <Table.Header>{"Alt Header"}</Table.Header>
+            </Background>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>{"Expanded"}</Table.Cell>
+              <Table.Cell>{"Expanded"}</Table.Cell>
+              <Table.Cell>{"Expanded"}</Table.Cell>
+              <Table.Cell>
+                  <Pill text="Pill"
+                      variant="primary"
+                      {...props}
+                  />
+              </Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>{"Expanded"}</Table.Cell>
+              <Table.Cell>{"Expanded"}</Table.Cell>
+              <Table.Cell>{"Expanded"}</Table.Cell>
+              <Table.Cell>
+                  <Pill text="Pill"
+                      variant="primary"
+                      {...props}
+                  />
+              </Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>{"Expanded"}</Table.Cell>
+              <Table.Cell>{"Expanded"}</Table.Cell>
+              <Table.Cell>{"Expanded"}</Table.Cell>
+              <Table.Cell>
+                  <Pill text="Pill"
+                      variant="primary"
+                      {...props}
+                  />
+              </Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+    );
+  };
+    return (
+    <Table
+        size="sm"
+        {...props}
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{'Column 1'}</Table.Header>
+          <Table.Header>{'Column 2'}</Table.Header>
+          <Table.Header>{'Column 3'}</Table.Header>
+          <Table.Header>{'Column 4'}</Table.Header>
+          <Table.Header>{'Column 5'}</Table.Header>
+          <Table.Header>{''}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row collapsible
+            collapsibleContent={<Content/>}
+            collapsibleSideHighlight={false}
+        >
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+          <Table.Cell textAlign="right">{
+            <Icon
+                color="primary"
+                fixedWidth
+                icon="chevron-down"
+            />}
+          </Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+          <Table.Cell>{''}</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+          <Table.Cell>{''}</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+}
+export default TableWithCollapsibleWithNestedTable

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ The `collapsibleContent` can also be used to display nested Tables within each Row.

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

@@ -4,6 +4,7 @@ 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
@@ -33,6 +34,7 @@ examples:
     - table_md: Medium
     - table_lg: Large
     - table_sticky: Sticky Header
+    - table_sticky_left_columns: Sticky Left Column
     - table_alignment_row: Row Alignment
     - table_alignment_column: Cell Alignment
     - table_alignment_shift_row: Row Shift
@@ -55,3 +57,8 @@ 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 CHANGED Viewed

@@ -26,3 +26,8 @@ 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 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 CHANGED Viewed

@@ -1,32 +1,108 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 export default class PbTable extends PbEnhancedElement {
-  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 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);
+          }
         }
       });
+    }
-      // 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])
-        })
-      })
-    })
-  }
-}
+    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);
+      }
+    }
+}

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

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

data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss ADDED Viewed

@@ -0,0 +1,35 @@
+@import "../../tokens/colors";
+.table_collapsible_side_highlight {
+  border-left: 4px solid $primary;
+  &.dark {
+    border-left: 4px solid $active_dark;
+  }
+}
+[class^="pb_table"] {
+  &.table-sm,
+  &.table-md,
+  &.table-lg {
+    &.table-card {
+      tbody,
+      .pb_table_tbody {
+        tr,
+        .pb_table_tr {
+          &.collapsible_table_row {
+            td,
+            .pb_table_td {
+              border-bottom-color: transparent;
+            }
+            &:hover {
+              td,
+              .pb_table_td {
+                border-bottom-color: darken($border_light, 10%);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}