From e26a60f05a674881136f0abc23ee4278ae8a1722 Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Fri, 20 Dec 2024 13:38:12 -0600 Subject: [PATCH] [PBNTR-716] Table kit: "Sticky Left Column" variant styling - React and Rails (#4027) **What does this PR do?** A clear and concise description with your runway ticket url. [PBNTR-716](https://runway.powerhrg.com/backlog_items/PBNTR-716) As a Playbook dev, I want to add a dynamically rendering shadow to the right column of the "Sticky Left Column" doc example, So that we can ensure continuity in our table kit design. #### Checklist: - [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [x] **DEPLOY** I have added the `milano` label to show I'm ready for a review. --- .../pb_advanced_table/_advanced_table.scss | 6 +- .../pb_advanced_table/_advanced_table.tsx | 2 +- .../pb_advanced_table/advanced_table.test.jsx | 4 +- .../app/pb_kits/playbook/pb_table/_table.tsx | 12 +-- .../docs/_table_sticky_left_columns.html.erb | 78 +++++++------------ .../docs/_table_sticky_left_columns_rails.md | 1 + .../playbook/pb_table/docs/example.yml | 2 + .../app/pb_kits/playbook/pb_table/index.ts | 8 +- .../playbook/pb_table/styles/_scroll.scss | 31 +++++++- .../pb_table/styles/_sticky_columns.scss | 1 - .../pb_kits/playbook/pb_table/table.html.erb | 8 +- .../app/pb_kits/playbook/pb_table/table.rb | 4 + 12 files changed, 89 insertions(+), 68 deletions(-) create mode 100644 playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss index 6473aafe9b..9fa0f5c4a4 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss @@ -120,7 +120,7 @@ // Responsive Styles @media only screen and (max-width: $screen-xl-min) { - &[class*="table-responsive-scroll"] { + &[class*="advanced-table-responsive-scroll"] { border-radius: 4px; box-shadow: 1px 0 0 0px $border_light, -1px 0 0 0px $border_light; @@ -158,7 +158,7 @@ } } @media only screen and (min-width: $screen-xl-min) { - &[class*="table-responsive-scroll"] { + &[class*="advanced-table-responsive-scroll"] { overflow-x: visible; } } @@ -208,7 +208,7 @@ } // Dark Mode Responsive Styles @media only screen and (max-width: $screen-xl-min) { - &[class*="table-responsive-scroll"] { + &[class*="advanced-table-responsive-scroll"] { border-radius: 4px; box-shadow: 1px 0 0 0px $border_dark, -1px 0 0 0px $border_dark; diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx index 51a8184a9a..62f25a883d 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx @@ -240,7 +240,7 @@ const AdvancedTable = (props: AdvancedTableProps) => { const htmlProps = buildHtmlProps(htmlOptions) const classes = classnames( buildCss("pb_advanced_table"), - `table-responsive-${responsive}`, + `advanced-table-responsive-${responsive}`, globalProps(props), className ) diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx b/playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx index 7165f218d4..dbfbcecbde 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx @@ -468,7 +468,7 @@ test("responsive prop functions as expected", () => { ) const kit = screen.getByTestId(testId) - expect(kit).toHaveClass("pb_advanced_table table-responsive-scroll") + expect(kit).toHaveClass("pb_advanced_table advanced-table-responsive-scroll") }) test("responsive none prop functions as expected", () => { @@ -483,7 +483,7 @@ test("responsive none prop functions as expected", () => { ) const kit = screen.getByTestId(testId) - expect(kit).toHaveClass("pb_advanced_table table-responsive-none") + expect(kit).toHaveClass("pb_advanced_table advanced-table-responsive-none") }) test("customRenderer prop functions as expected", () => { diff --git a/playbook/app/pb_kits/playbook/pb_table/_table.tsx b/playbook/app/pb_kits/playbook/pb_table/_table.tsx index 35e9f6d923..2ada123f1d 100755 --- a/playbook/app/pb_kits/playbook/pb_table/_table.tsx +++ b/playbook/app/pb_kits/playbook/pb_table/_table.tsx @@ -92,16 +92,16 @@ const Table = (props: TableProps): React.ReactElement => { useEffect(() => { const handleStickyColumns = () => { let accumulatedWidth = 0; - + 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'); @@ -109,14 +109,14 @@ const Table = (props: TableProps): React.ReactElement => { 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'); diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb index 45e96e5406..4a13b3a3f0 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb @@ -25,16 +25,16 @@ Value 3 Value 4 Value 5 - Column 6 - Column 7 - Column 8 - Column 9 - Column 10 - Column 11 - Column 12 - Column 13 - Column 14 - Column 15 + Value 6 + Value 7 + Value 8 + Value 9 + Value 10 + Value 11 + Value 12 + Value 13 + Value 14 + Value 15 @@ -43,16 +43,16 @@ Value 3 Value 4 Value 5 - Column 6 - Column 7 - Column 8 - Column 9 - Column 10 - Column 11 - Column 12 - Column 13 - Column 14 - Column 15 + Value 6 + Value 7 + Value 8 + Value 9 + Value 10 + Value 11 + Value 12 + Value 13 + Value 14 + Value 15 @@ -61,34 +61,16 @@ Value 3 Value 4 Value 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 - Column 6 - Column 7 - Column 8 - Column 9 - Column 10 - Column 11 - Column 12 - Column 13 - Column 14 - Column 15 + Value 6 + Value 7 + Value 8 + Value 9 + Value 10 + Value 11 + Value 12 + Value 13 + Value 14 + Value 15 diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md b/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md new file mode 100644 index 0000000000..8a2f86bc56 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md @@ -0,0 +1 @@ +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 ``. 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 201661314d..74f44bf963 100755 --- a/playbook/app/pb_kits/playbook/pb_table/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_table/docs/example.yml @@ -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 diff --git a/playbook/app/pb_kits/playbook/pb_table/index.ts b/playbook/app/pb_kits/playbook/pb_table/index.ts index 8f9c810bd9..9022dcf07b 100644 --- a/playbook/app/pb_kits/playbook/pb_table/index.ts +++ b/playbook/app/pb_kits/playbook/pb_table/index.ts @@ -51,9 +51,11 @@ export default class PbTable extends PbEnhancedElement { .split('-'); if (this.stickyLeftColumns.length > 0) { - this.handleStickyColumnsRef = this.handleStickyColumns.bind(this); - this.handleStickyColumns(); - window.addEventListener('resize', this.handleStickyColumnsRef); + setTimeout(() => { + this.handleStickyColumnsRef = this.handleStickyColumns.bind(this); + this.handleStickyColumns(); + window.addEventListener('resize', this.handleStickyColumnsRef); + }, 10); } } }); diff --git a/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss b/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss index b1eead69ac..53b4471d6b 100644 --- a/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss +++ b/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss @@ -1,4 +1,29 @@ - .table-responsive-scroll { - display: block; - overflow-x: auto; +@import "../../tokens/screen_sizes"; + +.table-responsive-scroll { + display: block; + overflow-x: scroll; + + // Responsive Styles + @media (max-width: 1600px) { + &[class*="table-responsive-scroll"] { + border-radius: 4px; + box-shadow: 1px 0 0 0px $border_light + } + + &[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; + } } +} 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 55da8880ea..9fa2143580 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 @@ -3,7 +3,6 @@ [class^="pb_table"] { .sticky { position: sticky !important; - left: 0; z-index: 1; background-color: white; } diff --git a/playbook/app/pb_kits/playbook/pb_table/table.html.erb b/playbook/app/pb_kits/playbook/pb_table/table.html.erb index a92d4d9c32..91049c7629 100755 --- a/playbook/app/pb_kits/playbook/pb_table/table.html.erb +++ b/playbook/app/pb_kits/playbook/pb_table/table.html.erb @@ -1,4 +1,10 @@ -<%= content_tag(:div) do %> +<% if object.responsive_classname %> + <% responsive_class = object.responsive_classname %> +<% else %> + <% responsive_class = nil %> +<% end %> + +<%= content_tag(:div, class: responsive_class) do %> <% if object.tag == "table" %> <%= content_tag(:table, aria: object.aria, diff --git a/playbook/app/pb_kits/playbook/pb_table/table.rb b/playbook/app/pb_kits/playbook/pb_table/table.rb index 928df19d53..edf52964bb 100755 --- a/playbook/app/pb_kits/playbook/pb_table/table.rb +++ b/playbook/app/pb_kits/playbook/pb_table/table.rb @@ -45,6 +45,10 @@ def classname ) end + def responsive_classname + responsive ? "table-responsive-#{responsive}" : nil + end + private def dark_class