From 3f3b32119cf1c213f87ccf71848ecc699683dda7 Mon Sep 17 00:00:00 2001
From: Victoria League <vleague@bitwarden.com>
Date: Wed, 2 Oct 2024 10:04:50 -0400
Subject: [PATCH] [CL-453] Fix multiselect chip spacing and truncation (#11300)

---
 .../src/form-field/form-field.component.html  |  2 +-
 .../src/form-field/multi-select.stories.ts    |  2 +-
 libs/components/src/form/form.stories.ts      | 26 ++++++++++++++++++-
 .../multi-select/multi-select.component.html  | 14 +++++-----
 .../src/multi-select/scss/bw.theme.scss       |  5 ++--
 5 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/libs/components/src/form-field/form-field.component.html b/libs/components/src/form-field/form-field.component.html
index 17561f861ca..f19a7cf7664 100644
--- a/libs/components/src/form-field/form-field.component.html
+++ b/libs/components/src/form-field/form-field.component.html
@@ -27,7 +27,7 @@
         [ngClass]="inputBorderClasses"
       >
         <label
-          class="tw-flex tw-gap-1 tw-text-sm tw-text-muted -tw-translate-y-2.5 tw-mb-0 tw-max-w-full tw-pointer-events-auto"
+          class="tw-flex tw-gap-1 tw-text-sm tw-text-muted -tw-translate-y-[0.675rem] tw-mb-0 tw-max-w-full tw-pointer-events-auto"
           [attr.for]="input.labelForId"
         >
           <ng-container *ngTemplateOutlet="labelContent"></ng-container>
diff --git a/libs/components/src/form-field/multi-select.stories.ts b/libs/components/src/form-field/multi-select.stories.ts
index 0993925364d..da4776ab025 100644
--- a/libs/components/src/form-field/multi-select.stories.ts
+++ b/libs/components/src/form-field/multi-select.stories.ts
@@ -202,7 +202,7 @@ export const Members: Story = {
       {
         id: "7",
         listName: "Final listName (fname@mail.me)",
-        labelName: "(fname@mail.me)",
+        labelName: "Final listName (fname@mail.me)",
         icon: "bwi-user",
       },
     ],
diff --git a/libs/components/src/form/form.stories.ts b/libs/components/src/form/form.stories.ts
index 8f08966ba5c..d5184947cc9 100644
--- a/libs/components/src/form/form.stories.ts
+++ b/libs/components/src/form/form.stories.ts
@@ -16,6 +16,7 @@ import { CheckboxModule } from "../checkbox";
 import { FormControlModule } from "../form-control";
 import { FormFieldModule } from "../form-field";
 import { InputModule } from "../input/input.module";
+import { MultiSelectModule } from "../multi-select";
 import { RadioButtonModule } from "../radio-button";
 import { SelectModule } from "../select";
 import { I18nMockService } from "../utils/i18n-mock.service";
@@ -36,6 +37,7 @@ export default {
         CheckboxModule,
         RadioButtonModule,
         SelectModule,
+        MultiSelectModule,
       ],
       providers: [
         {
@@ -90,7 +92,7 @@ export const FullExample: Story = {
       submit: () => exampleFormObj.markAllAsTouched(),
       ...args,
     },
-    template: `
+    template: /*html*/ `
       <form [formGroup]="formObj" (ngSubmit)="submit()">
         <bit-form-field>
           <bit-label>Name</bit-label>
@@ -109,6 +111,19 @@ export const FullExample: Story = {
           </bit-select>
         </bit-form-field>
 
+        <bit-form-field>
+          <bit-label>Groups</bit-label>
+          <bit-multi-select
+            class="tw-w-full"
+            formControlName="select"
+            [baseItems]="baseItems"
+            [removeSelectedItems]="removeSelectedItems"
+            [loading]="false"
+            [disabled]="false"
+            (onItemsConfirmed)="onItemsConfirmed($event)">
+          </bit-multi-select>
+        </bit-form-field>
+
         <bit-form-field>
           <bit-label>Age</bit-label>
           <input
@@ -146,5 +161,14 @@ export const FullExample: Story = {
 
   args: {
     countries,
+    baseItems: [
+      { id: "1", listName: "Group 1", labelName: "Group 1", icon: "bwi-family" },
+      { id: "2", listName: "Group 2", labelName: "Group 2", icon: "bwi-family" },
+      { id: "3", listName: "Group 3", labelName: "Group 3", icon: "bwi-family" },
+      { id: "4", listName: "Group 4", labelName: "Group 4", icon: "bwi-family" },
+      { id: "5", listName: "Group 5", labelName: "Group 5", icon: "bwi-family" },
+      { id: "6", listName: "Group 6", labelName: "Group 6", icon: "bwi-family" },
+      { id: "7", listName: "Group 7", labelName: "Group 7", icon: "bwi-family" },
+    ],
   },
 };
diff --git a/libs/components/src/multi-select/multi-select.component.html b/libs/components/src/multi-select/multi-select.component.html
index 6e0db436157..0c45e2d333f 100644
--- a/libs/components/src/multi-select/multi-select.component.html
+++ b/libs/components/src/multi-select/multi-select.component.html
@@ -27,17 +27,15 @@
       type="button"
       bitBadge
       variant="primary"
-      class="tw-mr-1 disabled:tw-border-0"
+      class="tw-mr-1 disabled:tw-border-0 tw-flex tw-gap-1.5 tw-items-center"
       [disabled]="disabled"
       (click)="clear(item)"
     >
-      <i
-        *ngIf="item.icon != null"
-        class="tw-mr-1 bwi bwi-fw {{ item.icon }}"
-        aria-hidden="true"
-      ></i>
-      {{ item.labelName }}
-      <i class="bwi bwi-fw bwi-close bwi-sm tw-ml-1" aria-hidden="true"></i>
+      <i *ngIf="item.icon != null" class="bwi bwi-fw {{ item.icon }}" aria-hidden="true"></i>
+      <span class="tw-truncate">
+        {{ item.labelName }}
+      </span>
+      <i class="bwi bwi-fw bwi-close bwi-sm" aria-hidden="true"></i>
     </button>
   </ng-template>
   <ng-template ng-option-tmp let-item="item">
diff --git a/libs/components/src/multi-select/scss/bw.theme.scss b/libs/components/src/multi-select/scss/bw.theme.scss
index b697cfbf62f..9e9ef275005 100644
--- a/libs/components/src/multi-select/scss/bw.theme.scss
+++ b/libs/components/src/multi-select/scss/bw.theme.scss
@@ -107,7 +107,7 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
     }
     .ng-value-container {
       align-items: center;
-      padding-left: $ng-select-value-padding-left;
+      padding: 6px 0px 5px $ng-select-value-padding-left;
       @include rtl {
         padding-right: $ng-select-value-padding-left;
         padding-left: 0;
@@ -160,11 +160,10 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
         }
         .ng-value {
           font-size: $ng-select-value-font-size;
-          margin-bottom: 5px;
           color: $ng-select-value-text;
           background-color: $ng-select-selected;
           border-radius: 2px;
-          margin-right: 5px;
+          margin: 4px 5px 4px 0px;
           @include rtl {
             margin-right: 0;
             margin-left: 5px;