From 76cc0f43aafc175259952e56bff17d5815040100 Mon Sep 17 00:00:00 2001
From: Will Martin <contact@willmartian.com>
Date: Mon, 6 May 2024 10:29:23 -0400
Subject: [PATCH] [CL-280] truncate overflow text in bit-item (#8992)

---
 libs/components/src/item/item-content.component.html |  6 +++---
 libs/components/src/item/item.component.html         |  2 +-
 libs/components/src/item/item.stories.ts             | 12 ++++++++++--
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/libs/components/src/item/item-content.component.html b/libs/components/src/item/item-content.component.html
index d034a4a001..da69c79c1e 100644
--- a/libs/components/src/item/item-content.component.html
+++ b/libs/components/src/item/item-content.component.html
@@ -1,11 +1,11 @@
-<div class="tw-flex tw-gap-2 tw-items-center">
+<div class="tw-flex tw-gap-2 tw-items-center tw-w-full">
   <ng-content select="[slot=start]"></ng-content>
 
   <div class="tw-flex tw-flex-col tw-items-start tw-text-start tw-w-full [&_p]:tw-mb-0">
-    <div class="tw-text-main tw-text-base">
+    <div class="tw-text-main tw-text-base tw-w-full tw-truncate">
       <ng-content></ng-content>
     </div>
-    <div class="tw-text-muted tw-text-sm">
+    <div class="tw-text-muted tw-text-sm tw-w-full tw-truncate">
       <ng-content select="[slot=secondary]"></ng-content>
     </div>
   </div>
diff --git a/libs/components/src/item/item.component.html b/libs/components/src/item/item.component.html
index 0c91c6848e..c02117058f 100644
--- a/libs/components/src/item/item.component.html
+++ b/libs/components/src/item/item.component.html
@@ -7,7 +7,7 @@
       : 'tw-border-b-secondary-300 [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-border-b-transparent'
   "
 >
-  <bit-item-action class="item-main-content tw-block tw-w-full">
+  <bit-item-action class="item-main-content tw-block tw-flex-1 tw-overflow-hidden">
     <ng-content></ng-content>
   </bit-item-action>
 
diff --git a/libs/components/src/item/item.stories.ts b/libs/components/src/item/item.stories.ts
index b9d8d6cc2e..5198d7efa6 100644
--- a/libs/components/src/item/item.stories.ts
+++ b/libs/components/src/item/item.stories.ts
@@ -113,11 +113,19 @@ export const TextOverflow: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <div class="tw-text-main tw-mb-4">TODO: Fix truncation</div>
       <bit-item>
         <bit-item-content>
-          Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
+          Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo!
+          <ng-container slot="secondary">Worlddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd!</ng-container>
         </bit-item-content>
+        <ng-container slot="end">
+          <bit-item-action>
+            <button type="button" bitIconButton="bwi-clone"></button>
+          </bit-item-action>
+          <bit-item-action>
+            <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+          </bit-item-action>
+        </ng-container>
       </bit-item>
     `,
   }),