From b149db9f4d129cd2ca06e9525da23e0ff381e9c4 Mon Sep 17 00:00:00 2001
From: Victoria League <vleague@bitwarden.com>
Date: Mon, 30 Sep 2024 11:45:51 -0400
Subject: [PATCH] [CL-458] Exclude badges from truncation and vertically center
 content (#11262)

---
 .../open-attachments.component.html           | 10 +++----
 .../add-edit-v2.component.html                | 10 +++----
 .../src/item/item-content.component.html      | 12 +++++++--
 libs/components/src/item/item.mdx             | 14 +++++-----
 libs/components/src/item/item.stories.ts      | 26 ++++++++++++++++++-
 5 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.html b/apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.html
index 6b2d8eaa0335..6345c3ea4e15 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.html
+++ b/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 }}
-      <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>
diff --git a/apps/web/src/app/vault/individual-vault/add-edit-v2.component.html b/apps/web/src/app/vault/individual-vault/add-edit-v2.component.html
index 6aa3e6106453..9a430b0aaa3c 100644
--- a/apps/web/src/app/vault/individual-vault/add-edit-v2.component.html
+++ b/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 }}
-            <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>
diff --git a/libs/components/src/item/item-content.component.html b/libs/components/src/item/item-content.component.html
index bed8b2f5b76e..d8e7b31c8303 100644
--- a/libs/components/src/item/item-content.component.html
+++ b/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">
-      <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>
diff --git a/libs/components/src/item/item.mdx b/libs/components/src/item/item.mdx
index 507d7d56a224..b5c7da80baa6 100644
--- a/libs/components/src/item/item.mdx
+++ b/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                                         |
-| ------------------ | --------------------------------------------------- |
-| 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>
diff --git a/libs/components/src/item/item.stories.ts b/libs/components/src/item/item.stories.ts
index b5212fd871a6..bb735fc55b47 100644
--- a/libs/components/src/item/item.stories.ts
+++ b/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>