From 70ef1bcccd208bf8a587912e7a0adb84f4f56eca Mon Sep 17 00:00:00 2001
From: jaasen-livefront <jaasen@livefront.com>
Date: Tue, 14 Oct 2025 16:24:08 -0700
Subject: [PATCH] add trunate option to callout

---
 .../src/callout/callout.component.html        | 18 +++----
 .../src/callout/callout.component.ts          | 11 ++++
 .../components/src/callout/callout.stories.ts | 50 +++++++++++++++++++
 3 files changed, 70 insertions(+), 9 deletions(-)

diff --git a/libs/components/src/callout/callout.component.html b/libs/components/src/callout/callout.component.html
index e0fe0a182ea..953df54d7b7 100644
--- a/libs/components/src/callout/callout.component.html
+++ b/libs/components/src/callout/callout.component.html
@@ -1,25 +1,25 @@
 <aside
   class="tw-mb-4 tw-box-border tw-border tw-border-solid tw-rounded-lg tw-bg-background tw-ps-4 tw-pe-4 tw-py-3 tw-leading-5 tw-flex tw-gap-2"
-  [ngClass]="[calloutClass()]"
+  [ngClass]="[calloutClass(), truncate ? 'tw-items-center' : '']"
   [attr.aria-labelledby]="titleId"
 >
   @let title = titleComputed();
   @let icon = iconComputed();
 
   @if (icon) {
-    <i
-      class="bwi tw-relative"
-      [ngClass]="[icon, title ? 'tw-top-[3px] tw-self-start' : 'tw-top-[1px]']"
-      aria-hidden="true"
-    ></i>
+    <i class="bwi tw-relative" [ngClass]="[icon, iconClass()]" aria-hidden="true"></i>
   }
-  <div class="tw-flex tw-flex-col tw-gap-0.5">
+  <div class="tw-flex tw-flex-col tw-gap-0.5" [ngClass]="truncate ? 'tw-truncate' : ''">
     @if (title) {
-      <header id="{{ titleId }}" class="tw-text-base tw-font-semibold">
+      <header
+        id="{{ titleId }}"
+        class="tw-text-base tw-font-semibold"
+        [ngClass]="truncate ? 'tw-truncate' : ''"
+      >
         {{ title }}
       </header>
     }
-    <div bitTypography="body2">
+    <div bitTypography="body2" [ngClass]="truncate ? 'tw-truncate' : ''">
       <ng-content></ng-content>
     </div>
   </div>
diff --git a/libs/components/src/callout/callout.component.ts b/libs/components/src/callout/callout.component.ts
index 62321a34d91..6938e26e2cf 100644
--- a/libs/components/src/callout/callout.component.ts
+++ b/libs/components/src/callout/callout.component.ts
@@ -37,6 +37,7 @@ export class CalloutComponent {
   readonly type = input<CalloutTypes>("info");
   readonly icon = input<string>();
   readonly title = input<string>();
+  readonly truncate = input(false);
   readonly useAlertRole = input(false);
   readonly iconComputed = computed(() => this.icon() ?? defaultIcon[this.type()]);
   readonly titleComputed = computed(() => {
@@ -53,6 +54,16 @@ export class CalloutComponent {
 
   constructor(private i18nService: I18nService) {}
 
+  protected readonly iconClass = computed(() => {
+    if (!this.title() && this.truncate()) {
+      return "";
+    }
+    if (this.iconComputed() && this.titleComputed()) {
+      return "tw-top-[3px] tw-self-start";
+    }
+    return "tw-top-[1px]";
+  });
+
   protected readonly calloutClass = computed(() => {
     switch (this.type()) {
       case "danger":
diff --git a/libs/components/src/callout/callout.stories.ts b/libs/components/src/callout/callout.stories.ts
index c2185203034..9710bc4a21e 100644
--- a/libs/components/src/callout/callout.stories.ts
+++ b/libs/components/src/callout/callout.stories.ts
@@ -122,3 +122,53 @@ export const WithTextButton: Story = {
     icon: "",
   },
 };
+
+export const TruncateWithTitle: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="width: 300px;">
+        <bit-callout ${formatArgsForCodeSnippet<CalloutComponent>(args)}>
+          This is a really long callout that should truncate when it reaches the end of the container. This is a really long title that should truncate. Like really, really, really, ridiculously long title.
+        </bit-callout>
+      </div>
+    `,
+  }),
+  args: {
+    title: "Title",
+    truncate: true,
+  },
+};
+
+export const TruncateWithoutTitle: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="width: 300px;">
+        <bit-callout ${formatArgsForCodeSnippet<CalloutComponent>(args)}>
+          This is a really long callout that should truncate when it reaches the end of the container. This is a really long title that should truncate. Like really, really, really, ridiculously long title.
+        </bit-callout>
+      </div>
+    `,
+  }),
+  args: {
+    truncate: true,
+  },
+};
+
+export const TruncateWithoutContent: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="width: 300px;">
+        <bit-callout ${formatArgsForCodeSnippet<CalloutComponent>(args)}>
+        </bit-callout>
+      </div>
+    `,
+  }),
+  args: {
+    title:
+      "This is a really long title that should truncate. Like really, really, really, ridiculously long title.",
+    truncate: true,
+  },
+};