vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

[CL-280] truncate overflow text in bit-item (#8992)

This commit is contained in:
Will Martin 2024-05-06 10:29:23 -04:00 committed by GitHub
parent 4877f08ef7
commit 76cc0f43aa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
libs/components/src/item/item-content.component.html
View File

@ -1,11 +1,11 @@
<div class="tw-flex tw-gap-2 tw-items-center"> <div class="tw-flex tw-gap-2 tw-items-center tw-w-full">
<ng-content select="[slot=start]"></ng-content> <ng-content select="[slot=start]"></ng-content>
<div class="tw-flex tw-flex-col tw-items-start tw-text-start tw-w-full [&_p]:tw-mb-0"> <div class="tw-flex tw-flex-col tw-items-start tw-text-start tw-w-full [&_p]:tw-mb-0">
<div class="tw-text-main tw-text-base"> <div class="tw-text-main tw-text-base tw-w-full tw-truncate">
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>
<div class="tw-text-muted tw-text-sm"> <div class="tw-text-muted tw-text-sm tw-w-full tw-truncate">
<ng-content select="[slot=secondary]"></ng-content> <ng-content select="[slot=secondary]"></ng-content>
</div> </div>
</div> </div>

2
libs/components/src/item/item.component.html
View File

@ -7,7 +7,7 @@
: 'tw-border-b-secondary-300 [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-border-b-transparent' : 'tw-border-b-secondary-300 [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-border-b-transparent'
" "
> >
<bit-item-action class="item-main-content tw-block tw-w-full"> <bit-item-action class="item-main-content tw-block tw-flex-1 tw-overflow-hidden">
<ng-content></ng-content> <ng-content></ng-content>
</bit-item-action> </bit-item-action>

12
libs/components/src/item/item.stories.ts
View File

@ -113,11 +113,19 @@ export const TextOverflow: Story = {
render: (args) => ({ render: (args) => ({
props: args, props: args,
template: /*html*/ ` template: /*html*/ `
<div class="tw-text-main tw-mb-4">TODO: Fix truncation</div>
<bit-item> <bit-item>
<bit-item-content> <bit-item-content>
Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo!
<ng-container slot="secondary">Worlddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd!</ng-container>
</bit-item-content> </bit-item-content>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitIconButton="bwi-clone"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v"></button>
</bit-item-action>
</ng-container>
</bit-item> </bit-item>
`, `,
}), }),