feat: Adding hover behaviour on select components (#732)

* fix : Adding hovet behaviour for select

* fix: lint errors

* fix: change hovere color for menu dropdown

* fix: prettier errors

* fix: multi select icon mode style and some code refactoring

Co-authored-by: Sandeep Kumar Sharma <itssharmasandeep@Sandeeps-MacBook-Pro.local>

Author: itssharmasandeep

projects/components/src/menu-dropdown/menu-dropdown.component.scss

@@ -23,6 +23,15 @@
   .trigger-label:not(:last-child) {
     margin-right: 8px;
   }
+
+  &:hover {
+    background-color: $gray-2;
+    border-radius: 50%;
+  }
+
+  &.labeled:hover {
+    border-radius: 6px;
+  }
 }
 
 .dropdown-content {

projects/components/src/menu-dropdown/menu-dropdown.component.ts

@@ -11,7 +11,7 @@ import { MenuItemComponent } from './menu-item/menu-item.component';
     <ht-event-blocker event="click" [enabled]="true">
       <ht-popover [closeOnClick]="true" [disabled]="this.disabled">
         <ht-popover-trigger>
-          <div class="trigger-content" [ngClass]="{ disabled: this.disabled }">
+          <div class="trigger-content" [ngClass]="{ disabled: this.disabled, labeled: !!this.label }">
             <ht-label *ngIf="this.label" class="trigger-label" [label]="this.label"> </ht-label>
             <ht-icon *ngIf="this.icon" class="trigger-icon" [icon]="this.icon" size="${IconSize.Small}"></ht-icon>
           </div>

projects/components/src/multi-select/multi-select.component.scss

@@ -29,11 +29,20 @@
     cursor: pointer;
     height: 34px;
 
+    &.open {
+      background-color: $gray-2;
+    }
+
     &.icon-mode {
       border: 1px solid transparent;
       border-radius: 64px;
       padding: 0 4px;
 
+      &.open {
+        background: $blue-2;
+        border-color: $blue-3;
+      }
+
       &:hover {
         color: $blue-5;
         background: $blue-1;
@@ -57,6 +66,10 @@
         margin-left: auto;
       }
     }
+
+    &:hover {
+      background-color: $gray-1;
+    }
   }
 }
 

projects/components/src/multi-select/multi-select.component.ts

@@ -44,7 +44,7 @@ import { MultiSelectJustify } from './multi-select-justify';
           <div
             class="trigger-content"
             [style.justify-content]="this.justify"
-            [ngClass]="this.triggerLabelDisplayMode"
+            [ngClass]="[this.triggerLabelDisplayMode, this.popoverOpen ? 'open' : '']"
             #triggerContainer
           >
             <ht-icon *ngIf="this.icon" [icon]="this.icon" [size]="this.iconSize"> </ht-icon>

projects/components/src/select/select.component.scss

@@ -31,6 +31,11 @@
     height: 100%;
   }
 
+  &.open {
+    background-color: $gray-2;
+    border-radius: 6px;
+  }
+
   &.border {
     &.group-right {
       border-radius: 0 2px 2px 0;
@@ -93,6 +98,11 @@
       margin-left: auto;
       color: $gray-7;
     }
+
+    &:hover {
+      background-color: $gray-1;
+      border-radius: 6px;
+    }
   }
 
   .icon-only {
@@ -111,6 +121,16 @@
       }
     }
 
+    &.open {
+      background-color: white;
+
+      .icon {
+        background: $blue-2;
+        border: 1px solid $blue-3;
+        border-radius: 50%;
+      }
+    }
+
     &.selected {
       color: $blue-5;
     }

projects/components/src/select/select.component.ts

@@ -35,14 +35,17 @@ import { SelectSize } from './select-size';
         this.groupPosition,
         selected ? selected.style.toString() : '',
         this.showBorder ? 'border' : '',
-        this.disabled ? 'disabled' : ''
+        this.disabled ? 'disabled' : '',
+        this.popoverOpen ? 'open' : ''
       ]"
       *htLetAsync="this.selected$ as selected"
     >
       <ht-popover
         [disabled]="this.disabled"
         [closeOnClick]="true"
         class="select-container"
+        (popoverOpen)="this.popoverOpen = true"
+        (popoverClose)="this.popoverOpen = false"
         [ngSwitch]="this.triggerDisplayMode"
       >
         <ht-popover-trigger>
@@ -61,7 +64,7 @@ import { SelectSize } from './select-size';
             <div
               *ngSwitchCase="'${SelectTriggerDisplayMode.Icon}'"
               class="trigger-content icon-only"
-              [ngClass]="this.selected !== undefined ? 'selected' : ''"
+              [ngClass]="{ selected: this.selected !== undefined, open: this.popoverOpen }"
             >
               <ht-icon
                 class="icon"
@@ -168,6 +171,8 @@ export class SelectComponent<V> implements AfterContentInit, OnChanges {
 
   public topControlItems$?: Observable<SelectControlOptionComponent<V>[]>;
 
+  public popoverOpen: boolean = false;
+
   public get justifyClass(): string {
     if (this.justify !== undefined) {
       return this.justify;