@kubex/zinc 1.1.121 → 1.1.123

package/src/components/data-table/data-table.scss

@@ -5,8 +5,14 @@
   @include wc.scrollbars;
 }
 
-.table-container {
-  overflow: auto;
+// Separates a top-level filter bar from the table's own panel below it
+slot[name="filter-top"]::slotted(*) {
+  margin-bottom: var(--zn-spacing-small);
+}
+
+.table__scroll {
+  overflow-x: auto;
+  @include wc.scrollbars;
 }
 
 table {
@@ -28,17 +34,6 @@ table {
     background-color: rgb(var(--zn-shadow));
   }
 
-  &.table--standalone {
-    background-color: rgb(var(--zn-panel));
-    border-radius: var(--zn-border-radius);
-    border: 1px solid rgb(var(--zn-border-color));
-    overflow: hidden;
-
-    thead tr th {
-      border-top: 0;
-    }
-  }
-
   thead {
     color: rgb(var(--zn-text-heading));
     font-weight: var(--zn-font-weight-medium);
@@ -232,32 +227,69 @@ table {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: baseline;
-    padding-block: var(--zn-spacing-small);
+    align-items: flex-start;
+    padding: var(--zn-spacing-x-small) var(--zn-spacing-medium);
     gap: var(--zn-spacing-small);
 
     &__actions,
     &__query-builder {
       display: flex;
       flex-direction: row;
-      align-items: baseline;
+      align-items: center;
       gap: var(--zn-spacing-small);
     }
 
+    &__toggle--active::part(base) {
+      background-color: rgb(var(--zn-color-tab));
+    }
+
+    &__caption {
+      @include wc.text-style(h1);
+
+      // Sits on the same 36px line as the controls opposite it
+      line-height: 36px;
+      margin: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    // Controls are a uniform 36px, so topping them out keeps them on one line while
+    // a search's help text grows the header downwards
     &__right {
       display: flex;
       flex-direction: row;
-      align-items: center;
+      align-items: flex-start;
       gap: var(--zn-spacing-x-small);
       margin-left: auto;
     }
   }
 
+  &__filters {
+    padding: var(--zn-spacing-x-small) var(--zn-spacing-medium);
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
   &__footer {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    padding: var(--zn-spacing-small) 0;
+    flex-wrap: wrap;
+    gap: var(--zn-spacing-small);
+    padding: var(--zn-spacing-x-small) var(--zn-spacing-medium);
+
+    // The joined control must never break across lines
+    zn-button-group::part(base) {
+      flex-wrap: nowrap;
+    }
+
+    // zn-panel's footer supplies its own padding
+    &--panel {
+      padding: 0;
+    }
 
     &__right, &__left {
       display: flex;
@@ -270,40 +302,49 @@ table {
       display: flex;
       flex-direction: row;
       align-items: center;
-      opacity: 0.8;
       gap: var(--zn-spacing-x-small);
 
+      p {
+        margin: 0;
+        color: rgb(var(--zn-text));
+        opacity: 0.7;
+        white-space: nowrap;
+      }
+
       zn-select[name="rowPerPage"] {
-        max-width: 75px;
+        --zn-input-background-color: rgb(var(--zn-panel));
+
+        width: 66px;
       }
 
+      // Matches the height of the pagination control it sits beside
       zn-select[name="rowPerPage"]::part(combobox) {
-        padding-inline-end: 8px;
+        min-height: 36px;
+        padding-inline: var(--zn-spacing-x-small);
       }
 
-       zn-select[name="rowPerPage"]::part(expand-icon) {
+      zn-select[name="rowPerPage"]::part(expand-icon) {
         margin-inline-start: 0;
       }
     }
 
-    &__pagination-buttons {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: var(--zn-spacing-x-small);
+    // Sized to match the icon-button arrows it is joined to, but free to grow for large page numbers
+    &__pagination-page::part(base) {
+      height: 36px;
+      min-height: 36px;
+      max-height: 36px;
+      min-width: 32px;
+      padding: 0 var(--zn-spacing-2x-small);
+      justify-content: center;
+      border-color: rgb(var(--zn-border-color));
+      color: rgb(var(--zn-text));
+      font-weight: var(--zn-font-weight-normal);
+      white-space: nowrap;
     }
 
     &__pagination-page--active::part(base) {
       background-color: var(--zn-color-neutral-300);
       border-color: var(--zn-color-neutral-300);
-      color: rgb(var(--zn-text));
-    }
-
-    &__pagination-ellipsis {
-      display: flex;
-      align-items: center;
-      padding: 0 var(--zn-spacing-x-small);
-      color: rgb(var(--zn-text));
     }
   }
 
@@ -330,6 +371,30 @@ table {
   }
 }
 
+zn-menu {
+  --zn-menu-min-width: var(--zn-size-spanel);
+}
+
+// A table's header and footer are chrome around the rows, so they sit tighter than
+// the panel's own content padding. The header's trailing edge tucks in further still,
+// since the controls there are already inset by their own button padding.
+zn-panel {
+  --zn-panel-header-padding: var(--zn-spacing-x-small) var(--zn-spacing-x-small)
+    var(--zn-spacing-x-small) var(--zn-spacing-medium);
+  --zn-panel-footer-padding: var(--zn-spacing-x-small) var(--zn-spacing-medium);
+}
+
+// Closes the rows off from the footer, which the panel border would otherwise do
+zn-panel::part(footer) {
+  border-top: 1px solid rgb(var(--zn-border-color));
+}
+
+// Dropdowns sit over dense rows here, so they need a solid surface rather than
+// zn-menu's translucent default
+zn-menu::part(base) {
+  background-color: rgb(var(--zn-panel));
+}
+
 .reduced-opacity .table tbody {
   opacity: 0.5;
 }
@@ -417,16 +482,18 @@ table:has(tbody tr:first-of-type.table__row--selected) thead tr th {
   border-bottom-color: var(--zn-color-purple-600) !important;
 }
 
-.table-group__title {
+tbody tr.table__row--group th {
+  padding: var(--zn-spacing-small) var(--zn-spacing-medium);
+  text-align: left;
+  white-space: nowrap;
+  background-color: rgb(var(--zn-panel));
+  color: rgba(var(--zn-text-panel-title), 100%);
   font-weight: var(--zn-font-weight-semibold);
   font-size: var(--zn-font-size-large);
-  color: rgba(var(--zn-text-panel-title), 100%);
-  line-height: var(--zn-line-height-looser);
-  padding-left: var(--zn-spacing-medium);
-  margin: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+}
+
+tbody tr.table__row--group:not(:first-of-type) th {
+  border-top: 1px solid rgb(var(--zn-border-color));
 }
 
 tbody tr.table__row--error td {

package/src/components/data-table/data-table.test.ts

@@ -10,6 +10,116 @@ describe('<zn-data-table>', () => {
     expect(el).to.exist;
   });
 
+  // filter-top renders above the panel, so it must not bring an otherwise empty header row with it
+  it('renders no header when only filter-top is slotted', async () => {
+    const el = await fixture<ZnDataTable>(html`
+      <zn-data-table standalone no-initial-load>
+        <div slot="filter-top">Filters</div>
+        <div slot="empty-state">Nothing yet</div>
+      </zn-data-table>`);
+    await el.updateComplete;
+
+    expect(el.shadowRoot!.querySelector('.table__header__right')).to.not.exist;
+    expect(el.shadowRoot!.querySelector('zn-header')).to.not.exist;
+  });
+
+  it('leaves a bare empty state unwrapped by the standalone panel', async () => {
+    const el = await fixture<ZnDataTable>(html`
+      <zn-data-table standalone no-initial-load>
+        <div slot="empty-state">Nothing yet</div>
+      </zn-data-table>`);
+    await el.updateComplete;
+
+    expect(el.shadowRoot!.querySelector('zn-panel')).to.not.exist;
+    expect(el.shadowRoot!.querySelector('slot[name="empty-state"]')).to.exist;
+  });
+
+  it('keeps the standalone panel for an empty state that has a caption', async () => {
+    const el = await fixture<ZnDataTable>(html`
+      <zn-data-table standalone no-initial-load caption="Customers">
+        <div slot="empty-state">Nothing yet</div>
+      </zn-data-table>`);
+    await el.updateComplete;
+
+    expect(el.shadowRoot!.querySelector('zn-panel')).to.exist;
+  });
+
+  // Raising the page size past the total used to drop the whole footer, leaving no way back
+  it('keeps the rows-per-page selector when the page size covers every row', async () => {
+    const originalFetch = window.fetch;
+    window.fetch = () => Promise.resolve(new Response(JSON.stringify({
+      rows: Array.from({length: 24}, (_, i) => ({id: String(i), cells: [{text: 'Row', column: 'name'}]})),
+      page: 1,
+      perPage: 50,
+      total: 24,
+    }), {status: 200, headers: {'Content-Type': 'application/json'}}));
+
+    try {
+      const el = await fixture<ZnDataTable>(html`
+        <zn-data-table data-uri="/test-data" headers='{"name": {"key": "name", "label": "Name"}}'></zn-data-table>`);
+      await waitUntil(() => el.shadowRoot!.querySelector('tbody tr.table__row--data'));
+
+      expect(el.shadowRoot!.querySelector('zn-select[name="rowPerPage"]')).to.exist;
+      expect(el.shadowRoot!.querySelector('.table__footer__pagination-page')).to.not.exist;
+    } finally {
+      window.fetch = originalFetch;
+    }
+  });
+
+  it('hides the rows-per-page selector when the dataset fits the smallest page size', async () => {
+    const originalFetch = window.fetch;
+    window.fetch = () => Promise.resolve(new Response(JSON.stringify({
+      rows: [{id: '1', cells: [{text: 'Row', column: 'name'}]}],
+      page: 1,
+      perPage: 10,
+      total: 1,
+    }), {status: 200, headers: {'Content-Type': 'application/json'}}));
+
+    try {
+      const el = await fixture<ZnDataTable>(html`
+        <zn-data-table data-uri="/test-data" headers='{"name": {"key": "name", "label": "Name"}}'></zn-data-table>`);
+      await waitUntil(() => el.shadowRoot!.querySelector('tbody tr.table__row--data'));
+
+      expect(el.shadowRoot!.querySelector('zn-select[name="rowPerPage"]')).to.not.exist;
+      expect(el.shadowRoot!.querySelector('.table__footer')).to.not.exist;
+    } finally {
+      window.fetch = originalFetch;
+    }
+  });
+
+  // One table per group meant two scrollbars and columns that did not line up between groups
+  it('renders grouped rows as group header rows inside a single table', async () => {
+    const originalFetch = window.fetch;
+    const row = (id: string, status: string) => ({
+      id,
+      cells: [{text: 'Card ' + id, column: 'name'}, {text: status, column: 'status'}],
+    });
+    window.fetch = () => Promise.resolve(new Response(JSON.stringify({
+      rows: [row('1', 'active'), row('2', 'active'), row('3', 'archived')],
+      page: 1,
+      perPage: 10,
+      total: 3,
+    }), {status: 200, headers: {'Content-Type': 'application/json'}}));
+
+    try {
+      const el = await fixture<ZnDataTable>(html`
+        <zn-data-table data-uri="/test-data"
+                       group-by="status"
+                       groups="active,archived"
+                       headers='{"name": {"key": "name", "label": "Name"}, "status": {"key": "status", "label": "Status", "hideColumn": true}}'></zn-data-table>`);
+      await waitUntil(() => el.shadowRoot!.querySelector('tbody tr.table__row--data'));
+
+      const root = el.shadowRoot!;
+      expect(root.querySelectorAll('table')).to.have.length(1);
+      expect(root.querySelectorAll('.table__scroll')).to.have.length(1);
+      expect([...root.querySelectorAll('tr.table__row--group')].map(r => r.textContent!.trim()))
+        .to.deep.equal(['Active', 'Archived']);
+      expect(root.querySelectorAll('tbody tr.table__row--data')).to.have.length(3);
+    } finally {
+      window.fetch = originalFetch;
+    }
+  });
+
   it('does not throw when updating selection without a select-all button', async () => {
     const el = await fixture<ZnDataTable>(html` <zn-data-table></zn-data-table> `);