[CL-569] Optionally allow item content to wrap

bitwarden · Jan 31, 2025 · e52f074 · e52f074
1 parent 3b8b9c9
commit e52f074
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 3 deletions.
diff --git a/libs/components/src/item/item-content.component.html b/libs/components/src/item/item-content.component.html
@@ -6,14 +6,26 @@
       bitTypography="body2"
       class="tw-text-main tw-truncate tw-inline-flex tw-items-center tw-gap-1.5 tw-w-full"
     >
-      <div class="tw-truncate">
+      <div
+        [ngClass]="{
+          'tw-truncate': truncate,
+          'tw-text-wrap tw-overflow-auto tw-break-words': !truncate,
+        }"
+      >
         <ng-content></ng-content>
       </div>
       <div class="tw-flex-grow">
         <ng-content select="[slot=default-trailing]"></ng-content>
       </div>
     </div>
-    <div bitTypography="helper" class="tw-text-muted tw-w-full tw-truncate">
+    <div
+      bitTypography="helper"
+      class="tw-text-muted tw-w-full"
+      [ngClass]="{
+        'tw-truncate': truncate,
+        'tw-text-wrap tw-overflow-auto tw-break-words': !truncate,
+      }"
+    >
       <ng-content select="[slot=secondary]"></ng-content>
     </div>
   </div>

diff --git a/libs/components/src/item/item-content.component.ts b/libs/components/src/item/item-content.component.ts
@@ -6,6 +6,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   ElementRef,
+  Input,
   signal,
   ViewChild,
 } from "@angular/core";
@@ -32,6 +33,13 @@ export class ItemContentComponent implements AfterContentChecked {
 
   protected endSlotHasChildren = signal(false);
 
+  /**
+   * Determines whether text will truncate or wrap.
+   *
+   * Default behavior is truncation.
+   */
+  @Input() truncate = true;
+
   ngAfterContentChecked(): void {
     this.endSlotHasChildren.set(this.endSlot?.nativeElement.childElementCount > 0);
   }

diff --git a/libs/components/src/item/item.mdx b/libs/components/src/item/item.mdx
@@ -111,6 +111,30 @@ Actions are commonly icon buttons or badge buttons.
 </bit-item>
 ```
 
+## Text Overflow Behavior
+
+The default behavior for long text is to truncate it. However, you have the option of changing it to
+wrap instead if that is what the design calls for.
+
+This can be changed by passing `[truncate]="false"` to the `bit-item-content`.
+
+```html
+<bit-item>
+  <bit-item-content [truncate]="false">
+    Long text goes here!
+    <ng-container slot="secondary">This could also be very long text</ng-container>
+  </bit-item-content>
+</bit-item>
+```
+
+### Truncation (Default)
+
+<Story of={stories.TextOverflowTruncate} />
+
+### Wrap
+
+<Story of={stories.TextOverflowWrap} />
+
 ## Item Groups
 
 Groups of items can be associated by wrapping them in the `<bit-item-group>`.

diff --git a/libs/components/src/item/item.stories.ts b/libs/components/src/item/item.stories.ts
@@ -135,7 +135,7 @@ export const ContentTypes: Story = {
   }),
 };
 
-export const TextOverflow: Story = {
+export const TextOverflowTruncate: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
@@ -158,6 +158,29 @@ export const TextOverflow: Story = {
   }),
 };
 
+export const TextOverflowWrap: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+      <bit-item>
+        <bit-item-content [truncate]="false">
+          <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
+          Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo!
+          <ng-container slot="secondary">Worlddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd!</ng-container>
+        </bit-item-content>
+        <ng-container slot="end">
+          <bit-item-action>
+            <button type="button" bitIconButton="bwi-clone" size="small"></button>
+          </bit-item-action>
+          <bit-item-action>
+            <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+          </bit-item-action>
+        </ng-container>
+      </bit-item>
+    `,
+  }),
+};
+
 const multipleActionListTemplate = /*html*/ `
   <bit-item-group aria-label="Multiple Action List">
     <bit-item>