@1024pix/pix-ui 62.0.0 → 62.0.1

package/addon/components/pix-table.gjs

@@ -10,6 +10,7 @@ import PixBlock from './pix-block';
 export default class PixTable extends Component {
   get variant() {
     const value = this.args.variant ?? 'primary';
+
     warn(
       `PixTable: @variant "${value}" should be ${VARIANTS.join(', ')}`,
       VARIANTS.includes(value),
@@ -25,11 +26,11 @@ export default class PixTable extends Component {
     warn(`PixTable: @caption is required`, Boolean(this.args.caption), {
       id: 'pix-ui.pix-table.caption.required',
     });
+
     return this.args.caption;
   }
 
   get tableClass() {
-    const tableClass = ['pix-table'];
     warn(
       'PixTable: @condensed must be a boolean, default undefined',
       [true, false, undefined].includes(this.args.condensed),
@@ -37,15 +38,14 @@ export default class PixTable extends Component {
         id: 'pix-ui.pix-table.condensed.not-boolean',
       },
     );
-    if (this.args.condensed) {
-      tableClass.push('pix-table--condensed');
-    }
 
+    const tableClass = ['pix-table'];
+    if (this.args.condensed) tableClass.push('pix-table--condensed');
     return tableClass.join(' ');
   }
 
   get headerClass() {
-    return `pix-table-header--${this.variant}`;
+    return `pix-table-header pix-table-header--${this.variant}`;
   }
 
   get captionClass() {
@@ -59,6 +59,7 @@ export default class PixTable extends Component {
   @action
   onClick(row, event) {
     event.stopPropagation();
+
     if (this.hasOnRowClick) {
       this.args.onRowClick(row);
     }

package/addon/styles/_pix-table.scss

@@ -2,6 +2,8 @@
 @use "pix-design-tokens/typography";
 
 .pix-table {
+  @extend %pix-body-s;
+
   min-width: 100%;
   overflow: auto;
 
@@ -9,106 +11,100 @@
     overflow: unset;
   }
 
-  @extend %pix-body-s;
-
-  &__caption {
-    margin-bottom: var(--pix-spacing-3x);
-    text-align: left;
-    caption-side: top;
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
 
-    @extend %pix-title-xxs;
+  tbody > tr:nth-of-type(even) > :is(td, th) {
+    background-color: rgba(var(--pix-neutral-20-inline), 0.80);
   }
 
-  &__clickable-row {
+  tbody > tr.pix-table__clickable-row {
     cursor: pointer;
 
-    &:hover, &:focus, &:active {
-      transition: 0.25s ease;
+    & > :is(td, th) {
+      transition: background-color 0.25s ease;
     }
 
-    &:hover {
+    &:hover > :is(td, th) {
       background-color: rgba(var(--pix-neutral-100-inline), 0.50);
     }
 
-    &:focus {
+    &:focus > :is(td, th) {
       background-color: rgba(var(--pix-neutral-100-inline), 0.40);
     }
 
-    &:active {
+    &:active > :is(td, th) {
       background-color: rgba(var(--pix-neutral-100-inline), 0.75);
     }
   }
 
-  table {
-    width: 100%;
-    border-collapse: collapse;
-  }
-
-   tbody > tr:nth-of-type(even):not(.pix-table__clickable-row:hover, .pix-table__clickable-row:focus, .pix-table__clickable-row:active) {
-      background-color: rgba(var(--pix-neutral-20-inline), 0.80);
-    }
-
-    thead.pix-table-header {
-      &--primary {
-        background: var(--pix-primary-10);
-      }
-
-      &--orga {
-        background: var(--pix-orga-50);
-      }
-
-      &--certif {
-        background: var(--pix-certif-50);
-      }
-
-      &--admin {
-        background: var(--pix-primary-100);
-      }
-    }
+  td, th {
+    padding: var(--pix-spacing-4x);
 
-    .pix-table-header-container {
-      display: flex;
-      gap: var(--pix-spacing-1x);
-      align-items: center;
+    &:first-child {
+      border-top-left-radius: var(--pix-spacing-2x);
+      border-bottom-left-radius: var(--pix-spacing-2x);
     }
 
-    th[scope='col'] {
-      font-weight: var(--pix-font-bold);
-      text-align: start;
-      vertical-align: middle;
+    &:last-child {
+      border-top-right-radius: var(--pix-spacing-2x);
+      border-bottom-right-radius: var(--pix-spacing-2x);
     }
+  }
+}
 
-    th[scope='row'] {
-      font-weight: var(--pix-font-normal);
-    }
+.pix-table--condensed {
+  th, td {
+    padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
+  }
 
+  td.pix-table-column--tag,
+  td.pix-table-column--link {
+    padding-top: 0.375rem;
+    padding-bottom: 0.375rem;
+  }
+}
 
-    td, th {
-      padding: var(--pix-spacing-4x) var(--pix-spacing-4x);
+.pix-table-header {
+  &--primary th {
+    background: var(--pix-primary-10);
+  }
 
-      &:first-child {
-        border-radius: var(--pix-spacing-2x) 0 0 var(--pix-spacing-2x);
-      }
+  &--orga th {
+    background: var(--pix-orga-50);
+  }
 
-      &:last-child {
-        border-radius: 0 var(--pix-spacing-2x) var(--pix-spacing-2x) 0;
-      }
-    }
+  &--certif th {
+    background: var(--pix-certif-50);
+  }
 
-  &--condensed {
-    th, td {
-      padding: .5rem var(--pix-spacing-4x);
-    }
+  &--admin th {
+    background: var(--pix-primary-100);
+  }
 
-    td.pix-table-column--tag {
-        padding-top: 0.375rem;
-        padding-bottom: 0.375rem;
-    }
+  th[scope='col'] {
+    font-weight: var(--pix-font-bold);
+    text-align: start;
+    vertical-align: middle;
+  }
 
-    td.pix-table-column--link {
-      padding-top: 0.375rem;
-      padding-bottom: 0.375rem;
-    }
+  th[scope='row'] {
+    font-weight: var(--pix-font-normal);
   }
 }
 
+.pix-table-header-container {
+  display: flex;
+  gap: var(--pix-spacing-1x);
+  align-items: center;
+}
+
+.pix-table__caption {
+  margin-bottom: var(--pix-spacing-3x);
+  text-align: left;
+  caption-side: top;
+
+  @extend %pix-title-xxs;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "62.0.0",
+  "version": "62.0.1",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"