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

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

@@ -1,11 +1,9 @@
 <bit-item>
   <button bit-item-content type="button" (click)="openAttachments()">
-    <p class="tw-m-0">
+    {{ "attachments" | i18n }}
-      {{ "attachments" | i18n }}
+    <span *ngIf="!canAccessAttachments" bitBadge variant="success" slot="default-trailing">
-      <span *ngIf="!canAccessAttachments" bitBadge variant="success" class="tw-ml-2">
+      {{ "premium" | i18n }}
-        {{ "premium" | i18n }}
+    </span>
-      </span>
-    </p>
     <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>

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

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

libs/components/src/item/item-content.component.html

@@ -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">
+    <div
-      <ng-content></ng-content>
+      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>

libs/components/src/item/item.mdx

@@ -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                                         |
+| Slot                      | Description                                                                                               |
-| ------------------ | --------------------------------------------------- |
+| ------------------------- | --------------------------------------------------------------------------------------------------------- |
-| default            | primary text or arbitrary content; fan favorite     |
+| default                   | primary text or arbitrary content; fan favorite                                                           |
-| `slot="secondary"` | supporting text; under the default slot             |
+| `slot="secondary"`        | supporting text; under the default slot                                                                   |
-| `slot="start"`     | commonly an icon or avatar; before the default slot |
+| `slot="start"`            | commonly an icon or avatar; before the default slot                                                       |
-| `slot="end"`       | commonly an icon; after 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>

libs/components/src/item/item.stories.ts

@@ -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>