diff --git a/libs/components/src/item/item-content.component.html b/libs/components/src/item/item-content.component.html index 6f900c5c6e1..4010970dc9e 100644 --- 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" > -
+
-
+
diff --git a/libs/components/src/item/item-content.component.ts b/libs/components/src/item/item-content.component.ts index f6cc3f133ad..fcd98bc55f6 100644 --- 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 index ca697ebb436..ab39e738b26 100644 --- 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. ``` +## 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 + + + Long text goes here! + This could also be very long text + + +``` + +### Truncation (Default) + + + +### Wrap + + + ## Item Groups Groups of items can be associated by wrapping them in the ``. diff --git a/libs/components/src/item/item.stories.ts b/libs/components/src/item/item.stories.ts index 3a64a334d0a..fd2d59c7ac2 100644 --- 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*/ ` + + + + Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo! + Worlddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd! + + + + + + + + + + + `, + }), +}; + const multipleActionListTemplate = /*html*/ `