From d9b54a40da94258893869f7447b481ff3f8a1709 Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Wed, 18 Dec 2024 07:57:02 -0600 Subject: [PATCH 01/14] Updated doc example and sticky column functionality --- .../app/pb_kits/playbook/pb_table/_table.tsx | 14 ++-- .../docs/_table_sticky_left_columns.html.erb | 78 +++++++------------ .../docs/_table_sticky_left_columns_rails.md | 1 + .../playbook/pb_table/docs/example.yml | 3 +- .../app/pb_kits/playbook/pb_table/index.ts | 8 +- .../playbook/pb_table/styles/_scroll.scss | 11 ++- .../pb_table/styles/_sticky_columns.scss | 1 - 7 files changed, 53 insertions(+), 63 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_table/_table.tsx b/playbook/app/pb_kits/playbook/pb_table/_table.tsx index 35e9f6d923..b895b5bd3c 100755 --- a/playbook/app/pb_kits/playbook/pb_table/_table.tsx +++ b/playbook/app/pb_kits/playbook/pb_table/_table.tsx @@ -23,6 +23,7 @@ type TableProps = { disableHover?: boolean, htmlOptions?: { [key: string]: string | number | boolean | (() => void) }, id?: string, + isPinnedLeft?: boolean, outerPadding?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl", responsive?: "collapse" | "scroll" | "none", singleLine?: boolean, @@ -47,6 +48,7 @@ const Table = (props: TableProps): React.ReactElement => { disableHover = false, htmlOptions = {}, id, + isPinnedLeft = false, outerPadding = '', responsive = 'collapse', singleLine = false, @@ -92,16 +94,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 +111,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..a57d88ca95 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,7 +34,7 @@ examples: - table_md: Medium - table_lg: Large - table_sticky: Sticky Header - - table_alignment_row: Row Alignment + - table_sticky_left_columns: Sticky Left Column - table_alignment_column: Cell Alignment - table_alignment_shift_row: Row Shift - table_alignment_shift_data: Cell 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..76fd0f06c0 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,7 @@ - .table-responsive-scroll { - display: block; - overflow-x: auto; - } +.table-responsive-scroll { + display: block; + overflow-x: auto; + border-right: 1px solid $border_light !important; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} 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; } From a4274da42873e73ee0d2491a5f66f9f940e15a29 Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Wed, 18 Dec 2024 08:02:56 -0600 Subject: [PATCH 02/14] Removed unnecessary props from react --- playbook/app/pb_kits/playbook/pb_table/_table.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_table/_table.tsx b/playbook/app/pb_kits/playbook/pb_table/_table.tsx index b895b5bd3c..2ada123f1d 100755 --- a/playbook/app/pb_kits/playbook/pb_table/_table.tsx +++ b/playbook/app/pb_kits/playbook/pb_table/_table.tsx @@ -23,7 +23,6 @@ type TableProps = { disableHover?: boolean, htmlOptions?: { [key: string]: string | number | boolean | (() => void) }, id?: string, - isPinnedLeft?: boolean, outerPadding?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl", responsive?: "collapse" | "scroll" | "none", singleLine?: boolean, @@ -48,7 +47,6 @@ const Table = (props: TableProps): React.ReactElement => { disableHover = false, htmlOptions = {}, id, - isPinnedLeft = false, outerPadding = '', responsive = 'collapse', singleLine = false, From f9d045333f25b7598aeafbae461af89a84defd01 Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Wed, 18 Dec 2024 11:37:57 -0600 Subject: [PATCH 03/14] Changed scroll css to fix border issue --- playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) 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 76fd0f06c0..7d8a8c5de0 100644 --- a/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss +++ b/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss @@ -1,7 +1,6 @@ .table-responsive-scroll { display: block; - overflow-x: auto; - border-right: 1px solid $border_light !important; - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; + overflow-x: scroll; + outline: 1px solid $border_light !important; + border-collapse: collapse; } From 5ddc5537c52eb784f8f1f849806e20eb1b0f9d74 Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Wed, 18 Dec 2024 14:27:03 -0600 Subject: [PATCH 04/14] Adjusted table view on rails component to better match divs from react --- .../app/pb_kits/playbook/pb_table/styles/_scroll.scss | 1 - .../app/pb_kits/playbook/pb_table/styles/_table-card.scss | 1 + playbook/app/pb_kits/playbook/pb_table/table.html.erb | 8 +++++++- playbook/app/pb_kits/playbook/pb_table/table.rb | 7 +++++-- 4 files changed, 13 insertions(+), 4 deletions(-) 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 7d8a8c5de0..cec57baf8b 100644 --- a/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss +++ b/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss @@ -2,5 +2,4 @@ display: block; overflow-x: scroll; outline: 1px solid $border_light !important; - border-collapse: collapse; } diff --git a/playbook/app/pb_kits/playbook/pb_table/styles/_table-card.scss b/playbook/app/pb_kits/playbook/pb_table/styles/_table-card.scss index d2ddcdc407..5c78c0c860 100755 --- a/playbook/app/pb_kits/playbook/pb_table/styles/_table-card.scss +++ b/playbook/app/pb_kits/playbook/pb_table/styles/_table-card.scss @@ -3,6 +3,7 @@ &.table-md, &.table-lg { &.table-card { + display: table; border-collapse: separate; border-spacing: 0; background: $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..d1abaac9fe 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 %> + <% div_classname = object.responsive_classname %> +<% else %> + <% div_classname = nil %> +<% end %> + +<%= content_tag(:div, class: div_classname) 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..b775f941d3 100755 --- a/playbook/app/pb_kits/playbook/pb_table/table.rb +++ b/playbook/app/pb_kits/playbook/pb_table/table.rb @@ -40,11 +40,14 @@ def classname generate_classname( "pb_table", "table-#{size}", single_line_class, dark_class, disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class, - collapse_class, vertical_border_class, striped_class, outer_padding_class, - "table-responsive-#{responsive}", separator: " " + collapse_class, vertical_border_class, striped_class, outer_padding_class, separator: " " ) end + def responsive_classname + responsive ? "table-responsive-#{responsive}" : nil + end + private def dark_class From 2426b1cca7b92e610cb240a27a3eb4068e1a1cc9 Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Wed, 18 Dec 2024 14:40:54 -0600 Subject: [PATCH 05/14] Updated spec test --- .../spec/pb_kits/playbook/kits/table_spec.rb | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/playbook/spec/pb_kits/playbook/kits/table_spec.rb b/playbook/spec/pb_kits/playbook/kits/table_spec.rb index a428de988d..9f6371f419 100644 --- a/playbook/spec/pb_kits/playbook/kits/table_spec.rb +++ b/playbook/spec/pb_kits/playbook/kits/table_spec.rb @@ -27,18 +27,18 @@ describe "#classname" do it "returns namespaced class name", :aggregate_failures do - expect(subject.new({}).classname).to eq "pb_table table-md table-card table-collapse-sm table-responsive-collapse" - expect(subject.new(classname: "additional_class").classname).to eq "pb_table table-md table-card table-collapse-sm table-responsive-collapse additional_class" - expect(subject.new(dark: true).classname).to eq "pb_table table-md table-dark table-card table-collapse-sm table-responsive-collapse dark" - expect(subject.new(data_table: true).classname).to eq "pb_table table-md table-card data_table table-collapse-sm table-responsive-collapse" - expect(subject.new(size: "sm").classname).to eq "pb_table table-sm table-card table-collapse-sm table-responsive-collapse" - expect(subject.new(single_line: true).classname).to eq "pb_table table-md single-line table-card table-collapse-sm table-responsive-collapse" - expect(subject.new(container: false).classname).to eq "pb_table table-md table-collapse-sm table-responsive-collapse" - expect(subject.new(disable_hover: true).classname).to eq "pb_table table-md no-hover table-card table-collapse-sm table-responsive-collapse" - expect(subject.new(disable_hover: true, dark: true, size: "lg", single_line: true).classname).to eq "pb_table table-lg single-line table-dark no-hover table-card table-collapse-sm table-responsive-collapse dark" - expect(subject.new(sticky: true).classname).to eq "pb_table table-md table-card sticky-header table-collapse-sm table-responsive-collapse" - expect(subject.new(outer_padding: "sm").classname).to eq "pb_table table-md table-card table-collapse-sm outer_padding_space_sm table-responsive-collapse" - expect(subject.new(sticky_left_column: %w[1 2 3]).classname).to eq "pb_table table-md table-card sticky-left-column sticky-columns-1-2-3 table-collapse-sm table-responsive-collapse" + expect(subject.new({}).classname).to eq "pb_table table-md table-card table-collapse-sm" + expect(subject.new(classname: "additional_class").classname).to eq "pb_table table-md table-card table-collapse-sm additional_class" + expect(subject.new(dark: true).classname).to eq "pb_table table-md table-dark table-card table-collapse-sm dark" + expect(subject.new(data_table: true).classname).to eq "pb_table table-md table-card data_table table-collapse-sm" + expect(subject.new(size: "sm").classname).to eq "pb_table table-sm table-card table-collapse-sm" + expect(subject.new(single_line: true).classname).to eq "pb_table table-md single-line table-card table-collapse-sm" + expect(subject.new(container: false).classname).to eq "pb_table table-md table-collapse-sm" + expect(subject.new(disable_hover: true).classname).to eq "pb_table table-md no-hover table-card table-collapse-sm" + expect(subject.new(disable_hover: true, dark: true, size: "lg", single_line: true).classname).to eq "pb_table table-lg single-line table-dark no-hover table-card table-collapse-sm dark" + expect(subject.new(sticky: true).classname).to eq "pb_table table-md table-card sticky-header table-collapse-sm" + expect(subject.new(outer_padding: "sm").classname).to eq "pb_table table-md table-card table-collapse-sm outer_padding_space_sm" + expect(subject.new(sticky_left_column: %w[1 2 3]).classname).to eq "pb_table table-md table-card sticky-left-column sticky-columns-1-2-3 table-collapse-sm" end end end From 1da5235b0cc58f993ce58ef65d33f31a9aa333d1 Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Wed, 18 Dec 2024 15:04:04 -0600 Subject: [PATCH 06/14] Adjusted class --- playbook/app/pb_kits/playbook/pb_table/table.html.erb | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 d1abaac9fe..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,10 +1,10 @@ <% if object.responsive_classname %> - <% div_classname = object.responsive_classname %> + <% responsive_class = object.responsive_classname %> <% else %> - <% div_classname = nil %> + <% responsive_class = nil %> <% end %> -<%= content_tag(:div, class: div_classname) do %> +<%= content_tag(:div, class: responsive_class) do %> <% if object.tag == "table" %> <%= content_tag(:table, aria: object.aria, From 3eb366ca75e914490c8ac5a8037ddb85ded7317f Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Wed, 18 Dec 2024 15:10:05 -0600 Subject: [PATCH 07/14] Reverted classname generator and spec changes --- .../app/pb_kits/playbook/pb_table/table.rb | 3 ++- .../spec/pb_kits/playbook/kits/table_spec.rb | 23 +++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_table/table.rb b/playbook/app/pb_kits/playbook/pb_table/table.rb index b775f941d3..edf52964bb 100755 --- a/playbook/app/pb_kits/playbook/pb_table/table.rb +++ b/playbook/app/pb_kits/playbook/pb_table/table.rb @@ -40,7 +40,8 @@ def classname generate_classname( "pb_table", "table-#{size}", single_line_class, dark_class, disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class, - collapse_class, vertical_border_class, striped_class, outer_padding_class, separator: " " + collapse_class, vertical_border_class, striped_class, outer_padding_class, + "table-responsive-#{responsive}", separator: " " ) end diff --git a/playbook/spec/pb_kits/playbook/kits/table_spec.rb b/playbook/spec/pb_kits/playbook/kits/table_spec.rb index 9f6371f419..4fa21d645a 100644 --- a/playbook/spec/pb_kits/playbook/kits/table_spec.rb +++ b/playbook/spec/pb_kits/playbook/kits/table_spec.rb @@ -27,18 +27,17 @@ describe "#classname" do it "returns namespaced class name", :aggregate_failures do - expect(subject.new({}).classname).to eq "pb_table table-md table-card table-collapse-sm" - expect(subject.new(classname: "additional_class").classname).to eq "pb_table table-md table-card table-collapse-sm additional_class" - expect(subject.new(dark: true).classname).to eq "pb_table table-md table-dark table-card table-collapse-sm dark" - expect(subject.new(data_table: true).classname).to eq "pb_table table-md table-card data_table table-collapse-sm" - expect(subject.new(size: "sm").classname).to eq "pb_table table-sm table-card table-collapse-sm" - expect(subject.new(single_line: true).classname).to eq "pb_table table-md single-line table-card table-collapse-sm" - expect(subject.new(container: false).classname).to eq "pb_table table-md table-collapse-sm" - expect(subject.new(disable_hover: true).classname).to eq "pb_table table-md no-hover table-card table-collapse-sm" - expect(subject.new(disable_hover: true, dark: true, size: "lg", single_line: true).classname).to eq "pb_table table-lg single-line table-dark no-hover table-card table-collapse-sm dark" - expect(subject.new(sticky: true).classname).to eq "pb_table table-md table-card sticky-header table-collapse-sm" - expect(subject.new(outer_padding: "sm").classname).to eq "pb_table table-md table-card table-collapse-sm outer_padding_space_sm" - expect(subject.new(sticky_left_column: %w[1 2 3]).classname).to eq "pb_table table-md table-card sticky-left-column sticky-columns-1-2-3 table-collapse-sm" + expect(subject.new({}).classname).to eq "pb_table table-md table-card table-collapse-sm table-responsive-collapse" + expect(subject.new(classname: "additional_class").classname).to eq "pb_table table-md table-card table-collapse-sm table-responsive-collapse additional_class" + expect(subject.new(dark: true).classname).to eq "pb_table table-md table-dark table-card table-collapse-sm table-responsive-collapse dark" + expect(subject.new(data_table: true).classname).to eq "pb_table table-md table-card data_table table-collapse-sm table-responsive-collapse" + expect(subject.new(size: "sm").classname).to eq "pb_table table-sm table-card table-collapse-sm table-responsive-collapse" + expect(subject.new(single_line: true).classname).to eq "pb_table table-md single-line table-card table-collapse-sm table-responsive-collapse" + expect(subject.new(container: false).classname).to eq "pb_table table-md table-collapse-sm table-responsive-collapse" + expect(subject.new(disable_hover: true).classname).to eq "pb_table table-md no-hover table-card table-collapse-sm table-responsive-collapse" + expect(subject.new(disable_hover: true, dark: true, size: "lg", single_line: true).classname).to eq "pb_table table-lg single-line table-dark no-hover table-card table-collapse-sm table-responsive-collapse dark" + expect(subject.new(sticky: true).classname).to eq "pb_table table-md table-card sticky-header table-collapse-sm table-responsive-collapse" + expect(subject.new(outer_padding: "sm").classname).to eq "pb_table table-md table-card table-collapse-sm outer_padding_space_sm table-responsive-collapse" end end end From 4e757b585386766c1b716187584dcc3f37ef9ded Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Thu, 19 Dec 2024 10:56:26 -0600 Subject: [PATCH 08/14] Adjusted styling to show right border on smaller screens --- .../app/pb_kits/playbook/pb_table/styles/_scroll.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) 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 cec57baf8b..a2f147a9cd 100644 --- a/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss +++ b/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss @@ -1,5 +1,13 @@ +@import "../../tokens/screen_sizes"; + .table-responsive-scroll { display: block; overflow-x: scroll; - outline: 1px solid $border_light !important; + + // Responsive Styles + @media only screen and (max-width: $screen-xl-min) { + &[class*="table-responsive-scroll"] { + border-right: 1px solid $border_light !important; + } + } } From 8b9fa50700d6ac012632c18c557e59a75d25330a Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Thu, 19 Dec 2024 12:49:38 -0600 Subject: [PATCH 09/14] Adjusted border css --- playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss | 5 +++-- playbook/app/pb_kits/playbook/tokens/_screen_sizes.scss | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) 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 a2f147a9cd..874e464951 100644 --- a/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss +++ b/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss @@ -5,9 +5,10 @@ overflow-x: scroll; // Responsive Styles - @media only screen and (max-width: $screen-xl-min) { + @media (max-width: 1600px) { &[class*="table-responsive-scroll"] { - border-right: 1px solid $border_light !important; + box-shadow: 1px 0 0 0px $border_light, + -1px 0 0 0px $border_light; } } } diff --git a/playbook/app/pb_kits/playbook/tokens/_screen_sizes.scss b/playbook/app/pb_kits/playbook/tokens/_screen_sizes.scss index 23ce208905..f6d6e4b2ea 100755 --- a/playbook/app/pb_kits/playbook/tokens/_screen_sizes.scss +++ b/playbook/app/pb_kits/playbook/tokens/_screen_sizes.scss @@ -8,6 +8,7 @@ $screen-lg-min: 992px !default; $screen-lg-max: $screen-lg-min - 1 !default; $screen-xl-min: 1200px !default; $screen-xl-max: $screen-xl-min - 1 !default; +$screen-2xl-min: 1440px !default; $breakpoints: ( xs: $screen-xs-min, From 45da6ef032b7d4874a7b308a9e320e1a6bf43279 Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Thu, 19 Dec 2024 13:36:53 -0600 Subject: [PATCH 10/14] Removed box-shadow on left side and readded spec for sticky columns --- playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss | 6 +++--- .../app/pb_kits/playbook/pb_table/styles/_table-card.scss | 1 - playbook/app/pb_kits/playbook/tokens/_screen_sizes.scss | 1 - playbook/spec/pb_kits/playbook/kits/table_spec.rb | 1 + 4 files changed, 4 insertions(+), 5 deletions(-) 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 874e464951..3ff05b6f1f 100644 --- a/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss +++ b/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss @@ -7,8 +7,8 @@ // Responsive Styles @media (max-width: 1600px) { &[class*="table-responsive-scroll"] { - box-shadow: 1px 0 0 0px $border_light, - -1px 0 0 0px $border_light; - } + border-radius: 4px; + box-shadow: 1px 0 0 0px $border_light + } } } diff --git a/playbook/app/pb_kits/playbook/pb_table/styles/_table-card.scss b/playbook/app/pb_kits/playbook/pb_table/styles/_table-card.scss index 5c78c0c860..d2ddcdc407 100755 --- a/playbook/app/pb_kits/playbook/pb_table/styles/_table-card.scss +++ b/playbook/app/pb_kits/playbook/pb_table/styles/_table-card.scss @@ -3,7 +3,6 @@ &.table-md, &.table-lg { &.table-card { - display: table; border-collapse: separate; border-spacing: 0; background: $white; diff --git a/playbook/app/pb_kits/playbook/tokens/_screen_sizes.scss b/playbook/app/pb_kits/playbook/tokens/_screen_sizes.scss index f6d6e4b2ea..23ce208905 100755 --- a/playbook/app/pb_kits/playbook/tokens/_screen_sizes.scss +++ b/playbook/app/pb_kits/playbook/tokens/_screen_sizes.scss @@ -8,7 +8,6 @@ $screen-lg-min: 992px !default; $screen-lg-max: $screen-lg-min - 1 !default; $screen-xl-min: 1200px !default; $screen-xl-max: $screen-xl-min - 1 !default; -$screen-2xl-min: 1440px !default; $breakpoints: ( xs: $screen-xs-min, diff --git a/playbook/spec/pb_kits/playbook/kits/table_spec.rb b/playbook/spec/pb_kits/playbook/kits/table_spec.rb index 4fa21d645a..a428de988d 100644 --- a/playbook/spec/pb_kits/playbook/kits/table_spec.rb +++ b/playbook/spec/pb_kits/playbook/kits/table_spec.rb @@ -38,6 +38,7 @@ expect(subject.new(disable_hover: true, dark: true, size: "lg", single_line: true).classname).to eq "pb_table table-lg single-line table-dark no-hover table-card table-collapse-sm table-responsive-collapse dark" expect(subject.new(sticky: true).classname).to eq "pb_table table-md table-card sticky-header table-collapse-sm table-responsive-collapse" expect(subject.new(outer_padding: "sm").classname).to eq "pb_table table-md table-card table-collapse-sm outer_padding_space_sm table-responsive-collapse" + expect(subject.new(sticky_left_column: %w[1 2 3]).classname).to eq "pb_table table-md table-card sticky-left-column sticky-columns-1-2-3 table-collapse-sm table-responsive-collapse" end end end From eb8aff5c8e1b8c71287095afdcb725babb45f6a0 Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Thu, 19 Dec 2024 13:46:50 -0600 Subject: [PATCH 11/14] Updated border css --- .../playbook/pb_table/styles/_scroll.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) 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 3ff05b6f1f..ff27296ad7 100644 --- a/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss +++ b/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss @@ -12,3 +12,20 @@ } } } + +@media (max-width: 1600px) { + [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; + } +} From 6eb5b5249f058d48b86efa5967ea5602f39dbbe8 Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Thu, 19 Dec 2024 14:28:18 -0600 Subject: [PATCH 12/14] Moved css styling --- .../playbook/pb_table/styles/_scroll.scss | 26 +++++++++---------- 1 file changed, 12 insertions(+), 14 deletions(-) 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 ff27296ad7..53b4471d6b 100644 --- a/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss +++ b/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss @@ -10,22 +10,20 @@ border-radius: 4px; box-shadow: 1px 0 0 0px $border_light } - } -} -@media (max-width: 1600px) { - [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-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-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; + &[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; + } } } From 17d4ae16944de0832059b6acebd1c5a1787bbb1d Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Fri, 20 Dec 2024 07:55:17 -0600 Subject: [PATCH 13/14] Restored doc example --- playbook/app/pb_kits/playbook/pb_table/docs/example.yml | 1 + 1 file changed, 1 insertion(+) 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 a57d88ca95..74f44bf963 100755 --- a/playbook/app/pb_kits/playbook/pb_table/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_table/docs/example.yml @@ -35,6 +35,7 @@ examples: - 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 - table_alignment_shift_data: Cell Shift From 510cf4f1c6f96597feec5ccf302e680dfdc25c7c Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Fri, 20 Dec 2024 09:59:28 -0600 Subject: [PATCH 14/14] Adjusted advanced table classname to separate from basic table --- .../pb_kits/playbook/pb_advanced_table/_advanced_table.scss | 6 +++--- .../pb_kits/playbook/pb_advanced_table/_advanced_table.tsx | 2 +- .../playbook/pb_advanced_table/advanced_table.test.jsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) 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 5f564b08a0..7773cfd8a8 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 @@ -112,7 +112,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; @@ -150,7 +150,7 @@ } } @media only screen and (min-width: $screen-xl-min) { - &[class*="table-responsive-scroll"] { + &[class*="advanced-table-responsive-scroll"] { overflow-x: visible; } } @@ -200,7 +200,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", () => {