bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-21 20:04:02 +00:00
Code Issues Releases Wiki Activity

add wrapped story

Browse Source
This commit is contained in:
jaasen-livefront
2025-10-17 11:50:47 -07:00
parent fc220504f1
commit ae697440b4
2 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
libs/components/src/callout/callout.component.html
View File

@@ -5,6 +5,7 @@
>
@let title = titleComputed();
@let icon = iconComputed();
@let _truncate = truncate();
@if (icon) {
<i
@@ -13,17 +14,17 @@
aria-hidden="true"
></i>
}
<div class="tw-flex tw-flex-col tw-gap-0.5" [ngClass]="truncate ? 'tw-truncate' : ''">
<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"
[ngClass]="truncate ? 'tw-truncate' : ''"
[ngClass]="_truncate ? 'tw-truncate' : ''"
>
{{ title }}
</header>
}
<div bitTypography="body2" [ngClass]="truncate ? 'tw-truncate' : ''">
<div bitTypography="body2" [ngClass]="_truncate ? 'tw-truncate' : ''">
<ng-content></ng-content>
</div>
</div>

17
libs/components/src/callout/callout.stories.ts
View File

@@ -123,6 +123,23 @@ export const WithTextButton: Story = {
},
};
export const WithWrappingContent: Story = {
render: (args) => ({
props: args,
template: `
<bit-callout ${formatArgsForCodeSnippet<CalloutComponent>(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.
</bit-callout>
`,
}),
args: {
type: "default",
icon: "bwi-globe",
},
};
export const Truncate: Story = {
render: (args) => ({
props: args,