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", () => {