fix(pix-table): fix css condensed mode on pix-table

1024pix · Mar 4, 2025 · abd80cb · abd80cb
1 parent a6d4314
commit abd80cb
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/addon/components/pix-table.hbs b/addon/components/pix-table.hbs
@@ -1,5 +1,5 @@
-<div class="pix-table" ...attributes>
-  <table class={{this.tableClass}}>
+<div class={{this.tableClass}} ...attributes>
+  <table>
     <caption class="screen-reader-only">{{this.caption}}</caption>
     <thead class={{this.headerClass}}>
       <tr>

diff --git a/addon/components/pix-table.js b/addon/components/pix-table.js
@@ -24,6 +24,7 @@ export default class PixTable extends Component {
   }
 
   get tableClass() {
+    const tableClass = ['pix-table'];
     warn(
       'PixTable: @condensed must be a boolean, default undefined',
       [true, false, undefined].includes(this.args.condensed),
@@ -32,9 +33,10 @@ export default class PixTable extends Component {
       },
     );
     if (this.args.condensed) {
-      return 'pix-table__condensed';
+      tableClass.push('pix-table--condensed');
     }
-    return null;
+
+    return tableClass.join(' ');
   }
 
   get headerClass() {

diff --git a/addon/styles/_pix-table.scss b/addon/styles/_pix-table.scss
@@ -11,12 +11,6 @@
 
   @extend %pix-body-s;
 
-  &__condensed {
-    th, td {
-      padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
-    }
-  }
-
   &__clickable-row {
     cursor: pointer;
 
@@ -82,5 +76,13 @@
       }
     }
   }
+
+  &--condensed {
+    table {
+      th, td {
+        padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
+      }
+    }
+  }
 }