Adjusted advanced table classname to separate from basic table

powerhome · Dec 20, 2024 · 510cf4f · 510cf4f
1 parent 17d4ae1
commit 510cf4f
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 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
@@ -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
@@ -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
@@ -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", () => {