Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-30 17:47:44 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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>
<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>
</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>
</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'
"
>
<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>
</bit-item-action>

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

@ -113,11 +113,19 @@ export const TextOverflow: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
<div class="tw-text-main tw-mb-4">TODO: Fix truncation</div>
<bit-item>
<bit-item-content>
Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo!
<ng-container slot="secondary">Worlddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd!</ng-container>
</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>
`,
}),