[CL-291] Finalize styling for chip select (#10771)

Co-authored-by: Vicki League <vleague@bitwarden.com>

libs/components/src/chip-select/chip-select.component.html

@@ -1,17 +1,19 @@
 <div
   bitTypography="body2"
-  class="tw-inline-flex tw-items-center tw-rounded-full tw-max-w-52 tw-border-solid tw-border tw-border-text-muted"
-  [ngClass]="[
-    selectedOption
-      ? 'tw-bg-text-muted tw-text-contrast tw-gap-1'
-      : 'tw-bg-transparent tw-text-muted tw-gap-1.5',
-    focusVisibleWithin() ? 'tw-ring-2 tw-ring-primary-500 tw-ring-offset-1' : '',
-  ]"
+  class="tw-inline-flex tw-items-center tw-rounded-full tw-max-w-52 tw-border-solid tw-border tw-gap-1.5 tw-min-h-[2.225rem]"
+  [ngClass]="{
+    'tw-bg-text-muted hover:tw-bg-secondary-700 tw-text-contrast hover:tw-border-secondary-700':
+      selectedOption && !disabled,
+    'tw-bg-transparent hover:tw-bg-background-alt !tw-text-muted': !selectedOption && !disabled,
+    'tw-bg-secondary-300 tw-text-muted tw-border-transparent': disabled,
+    'tw-border-text-muted': !disabled,
+    'tw-ring-2 tw-ring-primary-700 tw-ring-offset-1': focusVisibleWithin(),
+  }"
 >
   <!-- Primary button -->
   <button
     type="button"
-    class="fvw-target tw-inline-flex tw-gap-1.5 tw-items-center tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-max-w-full tw-py-1 tw-pl-3 last:tw-pr-3 tw-truncate tw-text-[inherit]"
+    class="fvw-target tw-inline-flex tw-gap-1.5 tw-items-center tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-max-w-full tw-py-1 tw-pl-3 last:tw-pr-3 [&:not(:last-child)]:tw-pr-0 tw-truncate tw-text-[inherit]"
     [ngClass]="{
       'tw-cursor-not-allowed': disabled,
     }"
@@ -24,7 +26,7 @@
     <span class="tw-truncate">{{ label }}</span>
     <i
       *ngIf="!selectedOption"
-      class="bwi"
+      class="bwi tw-p-1 tw-mt-0.5"
       [ngClass]="menuTrigger.isOpen ? 'bwi-angle-up' : 'bwi-angle-down'"
     ></i>
   </button>
@@ -35,7 +37,7 @@
     type="button"
     [attr.aria-label]="'removeItem' | i18n: label"
     [disabled]="disabled"
-    class="tw-bg-transparent hover:tw-bg-transparent tw-outline-none tw-rounded-full tw-p-1 tw-my-1 tw-mr-1 tw-text-[inherit] tw-border-solid tw-border tw-border-text-muted hover:tw-border-text-contrast hover:disabled:tw-border-transparent tw-aspect-square tw-flex tw-items-center tw-justify-center tw-h-fit focus-visible:tw-ring-2 tw-ring-text-contrast focus-visible:hover:tw-border-transparent"
+    class="tw-bg-transparent hover:tw-bg-transparent tw-outline-none tw-rounded-full tw-p-1 tw-px-1.5 tw-my-[0.175rem] tw-mr-2 tw-text-[inherit] tw-border-solid tw-border tw-border-transparent hover:tw-border-text-contrast hover:disabled:tw-border-transparent tw-flex tw-items-center tw-justify-center focus-visible:tw-ring-2 tw-ring-text-contrast focus-visible:hover:tw-border-transparent"
     [ngClass]="{
       'tw-cursor-not-allowed': disabled,
     }"
@@ -45,7 +47,7 @@
   </button>
 </div>
 
-<bit-menu #menu>
+<bit-menu #menu (closed)="handleMenuClosed()">
   <div *ngIf="renderedOptions" class="tw-max-h-80 tw-min-w-52 tw-max-w-80 tw-text-sm">
     <ng-container *ngIf="getParent(renderedOptions) as parent">
       <button

libs/components/src/chip-select/chip-select.component.ts

@@ -1,4 +1,11 @@
-import { Component, HostListener, Input, booleanAttribute, signal } from "@angular/core";
+import {
+  Component,
+  HostBinding,
+  HostListener,
+  Input,
+  booleanAttribute,
+  signal,
+} from "@angular/core";
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 
 import { compareValues } from "../../../common/src/platform/misc/compare-values";
@@ -62,6 +69,11 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor {
     this.focusVisibleWithin.set(false);
   }
 
+  @HostBinding("class")
+  get classList() {
+    return ["tw-inline-block"];
+  }
+
   /** Tree constructed from `this.options` */
   private rootTree: ChipSelectOption<T>;
 
@@ -81,6 +93,10 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor {
     return this.selectedOption?.icon || this.placeholderIcon;
   }
 
+  protected handleMenuClosed(): void {
+    this.renderedOptions = this.selectedOption ?? this.rootTree;
+  }
+
   protected selectOption(option: ChipSelectOption<T>, _event: MouseEvent) {
     this.selectedOption = option;
     this.onChange(option);

libs/components/src/chip-select/chip-select.stories.ts

@@ -35,6 +35,47 @@ export default {
 type Story = StoryObj<ChipSelectComponent & { value: any }>;
 
 export const Default: Story = {
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: /* html */ `
+      <bit-chip-select
+        placeholderText="Folder"
+        placeholderIcon="bwi-folder"
+        [options]="options"
+      ></bit-chip-select>
+      <bit-chip-select
+        placeholderText="Folder"
+        placeholderIcon="bwi-folder"
+        [options]="options"
+        [ngModel]="value"
+      ></bit-chip-select>
+    `,
+  }),
+  args: {
+    options: [
+      {
+        label: "Foo",
+        value: "foo",
+        icon: "bwi-folder",
+      },
+      {
+        label: "Bar",
+        value: "bar",
+        icon: "bwi-exclamation-triangle tw-text-danger",
+      },
+      {
+        label: "Baz",
+        value: "baz",
+        disabled: true,
+      },
+    ],
+    value: "foo",
+  },
+};
+
+export const MenuOpen: Story = {
   render: (args) => ({
     props: {
       ...args,

libs/components/src/menu/menu-trigger-for.directive.ts

@@ -106,6 +106,7 @@ export class MenuTriggerForDirective implements OnDestroy {
 
     this.isOpen = false;
     this.disposeAll();
+    this.menu.closed.emit();
   }
 
   private getClosedEvents(): Observable<any> {