Merge pull request #72 from invopop/table_tweaks

Table design tweaks
invopop · Nov 8, 2024 · 536aa2e · 536aa2e
2 parents ebc6395 + 97935be
commit 536aa2e
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",

diff --git a/svelte/lib/BaseCounter.svelte b/svelte/lib/BaseCounter.svelte
@@ -12,7 +12,7 @@
 </script>
 
 <div
-  class="{styles} inline-flex items-center justify-center rounded p-[3px] text-neutral-500 text-sm font-medium h-4 min-w-[16px] tracking-wide tabular-nums slashed-zero lining-nums"
+  class="{styles} inline-flex items-center justify-center rounded p-1 text-neutral-500 text-sm font-medium h-4 min-w-[16px] tracking-wide tabular-nums slashed-zero lining-nums box-border"
 >
   {content}
 </div>
diff --git a/svelte/lib/BaseTable.svelte b/svelte/lib/BaseTable.svelte
@@ -235,37 +235,40 @@
 <div class="w-full font-sans">
   <table class="hidden md:table w-full">
     <thead>
-      <tr class="border-b border-neutral-100 relative">
+      <tr class="relative">
         {#if selectable}
           <!-- if table is selectable we need to add an extra header with a checkbox -->
-          <th scope="col" class="bg-white sticky top-0 z-10 rounded-tr-md">
-            {#if !hideSelectAll}
-              <button
-                class="pl-5 pr-3 h-[40px] flex items-center outline-none group cursor-default"
-                on:click|stopPropagation={() => {
-                  toggleAllSelected(!selectedRows.length)
-                }}
-              >
-                <div class:invisible={!selectedRows.length} class="group-hover:visible">
-                  <InputCheckbox
-                    checked={allChecked}
-                    {indeterminate}
-                    on:change={(event) => {
-                      toggleAllSelected(event.detail)
-                    }}
-                  />
-                </div>
-              </button>
-            {/if}
+          <th scope="col" class="bg-white sticky top-0 z-10 p-0">
+            <div class="border-b border-neutral-100">
+              {#if !hideSelectAll}
+                <button
+                  class="px-5 h-[36px] flex items-center outline-none group cursor-default"
+                  on:click|stopPropagation={() => {
+                    toggleAllSelected(!selectedRows.length)
+                  }}
+                >
+                  <div class:invisible={!selectedRows.length} class="group-hover:visible">
+                    <InputCheckbox
+                      checked={allChecked}
+                      {indeterminate}
+                      on:change={(event) => {
+                        toggleAllSelected(event.detail)
+                      }}
+                    />
+                  </div>
+                </button>
+              {/if}
+            </div>
           </th>
         {/if}
         {#each fields as field, i (i)}
           <BaseTableHeader
-            isFirst={i === 0 && !selectable}
+            isFirst={i === 0}
             isLast={!addExtraCell && i === fields.length - 1}
             {sortBy}
             {sortDirection}
             {field}
+            {selectable}
             on:orderBy
           />
         {/each}
@@ -276,18 +279,25 @@
       </tr>
     </thead>
     <tbody>
-      {#each groupedData as group}
+      {#each groupedData as group, i (i)}
         {#if group.label}
           <tr>
             <th
               scope="colgroup"
               colspan={fields.length + (selectable ? 2 : 1)}
-              class="bg-neutral-50 px-5 text-left text-sm font-medium text-neutral-500 sticky top-11 tracking-normal border-t border-b border-neutral-100 h-8"
+              class="bg-white text-left text-sm font-medium text-neutral-500 sticky top-9 tracking-normal h-8"
             >
-              <span>{group.label}</span>
-              {#if !hideCounter}
-                <BaseCounter content={group.rows.length} />
-              {/if}
+              <span
+                class:border-t={i > 0}
+                class:pl-14={selectable}
+                class:pl-5={!selectable}
+                class="flex items-center space-x-1 box-border border-b border-neutral-100 h-8"
+              >
+                <span>{group.label}</span>
+                {#if !hideCounter}
+                  <BaseCounter content={group.rows.length} />
+                {/if}
+              </span>
             </th>
           </tr>
         {/if}
@@ -302,7 +312,9 @@
             {selectedRows}
             {selectedTrackedBy}
             {selectionMode}
-            selected={lastSelected && row[selectedTrackedBy] === lastSelected[selectedTrackedBy]}
+            selected={selectable &&
+              lastSelected &&
+              row[selectedTrackedBy] === lastSelected[selectedTrackedBy]}
             on:click={() => {
               if (disableRowClick) return
 

diff --git a/svelte/lib/BaseTableCell.svelte b/svelte/lib/BaseTableCell.svelte
@@ -21,20 +21,20 @@
   export let selectable = false
   export let hasActions = false
 
+  $: isSelectableFirst = isFirst && selectable
+
   $: cellStyles = clsx(
     { 'tabular-nums slashed-zero lining-nums': field.monospacedNums },
     { 'font-mono': field.monospaced },
     { 'text-neutral-800 font-medium': isFirst && !field.grayed },
     { 'text-neutral-800 md:text-neutral-500': !isFirst || field.grayed },
     { 'md:text-right': field.rightAlign },
     { 'md:w-full md:max-w-0': field.fullWidth },
-    { 'py-2 md:py-[11.25px]': badge },
-    { 'py-2 md:py-[11.75px]': !badge },
     { 'pl-5': isFirst && !selectable },
-    { 'pl-3': !isFirst || selectable },
+    { 'pl-3': !isFirst && !isSelectableFirst },
     { 'pr-5': isLast && !hasActions },
     { 'pr-3': !isLast || hasActions },
-    { 'px-3': !field.noPadding },
+    { 'px-3': (!isFirst || !selectable) && !field.noPadding },
     { 'px-0': field.noPadding },
     { 'whitespace-nowrap truncate': !freeWrap }
   )
@@ -43,7 +43,7 @@
 
 <svelte:element
   this={tag}
-  class="{cellStyles} text-base tracking-normal"
+  class="{cellStyles} text-base tracking-normal py-2"
   style:min-width={field.width}
   style:max-width={isMobile ? `${Viewport.Width}px` : field.width}
 >

diff --git a/svelte/lib/BaseTableHeader.svelte b/svelte/lib/BaseTableHeader.svelte
@@ -14,6 +14,7 @@
   export let sortDirection: TableSortBy
   export let isFirst = false
   export let isLast = false
+  export let selectable = false
 
   $: outerStyles = clsx({
     'w-full': field.fullWidth
@@ -22,7 +23,7 @@
   $: headerStyles = clsx({
     'justify-end': field.rightAlign,
     'hover:bg-neutral-50 focus:bg-neutral-100': field.sortable,
-    'pl-5': isFirst,
+    'pl-5': isFirst && !selectable,
     'pl-3': !isFirst,
     'pr-5': isLast,
     'pr-3': !isLast
@@ -37,16 +38,16 @@
 
 <th
   scope="col"
-  class="{outerStyles} bg-white text-neutral-500 group sticky z-10 top-0"
+  class="{outerStyles} bg-white text-neutral-500 group sticky z-10 top-0 h-9 box-border p-0"
   style:min-width={field.width}
   style:max-width={field.width}
 >
-  <span class="flex">
+  <span class="flex border-b border-neutral-100">
     {#if field.sortable}
       <BaseDropdown bind:this={sortDropdown} fullWidth>
         <span
           slot="trigger"
-          class="{headerStyles} w-full py-3 flex items-center justify-start space-x-1 text-left text-base tracking-normal whitespace-nowrap font-normal"
+          class="{headerStyles} w-full py-2 flex items-center justify-start space-x-1 text-left text-base tracking-normal whitespace-nowrap font-normal"
         >
           <span>{field.headerLabel}</span>
           {#if sortBy === field.slug}
@@ -74,7 +75,7 @@
       </BaseDropdown>
     {:else}
       <div
-        class="{headerStyles} p-3 text-left text-base font-normal tracking-normal whitespace-nowrap"
+        class="{headerStyles} py-2 text-left text-base font-normal tracking-normal whitespace-nowrap"
       >
         {field.headerLabel}
       </div>

diff --git a/svelte/lib/BaseTableRow.svelte b/svelte/lib/BaseTableRow.svelte
@@ -63,7 +63,7 @@
     <td>
       <button
         bind:this={checkboxButton}
-        class="pl-5 pr-1.5 h-[40px] flex items-center outline-none group cursor-default"
+        class="px-5 h-[40px] flex items-center outline-none group cursor-default"
         on:click|stopPropagation={() => {
           dispatch('checked', checked)
         }}

diff --git a/svelte/lib/InputCheckbox.svelte b/svelte/lib/InputCheckbox.svelte
@@ -25,7 +25,7 @@
   type="checkbox"
   {checked}
   {indeterminate}
-  class="form-checkbox w-4 h-4 text-workspace-accent focus:text-workspace-accent rounded border border-neutral-200 hover:border-neutral-300 focus:ring-0 focus:ring-offset-0"
+  class="form-checkbox w-4 h-4 text-workspace-accent focus:text-workspace-accent rounded border border-neutral-200 hover:border-neutral-300 group-hover:border-neutral-300 focus:ring-0 focus:ring-offset-0"
   on:change={updateInput}
   on:click|stopPropagation
 />
diff --git a/svelte/lib/TagStatus.svelte b/svelte/lib/TagStatus.svelte
@@ -39,7 +39,7 @@
   })
 </script>
 
-<span class="{tagStyles} rounded text-sm inline-flex items-center font-medium gap-1">
+<span class="{tagStyles} rounded text-sm inline-flex items-center font-medium gap-1 box-border h-5">
   {#if dot}
     <span class="{dotStyles} w-2 h-2 rounded-sm" />
   {/if}

diff --git a/svelte/stories/BaseTable.stories.ts b/svelte/stories/BaseTable.stories.ts
@@ -146,6 +146,7 @@ export const WithActions: Story = {
 export const WithActionsAndGroups: Story = {
   args: {
     selectable: true,
+    selectedTrackedBy: 'code',
     groupLabel: (data) => {
       const months = {
         '02': 'February',
@@ -613,6 +614,7 @@ export const WithGroupLabelAndNoCounter: Story = {
   args: {
     selectable: true,
     hideCounter: true,
+    selectedTrackedBy: 'code',
     groupLabel: (data) => {
       const months = {
         '02': 'February',
@@ -642,20 +644,20 @@ export const WithGroupLabelAndNoCounter: Story = {
         created_at: '2023-02-03',
         draft: true
       },
-      { code: 'CAB-0042', customer: 'Febify, Inc', total: '€87.403,50', created_at: '2023-02-23' },
+      { code: 'CAB-0041', customer: 'Febify, Inc', total: '€87.403,50', created_at: '2023-02-23' },
       {
         code: 'CAB-0042',
         customer: 'Marchify, Inc',
         total: '€87.403,50',
         created_at: '2023-03-23'
       },
       {
-        code: 'CAB-0042',
+        code: 'CAB-0043',
         customer: 'Marchify, Inc',
         total: '€87.403,50',
         created_at: '2023-03-25'
       },
-      { code: 'CAB-0042', customer: 'Julify, Inc', total: '€87.403,50', created_at: '2023-07-25' }
+      { code: 'CAB-0044', customer: 'Julify, Inc', total: '€87.403,50', created_at: '2023-07-25' }
     ]
   }
 }