Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-25 12:15:18 +01:00
Code Issues Projects Releases Wiki Activity

[CL-458] Exclude badges from truncation and vertically center content (#11262)

Browse Source
This commit is contained in:
Victoria League 2024-09-30 11:45:51 -04:00 committed by GitHub
parent a6b9088940
commit b149db9f4d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 51 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.html
View File

@ -1,11 +1,9 @@
<bit-item>
<button bit-item-content type="button" (click)="openAttachments()">
<p class="tw-m-0">
{{ "attachments" | i18n }}
<span *ngIf="!canAccessAttachments" bitBadge variant="success" class="tw-ml-2">
{{ "premium" | i18n }}
</span>
</p>
{{ "attachments" | i18n }}
<span *ngIf="!canAccessAttachments" bitBadge variant="success" slot="default-trailing">
{{ "premium" | i18n }}
</span>
<ng-container slot="end">
<i class="bwi bwi-popout" aria-hidden="true" *ngIf="openAttachmentsInPopout"></i>
<i class="bwi bwi-angle-right" aria-hidden="true" *ngIf="!openAttachmentsInPopout"></i>

10
apps/web/src/app/vault/individual-vault/add-edit-v2.component.html
View File

@ -12,12 +12,10 @@
>
<bit-item slot="attachment-button">
<button bit-item-content type="button" (click)="openAttachmentsDialog()">
<p class="tw-m-0">
{{ "attachments" | i18n }}
<span *ngIf="!canAccessAttachments" bitBadge variant="success" class="tw-ml-2">
{{ "premium" | i18n }}
</span>
</p>
{{ "attachments" | i18n }}
<span *ngIf="!canAccessAttachments" bitBadge variant="success" slot="default-trailing">
{{ "premium" | i18n }}
</span>
<i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
</button>
</bit-item>

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

@ -2,8 +2,16 @@
<ng-content select="[slot=start]"></ng-content>
<div class="tw-flex tw-flex-col tw-items-start tw-text-start tw-w-full tw-truncate [&_p]:tw-mb-0">
<div class="tw-text-main tw-text-base tw-w-full tw-truncate">
<ng-content></ng-content>
<div
bitTypography="body2"
class="tw-text-main tw-truncate tw-inline-flex tw-items-center tw-gap-1.5 tw-w-full"
>
<div class="tw-truncate">
<ng-content></ng-content>
</div>
<div class="tw-flex-grow">
<ng-content select="[slot=default-trailing]"></ng-content>
</div>
</div>
<div class="tw-text-muted tw-text-sm tw-w-full tw-truncate">
<ng-content select="[slot=secondary]"></ng-content>

14
libs/components/src/item/item.mdx
View File

@ -55,12 +55,13 @@ The content can be a button, anchor, or static container.
`bit-item-content` contains the following slots to help position the content:
| Slot | Description |
| ------------------ | --------------------------------------------------- |
| default | primary text or arbitrary content; fan favorite |
| `slot="secondary"` | supporting text; under the default slot |
| `slot="start"` | commonly an icon or avatar; before the default slot |
| `slot="end"` | commonly an icon; after the default slot |
| Slot | Description |
| ------------------------- | --------------------------------------------------------------------------------------------------------- |
| default | primary text or arbitrary content; fan favorite |
| `slot="secondary"` | supporting text; under the default slot |
| `slot="start"` | commonly an icon or avatar; before the default slot |
| `slot="default-trailing"` | commonly a badge; default content that should not be truncated and is placed right after the default slot |
| `slot="end"` | commonly an icon; placed at the far end after the default slot |
- Note: There is also an `end` slot within `bit-item` itself. Place
[interactive secondary actions](#secondary-actions) there, and place non-interactive content (such
@ -71,6 +72,7 @@ The content can be a button, anchor, or static container.
<button bit-item-content type="button">
<bit-avatar slot="start" text="Foo"></bit-avatar>
foo@bitwarden.com
<span bitBadge variant="primary" slot="default-trailing">Auto-fill</span>
<ng-container slot="secondary">
<div>Bitwarden.com</div>
<div><em>locked</em></div>

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

@ -322,6 +322,30 @@ export const SingleActionList: Story = {
}),
};
export const SingleActionWithBadge: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
<bit-item-group aria-label="Single Action With Badge">
<bit-item>
<a bit-item-content href="#">
Foobar
<span bitBadge variant="primary" slot="default-trailing">Auto-fill</span>
<i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
</a>
</bit-item>
<bit-item>
<a bit-item-content href="#">
Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo!
<span bitBadge variant="primary" slot="default-trailing">Auto-fill</span>
<i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
</a>
</bit-item>
</bit-item-group>
`,
}),
};
export const VirtualScrolling: Story = {
render: (_args) => ({
props: {
@ -329,7 +353,7 @@ export const VirtualScrolling: Story = {
},
template: /*html*/ `
<cdk-virtual-scroll-viewport [itemSize]="46" class="tw-h-[500px]">
<bit-item-group aria-label="Single Action List">
<bit-item-group aria-label="Virtual Scrolling">
<bit-item *cdkVirtualFor="let item of data">
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>