From caf146105a57722fb94861c5b94dad528b0d9239 Mon Sep 17 00:00:00 2001 From: nickamantia Date: Fri, 15 Nov 2024 13:33:46 -0500 Subject: [PATCH 1/6] scroll and sticky are working --- .../app/pb_kits/playbook/pb_table/_table.tsx | 110 ++++++++++++++---- .../docs/_table_sticky_left_columns.jsx | 87 ++++++++++++++ .../playbook/pb_table/docs/example.yml | 1 + .../pb_kits/playbook/pb_table/docs/index.js | 1 + .../playbook/pb_table/styles/_all.scss | 2 + .../playbook/pb_table/styles/_scroll.scss | 4 + .../pb_table/styles/_sticky_columns.scss | 11 ++ 7 files changed, 192 insertions(+), 24 deletions(-) create mode 100644 playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx create mode 100644 playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss create mode 100644 playbook/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss diff --git a/playbook/app/pb_kits/playbook/pb_table/_table.tsx b/playbook/app/pb_kits/playbook/pb_table/_table.tsx index d3bddeb721..49bcf3e724 100755 --- a/playbook/app/pb_kits/playbook/pb_table/_table.tsx +++ b/playbook/app/pb_kits/playbook/pb_table/_table.tsx @@ -4,11 +4,11 @@ import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/pro import { globalProps, GlobalProps } from '../utilities/globalProps' import PbTable from '.' import { - TableHead, - TableHeader, - TableBody, - TableRow, - TableCell, + TableHead, + TableHeader, + TableBody, + TableRow, + TableCell, } from "./subcomponents"; type TableProps = { @@ -28,6 +28,7 @@ type TableProps = { singleLine?: boolean, size?: "sm" | "md" | "lg", sticky?: boolean, + stickyLeftcolumn?: string[], striped?: boolean, tag?: "table" | "div", verticalBorder?: boolean, @@ -51,6 +52,7 @@ const Table = (props: TableProps): React.ReactElement => { singleLine = false, size = 'sm', sticky = false, + stickyLeftcolumn = [], striped = false, tag = 'table', verticalBorder = false, @@ -76,6 +78,7 @@ const Table = (props: TableProps): React.ReactElement => { 'single-line': singleLine, 'no-hover': disableHover, 'sticky-header': sticky, + 'sticky-left-column': stickyLeftcolumn, 'striped': striped, [outerPaddingCss]: outerPadding !== '', }, @@ -85,6 +88,39 @@ const Table = (props: TableProps): React.ReactElement => { className ) + useEffect(() => { + const handleStickyColumns = () => { + let accumulatedWidth = 0; + + stickyLeftcolumn.forEach((colId) => { + const header = document.querySelector(`th[id="${colId}"]`); + const cells = document.querySelectorAll(`td[id="${colId}"]`); + + if (header) { + header.classList.add('sticky'); + header.style.left = `${accumulatedWidth}px`; + + accumulatedWidth += header.offsetWidth; + } + + cells.forEach((cell) => { + cell.classList.add('sticky'); + cell.style.left = `${accumulatedWidth - header.offsetWidth}px`; + }); + }); + }; + + setTimeout(() => { + handleStickyColumns(); + }, 50); + + window.addEventListener('resize', handleStickyColumns); + + return () => { + window.removeEventListener('resize', handleStickyColumns); + }; + }, [stickyLeftcolumn]); + useEffect(() => { const instance = new PbTable() instance.connect() @@ -92,26 +128,52 @@ const Table = (props: TableProps): React.ReactElement => { return ( <> - {isTableTag ? ( - - {children} -
- ) : ( -
- {children} + {responsive === 'scroll' ? ( +
+ {isTableTag ? ( + + {children} +
+ ) : ( +
+ {children} +
+ )}
+ ) : ( + isTableTag ? ( + + {children} +
+ ) : ( +
+ {children} +
+ ) )} ) diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx b/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx new file mode 100644 index 0000000000..8905c75734 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx @@ -0,0 +1,87 @@ +import React from 'react' +import Table from '../_table' + +const TableStickyLeftColumns = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{'Column 1'}{'Column 2'}{'Column 3'}{'Column 4'}{'Column 5'}{'Column 6'}{'Column 7'}{'Column 8'}{'Column 9'}{'Column 10'}{'Column 11'}{'Column 12'}{'Column 13'}{'Column 14'}{'Column 15'}
{'Value 1'}{'Value 2'}{'Value 3'}{'Value 4'}{'Value 5'}{'Value 6'}{'Value 7'}{'Value 8'}{'Value 9'}{'Value 10'}{'Value 11'}{'Value 12'}{'Value 13'}{'Value 14'}{'Value 15'}
{'Value 1'}{'Value 2'}{'Value 3'}{'Value 4'}{'Value 5'}{'Value 6'}{'Value 7'}{'Value 8'}{'Value 9'}{'Value 10'}{'Value 11'}{'Value 12'}{'Value 13'}{'Value 14'}{'Value 15'}
{'Value 1'}{'Value 2'}{'Value 3'}{'Value 4'}{'Value 5'}{'Value 6'}{'Value 7'}{'Value 8'}{'Value 9'}{'Value 10'}{'Value 11'}{'Value 12'}{'Value 13'}{'Value 14'}{'Value 15'}
+ ) +} + +export default TableStickyLeftColumns \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/example.yml b/playbook/app/pb_kits/playbook/pb_table/docs/example.yml index de226297e9..ef4e18e20c 100755 --- a/playbook/app/pb_kits/playbook/pb_table/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_table/docs/example.yml @@ -33,6 +33,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 diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/index.js b/playbook/app/pb_kits/playbook/pb_table/docs/index.js index 9177df3e46..fa0d611648 100755 --- a/playbook/app/pb_kits/playbook/pb_table/docs/index.js +++ b/playbook/app/pb_kits/playbook/pb_table/docs/index.js @@ -25,3 +25,4 @@ export { default as TableDiv } from './_table_div.jsx' export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx' 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' diff --git a/playbook/app/pb_kits/playbook/pb_table/styles/_all.scss b/playbook/app/pb_kits/playbook/pb_table/styles/_all.scss index cbeeeca4e8..1c2a77bdc1 100755 --- a/playbook/app/pb_kits/playbook/pb_table/styles/_all.scss +++ b/playbook/app/pb_kits/playbook/pb_table/styles/_all.scss @@ -20,3 +20,5 @@ @import "table_header"; @import "striped"; @import "outer_padding"; +@import "sticky_columns"; +@import "scroll"; \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss b/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss new file mode 100644 index 0000000000..b1eead69ac --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss @@ -0,0 +1,4 @@ + .table-responsive-scroll { + display: block; + overflow-x: auto; + } diff --git a/playbook/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss b/playbook/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss new file mode 100644 index 0000000000..d7e8d3ce14 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss @@ -0,0 +1,11 @@ +@import "../../tokens/colors"; + +[class^="pb_table"] { + .sticky { + position: sticky !important; + left: 0; + z-index: 1; + background-color: white; + border-right: 1px solid $border_light !important + } +} \ No newline at end of file From de54befabbd54926dbbf9ead3719f944e5fb772c Mon Sep 17 00:00:00 2001 From: nickamantia Date: Mon, 18 Nov 2024 11:18:42 -0500 Subject: [PATCH 2/6] fixinf CI --- playbook/app/pb_kits/playbook/pb_table/_table.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_table/_table.tsx b/playbook/app/pb_kits/playbook/pb_table/_table.tsx index 49bcf3e724..b33db29410 100755 --- a/playbook/app/pb_kits/playbook/pb_table/_table.tsx +++ b/playbook/app/pb_kits/playbook/pb_table/_table.tsx @@ -98,14 +98,14 @@ const Table = (props: TableProps): React.ReactElement => { if (header) { header.classList.add('sticky'); - header.style.left = `${accumulatedWidth}px`; + (header as HTMLElement).style.left = `${accumulatedWidth}px`; - accumulatedWidth += header.offsetWidth; + accumulatedWidth += (header as HTMLElement).offsetWidth; } cells.forEach((cell) => { cell.classList.add('sticky'); - cell.style.left = `${accumulatedWidth - header.offsetWidth}px`; + (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`; }); }); }; From b1d4ca7ab92c9fafd370f954a7bebceef767a0f4 Mon Sep 17 00:00:00 2001 From: nickamantia Date: Wed, 20 Nov 2024 10:34:22 -0500 Subject: [PATCH 3/6] feedback addresses --- .../app/pb_kits/playbook/pb_table/_table.tsx | 29 +++++++++++++++---- .../docs/_table_sticky_left_columns.jsx | 6 ++-- .../docs/_table_sticky_left_columns_react.md | 2 ++ .../pb_table/styles/_sticky_columns.scss | 19 ++++++++---- 4 files changed, 41 insertions(+), 15 deletions(-) create mode 100644 playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md diff --git a/playbook/app/pb_kits/playbook/pb_table/_table.tsx b/playbook/app/pb_kits/playbook/pb_table/_table.tsx index b33db29410..9f0d27d11d 100755 --- a/playbook/app/pb_kits/playbook/pb_table/_table.tsx +++ b/playbook/app/pb_kits/playbook/pb_table/_table.tsx @@ -91,28 +91,45 @@ const Table = (props: TableProps): React.ReactElement => { useEffect(() => { const handleStickyColumns = () => { let accumulatedWidth = 0; - - stickyLeftcolumn.forEach((colId) => { + + 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'); + header.classList.remove('sticky-shadow'); + } else { + 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'); + cell.classList.remove('sticky-shadow'); + } else { + cell.classList.remove('with-border'); + cell.classList.add('sticky-shadow'); + } }); }); }; setTimeout(() => { handleStickyColumns(); - }, 50); + }, 10); window.addEventListener('resize', handleStickyColumns); diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx b/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx index 8905c75734..d4c72f15d3 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx @@ -6,7 +6,7 @@ const TableStickyLeftColumns = () => { @@ -48,7 +48,7 @@ const TableStickyLeftColumns = () => { - + @@ -65,7 +65,7 @@ const TableStickyLeftColumns = () => { - + diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md b/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md new file mode 100644 index 0000000000..754ea75abe --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md @@ -0,0 +1,2 @@ +The `stickyLeftcolumn` take in an array of strings of the column ids you want to be sticky. Make sure to add the corresponding id to the `
{'Value 1'} {'Value 2'}{'Value 3'}{'Value 3'} {'Value 4'} {'Value 5'} {'Value 6'}
{'Value 1'} {'Value 2'}{'Value 3'}{'Value 3'} {'Value 4'} {'Value 5'} {'Value 6'}` and ``. +If you are using the sub-component variant, then you will pass the id to `` and `` \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss b/playbook/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss index d7e8d3ce14..55da8880ea 100644 --- a/playbook/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss +++ b/playbook/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss @@ -2,10 +2,17 @@ [class^="pb_table"] { .sticky { - position: sticky !important; - left: 0; - z-index: 1; - background-color: white; - border-right: 1px solid $border_light !important + position: sticky !important; + left: 0; + z-index: 1; + background-color: white; } -} \ No newline at end of file + + .with-border { + border-right: 1px solid $border_light !important; + } + + .sticky-shadow { + box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important; + } +} From 7f860a37ac4f5a07fd9a9cad09fbb280e2d9181d Mon Sep 17 00:00:00 2001 From: nickamantia Date: Thu, 21 Nov 2024 09:59:13 -0500 Subject: [PATCH 4/6] updated markdown --- .../playbook/pb_table/docs/_table_sticky_left_columns_react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md b/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md index 754ea75abe..74f8819cca 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md @@ -1,2 +1,2 @@ -The `stickyLeftcolumn` take in an array of strings of the column ids you want to be sticky. Make sure to add the corresponding id to the `` and ``. +The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `` and ``. If you are using the sub-component variant, then you will pass the id to `` and `` \ No newline at end of file From 03283bd8a351e9bd5c270b681f627b39705a6306 Mon Sep 17 00:00:00 2001 From: nickamantia Date: Tue, 26 Nov 2024 10:59:49 -0500 Subject: [PATCH 5/6] hiding docs until fully styled --- .../_date_picker_reset_to_default.html.erb | 0 .../pb_date_picker/plugins/resetToDefault.ts | 26 +++++++++++++++++++ .../playbook/pb_table/docs/example.yml | 1 - 3 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_reset_to_default.html.erb create mode 100644 playbook/app/pb_kits/playbook/pb_date_picker/plugins/resetToDefault.ts diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_reset_to_default.html.erb b/playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_reset_to_default.html.erb new file mode 100644 index 0000000000..e69de29bb2 diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/plugins/resetToDefault.ts b/playbook/app/pb_kits/playbook/pb_date_picker/plugins/resetToDefault.ts new file mode 100644 index 0000000000..d5980e48e8 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_date_picker/plugins/resetToDefault.ts @@ -0,0 +1,26 @@ +import PbEnhancedElement from "../../pb_enhanced_element" +const DATE_PICKER_WRAPPER_SELECTOR = "[data-pb-date-picker]" +const DATE_PICKER_DATA_SELECTOR = "[data-pb-date-picker-input]" + +export default class PbDatePicker extends PbEnhancedElement { + static get selector() { + return DATE_PICKER_WRAPPER_SELECTOR; + } + + connect() { + this.handleFormReset() + + } + handleFormReset() { + console.log("hello") + const form = this.element.closest("form") + if (form) { + form.addEventListener("reset", () => { + this.element.querySelector(DATE_PICKER_DATA_SELECTOR)?.setAttribute("value","11/13/1997") + + }) + } + } + + } + \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/example.yml b/playbook/app/pb_kits/playbook/pb_table/docs/example.yml index ef4e18e20c..de226297e9 100755 --- a/playbook/app/pb_kits/playbook/pb_table/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_table/docs/example.yml @@ -33,7 +33,6 @@ 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 From 0cded474b2b042cac9410f61c0cbb4b2fce591bc Mon Sep 17 00:00:00 2001 From: nickamantia Date: Tue, 26 Nov 2024 11:02:02 -0500 Subject: [PATCH 6/6] removed unused files --- .../_date_picker_reset_to_default.html.erb | 0 .../pb_date_picker/plugins/resetToDefault.ts | 26 ------------------- 2 files changed, 26 deletions(-) delete mode 100644 playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_reset_to_default.html.erb delete mode 100644 playbook/app/pb_kits/playbook/pb_date_picker/plugins/resetToDefault.ts diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_reset_to_default.html.erb b/playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_reset_to_default.html.erb deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/plugins/resetToDefault.ts b/playbook/app/pb_kits/playbook/pb_date_picker/plugins/resetToDefault.ts deleted file mode 100644 index d5980e48e8..0000000000 --- a/playbook/app/pb_kits/playbook/pb_date_picker/plugins/resetToDefault.ts +++ /dev/null @@ -1,26 +0,0 @@ -import PbEnhancedElement from "../../pb_enhanced_element" -const DATE_PICKER_WRAPPER_SELECTOR = "[data-pb-date-picker]" -const DATE_PICKER_DATA_SELECTOR = "[data-pb-date-picker-input]" - -export default class PbDatePicker extends PbEnhancedElement { - static get selector() { - return DATE_PICKER_WRAPPER_SELECTOR; - } - - connect() { - this.handleFormReset() - - } - handleFormReset() { - console.log("hello") - const form = this.element.closest("form") - if (form) { - form.addEventListener("reset", () => { - this.element.querySelector(DATE_PICKER_DATA_SELECTOR)?.setAttribute("value","11/13/1997") - - }) - } - } - - } - \ No newline at end of file