From 95de2feec362bd1838b06a6cf205a885dc2f4612 Mon Sep 17 00:00:00 2001
From: Victoria League <vleague@bitwarden.com>
Date: Tue, 24 Sep 2024 12:27:27 -0400
Subject: [PATCH] [CL-446] Update hover state for unselected chip selects
 (#11172)

---
 .../src/chip-select/chip-select.component.html    | 15 +++++++++++----
 .../src/chip-select/chip-select.stories.ts        |  7 ++++++-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/libs/components/src/chip-select/chip-select.component.html b/libs/components/src/chip-select/chip-select.component.html
index bb601f7f6a2..486bfc51665 100644
--- a/libs/components/src/chip-select/chip-select.component.html
+++ b/libs/components/src/chip-select/chip-select.component.html
@@ -1,10 +1,10 @@
 <div
   bitTypography="body2"
-  class="tw-inline-flex tw-items-center tw-rounded-full tw-w-full tw-border-solid tw-border tw-gap-1.5"
+  class="tw-inline-flex tw-items-center tw-rounded-full tw-w-full tw-border-solid tw-border tw-gap-1.5 tw-group/chip-select"
   [ngClass]="{
-    'tw-bg-text-muted hover:tw-bg-secondary-700 tw-text-contrast hover:tw-border-secondary-700':
+    '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-transparent hover:tw-border-secondary-700 !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-600 tw-ring-offset-1': focusVisibleWithin(),
@@ -16,6 +16,7 @@
     class="fvw-target tw-inline-flex tw-gap-1.5 tw-items-center tw-justify-between tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-w-full tw-py-1 tw-pl-3 last:tw-pr-3 [&:not(:last-child)]:tw-pr-0 tw-truncate tw-text-[color:inherit] tw-text-[length:inherit]"
     [ngClass]="{
       'tw-cursor-not-allowed': disabled,
+      'group-hover/chip-select:tw-text-secondary-700': !selectedOption && !disabled,
     }"
     [bitMenuTriggerFor]="menu"
     [disabled]="disabled"
@@ -24,7 +25,13 @@
   >
     <span class="tw-inline-flex tw-items-center tw-gap-1.5 tw-truncate">
       <i class="bwi !tw-text-[inherit]" [ngClass]="icon"></i>
-      <span class="tw-truncate">{{ label }}</span>
+      <span
+        class="tw-truncate"
+        [ngClass]="{
+          'group-hover/chip-select:tw-underline': !selectedOption && !disabled,
+        }"
+        >{{ label }}</span
+      >
     </span>
     <i
       *ngIf="!selectedOption"
diff --git a/libs/components/src/chip-select/chip-select.stories.ts b/libs/components/src/chip-select/chip-select.stories.ts
index d319679f62b..f8ed5ee49f3 100644
--- a/libs/components/src/chip-select/chip-select.stories.ts
+++ b/libs/components/src/chip-select/chip-select.stories.ts
@@ -211,12 +211,17 @@ export const TextOverflow: Story = {
 };
 
 export const Disabled: Story = {
-  ...Default,
   render: (args) => ({
     props: {
       ...args,
     },
     template: /* html */ `
+      <bit-chip-select
+        placeholderText="Folder"
+        placeholderIcon="bwi-folder"
+        [options]="options"
+        disabled
+      ></bit-chip-select>
       <bit-chip-select
         placeholderText="Folder"
         placeholderIcon="bwi-folder"