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 309ffc884e..b2883af5dc 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 @@ -89,7 +89,6 @@ } } - .table-header-cells-active:first-child { color: $primary !important; } @@ -179,7 +178,7 @@ } // Responsive Styles - @media only screen and (max-width: $screen-xl-min) { + @media only screen and (max-width: $screen-xl-min) { &[class*="advanced-table-responsive-scroll"] { border-radius: 4px; box-shadow: 1px 0 0 0px $border_light, @@ -215,7 +214,7 @@ .bg-white td:first-child { background-color: $white; } - + } } @media only screen and (min-width: $screen-xl-min) { @@ -306,4 +305,4 @@ } } } -} \ No newline at end of file +} diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/index.js b/playbook/app/pb_kits/playbook/pb_advanced_table/index.js index e3c3e0f346..ef5724a8e3 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/index.js +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/index.js @@ -133,15 +133,18 @@ export default class PbAdvancedTable extends PbEnhancedElement { if (!elements.length) return; const isVisible = elements[0].classList.contains("is-visible"); - if (isVisible) { - this.hideElement(elements); - this.displayDownArrow(); - } else { - this.showElement(elements); - this.displayUpArrow(); + + isVisible ? this.hideElement(elements) : this.showElement(elements); + isVisible ? this.displayDownArrow() : this.displayUpArrow(); + + const row = this.element.closest("tr"); + if (row) { + row.classList.toggle("bg-silver", !isVisible); + row.classList.toggle("bg-white", isVisible); } } + displayDownArrow() { this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = "inline-block"; diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb index 138854d12d..337cf25b0c 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb @@ -14,10 +14,13 @@