[CL-458] Exclude badges from truncation and vertically center content (#11262)
This commit is contained in:
Victoria League
GitHub
parent
a6b9088940
commit
b149db9f4d
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue