From 3c7aa63f51939637a2d90508d3509624b52047eb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 25 Mar 2021 09:45:23 +0000
Subject: [PATCH] Add smart trunctation to all table cell types

---
 .../src/table/AttachmentRenderer.svelte       | 21 ++++++++++++-------
 .../src/table/RelationshipRenderer.svelte     | 21 ++++++++++++-------
 .../src/table/StringRenderer.svelte           |  1 +
 .../src/table/Table.svelte                    |  2 --
 4 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/packages/standard-components/src/table/AttachmentRenderer.svelte b/packages/standard-components/src/table/AttachmentRenderer.svelte
index 12f2b2d938..162e3211ab 100644
--- a/packages/standard-components/src/table/AttachmentRenderer.svelte
+++ b/packages/standard-components/src/table/AttachmentRenderer.svelte
@@ -1,15 +1,20 @@
 <script>
   export let value
+
+  const displayLimit = 5
+  $: attachments = value?.slice(0, displayLimit) ?? []
+  $: leftover = (value?.length ?? 0) - attachments.length
 </script>
 
-{#if value && value.length}
-  {#each value as attachment}
-    {#if attachment.type.startsWith('image')}
-      <img src={attachment.url} alt={attachment.extension} />
-    {:else}
-      <div class="file">{attachment.extension}</div>
-    {/if}
-  {/each}
+{#each attachments as attachment}
+  {#if attachment.type.startsWith('image')}
+    <img src={attachment.url} alt={attachment.extension} />
+  {:else}
+    <div class="file">{attachment.extension}</div>
+  {/if}
+{/each}
+{#if leftover}
+  <div>+{leftover} others</div>
 {/if}
 
 <style>
diff --git a/packages/standard-components/src/table/RelationshipRenderer.svelte b/packages/standard-components/src/table/RelationshipRenderer.svelte
index 7096101582..97c439e33e 100644
--- a/packages/standard-components/src/table/RelationshipRenderer.svelte
+++ b/packages/standard-components/src/table/RelationshipRenderer.svelte
@@ -2,14 +2,19 @@
   import "@spectrum-css/label/dist/index-vars.css"
 
   export let value
+
+  const displayLimit = 5
+  $: relationships = value?.slice(0, displayLimit) ?? []
+  $: leftover = (value?.length ?? 0) - relationships.length
 </script>
 
-{#if value && value.length}
-  {#each value as item}
-    {#if item && item.primaryDisplay}
-      <span class="spectrum-Label spectrum-Label--grey">
-        {item.primaryDisplay}
-      </span>
-    {/if}
-  {/each}
+{#each relationships as relationship}
+  {#if relationship?.primaryDisplay}
+    <span class="spectrum-Label spectrum-Label--grey">
+      {relationship.primaryDisplay}
+    </span>
+  {/if}
+{/each}
+{#if leftover}
+  <div>+{leftover} others</div>
 {/if}
diff --git a/packages/standard-components/src/table/StringRenderer.svelte b/packages/standard-components/src/table/StringRenderer.svelte
index 1850c9c602..92f3c035c8 100644
--- a/packages/standard-components/src/table/StringRenderer.svelte
+++ b/packages/standard-components/src/table/StringRenderer.svelte
@@ -8,5 +8,6 @@
   div {
     overflow: hidden;
     text-overflow: ellipsis;
+    max-width: 320px;
   }
 </style>
diff --git a/packages/standard-components/src/table/Table.svelte b/packages/standard-components/src/table/Table.svelte
index a41b08b437..b1f2a3ef2e 100644
--- a/packages/standard-components/src/table/Table.svelte
+++ b/packages/standard-components/src/table/Table.svelte
@@ -192,8 +192,6 @@
     justify-content: flex-start;
     align-items: center;
     gap: 4px;
-    max-width: 320px;
-    overflow: hidden;
   }
   .spectrum-Table-sortedIcon {
     opacity: 0;