From ae697440b40a9b80f190fd5493a0eb07c572f542 Mon Sep 17 00:00:00 2001 From: jaasen-livefront Date: Fri, 17 Oct 2025 11:50:47 -0700 Subject: [PATCH 1/3] add wrapped story --- .../src/callout/callout.component.html | 7 ++++--- libs/components/src/callout/callout.stories.ts | 17 +++++++++++++++++ 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/libs/components/src/callout/callout.component.html b/libs/components/src/callout/callout.component.html index 0336cf95cda..76b34f57246 100644 --- a/libs/components/src/callout/callout.component.html +++ b/libs/components/src/callout/callout.component.html @@ -5,6 +5,7 @@ > @let title = titleComputed(); @let icon = iconComputed(); + @let _truncate = truncate(); @if (icon) { } -
+
@if (title) {
{{ title }}
} -
+
diff --git a/libs/components/src/callout/callout.stories.ts b/libs/components/src/callout/callout.stories.ts index 2b10c6e7d13..9ee3e8eafd0 100644 --- a/libs/components/src/callout/callout.stories.ts +++ b/libs/components/src/callout/callout.stories.ts @@ -123,6 +123,23 @@ export const WithTextButton: Story = { }, }; +export const WithWrappingContent: Story = { + render: (args) => ({ + props: args, + template: ` + (args)}> + This is a really long callout that should wrap when it reaches the end of the container. This is a really long callout that should wrap when it reaches the end of the container. + This is a really long callout that should wrap when it reaches the end of the container. This is a really long callout that should wrap when it reaches the end of the container. + This is a really long callout that should wrap when it reaches the end of the container. This is a really long callout that should wrap when it reaches the end of the container. + + `, + }), + args: { + type: "default", + icon: "bwi-globe", + }, +}; + export const Truncate: Story = { render: (args) => ({ props: args, From 5415b9807f495b61c8a305e46c442ef50524f52c Mon Sep 17 00:00:00 2001 From: jaasen-livefront Date: Fri, 17 Oct 2025 13:18:00 -0700 Subject: [PATCH 2/3] add title --- libs/components/src/callout/callout.component.html | 1 + 1 file changed, 1 insertion(+) diff --git a/libs/components/src/callout/callout.component.html b/libs/components/src/callout/callout.component.html index 76b34f57246..0e496db00ab 100644 --- a/libs/components/src/callout/callout.component.html +++ b/libs/components/src/callout/callout.component.html @@ -18,6 +18,7 @@ @if (title) {
From d45550b0b1a2b3a43676115dcb8e709f87bb982b Mon Sep 17 00:00:00 2001 From: jaasen-livefront Date: Fri, 17 Oct 2025 13:44:22 -0700 Subject: [PATCH 3/3] add title attrs --- .../src/callout/callout.component.html | 9 ++++++-- .../src/callout/callout.component.ts | 21 ++++++++++++------- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/libs/components/src/callout/callout.component.html b/libs/components/src/callout/callout.component.html index 0e496db00ab..569daa643f3 100644 --- a/libs/components/src/callout/callout.component.html +++ b/libs/components/src/callout/callout.component.html @@ -18,14 +18,19 @@ @if (title) {
{{ title }}
} -
+
diff --git a/libs/components/src/callout/callout.component.ts b/libs/components/src/callout/callout.component.ts index fd6e3e13d0d..b097e1b0914 100644 --- a/libs/components/src/callout/callout.component.ts +++ b/libs/components/src/callout/callout.component.ts @@ -1,7 +1,8 @@ -import { Component, computed, input } from "@angular/core"; +import { AfterViewInit, Component, computed, ElementRef, input, ViewChild } from "@angular/core"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; +import { A11yTitleDirective } from "../a11y"; import { SharedModule } from "../shared"; import { TypographyModule } from "../typography"; @@ -31,12 +32,12 @@ let nextId = 0; @Component({ selector: "bit-callout", templateUrl: "callout.component.html", - imports: [SharedModule, TypographyModule], + imports: [A11yTitleDirective, SharedModule, TypographyModule], }) -export class CalloutComponent { +export class CalloutComponent implements AfterViewInit { readonly type = input("info"); readonly icon = input(); - readonly title = input(); + readonly title = input(); readonly truncate = input(false); readonly useAlertRole = input(false); readonly iconComputed = computed(() => @@ -44,10 +45,6 @@ export class CalloutComponent { ); readonly titleComputed = computed(() => { const title = this.title(); - if (title === null) { - return undefined; - } - const type = this.type(); if (title == null && defaultI18n[type] != null) { return this.i18nService.t(defaultI18n[type]); @@ -58,8 +55,16 @@ export class CalloutComponent { protected readonly titleId = `bit-callout-title-${nextId++}`; + @ViewChild("content", { static: false }) + private contentRef!: ElementRef; + contentText = ""; + constructor(private i18nService: I18nService) {} + ngAfterViewInit() { + this.contentText = this.contentRef?.nativeElement?.textContent?.trim() ?? ""; + } + protected readonly calloutClass = computed(() => { switch (this.type()) { case "danger":