feat: icon only mode for select trigger

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

@@ -14,8 +14,6 @@
 .select {
   display: flex;
   align-items: center;
-  border: 1px solid $color-border;
-  border-radius: 6px;
   width: 100%;
   height: 34px;
 
@@ -63,6 +61,11 @@
     cursor: pointer;
     height: 100%;
 
+    &.menu-with-border {
+      border: 1px solid $color-border;
+      border-radius: 6px;
+    }
+
     &.justify-left {
       justify-content: flex-start;
     }
@@ -90,6 +93,27 @@
       color: $gray-7;
     }
   }
+
+  .icon-only {
+    display: flex;
+    align-items: center;
+
+    .icon {
+      padding: 6px;
+      border: 1px solid white;
+      box-sizing: border-box;
+
+      &:hover {
+        background: $blue-1;
+        border: 1px solid $blue-2;
+        border-radius: 50%;
+      }
+    }
+
+    &.selected {
+      color: $blue-5;
+    }
+  }
 }
 
 .select-content {

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

@@ -5,7 +5,7 @@ import { NavigationService } from '@hypertrace/common';
 import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest';
 import { EMPTY } from 'rxjs';
 import { SelectJustify } from './select-justify';
-import { SelectComponent } from './select.component';
+import { SelectComponent, SelectTriggerDisplayMode } from './select.component';
 import { SelectModule } from './select.module';
 
 describe('Select Component', () => {
@@ -79,6 +79,47 @@ describe('Select Component', () => {
     optionElements.forEach((element, index) => expect(element).toHaveText(selectionOptions[index].label));
   }));
 
+  test('should apply classes and render items correctly when triggerDisplayMode is menu with border', () => {
+    spectator = hostFactory(
+      `
+    <ht-select [selected]="selected" [triggerDisplayMode]="displayMode">
+      <ht-select-option *ngFor="let option of options; let i = index" [label]="option.label" [value]="option.value">
+      </ht-select-option>
+    </ht-select>`,
+      {
+        hostProps: {
+          options: selectionOptions,
+          selected: selectionOptions[1].value,
+          displayMode: SelectTriggerDisplayMode.MenuWithBorder
+        }
+      }
+    );
+
+    expect(spectator.query('.menu-with-border')).toExist();
+    expect(spectator.query('.icon-only')).not.toExist();
+  });
+
+  test('should apply classes and render items correctly when triggerDisplayMode is button', () => {
+    spectator = hostFactory(
+      `
+    <ht-select [selected]="selected" [triggerDisplayMode]="displayMode">
+      <ht-select-option *ngFor="let option of options; let i = index" [label]="option.label" [value]="option.value">
+      </ht-select-option>
+    </ht-select>`,
+      {
+        hostProps: {
+          options: selectionOptions,
+          selected: selectionOptions[1].value,
+          displayMode: SelectTriggerDisplayMode.Icon
+        }
+      }
+    );
+
+    expect(spectator.query('.menu-with-border')).not.toExist();
+    expect(spectator.query('.icon-only')).toExist();
+    expect(spectator.query('.icon-only')?.classList.contains('selected')).toBe(true);
+  });
+
   test('should notify and update selection when selection is changed', fakeAsync(() => {
     const onChange = jest.fn();
 

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

@@ -38,14 +38,36 @@ import { SelectSize } from './select-size';
       ]"
       *htLetAsync="this.selected$ as selected"
     >
-      <ht-popover [disabled]="this.disabled" [closeOnClick]="true" class="select-container">
+      <ht-popover
+        [disabled]="this.disabled"
+        [closeOnClick]="true"
+        class="select-container"
+        [ngSwitch]="this.triggerDisplayMode"
+      >
         <ht-popover-trigger>
-          <div class="trigger-content" [ngClass]="this.justifyClass">
-            <ht-icon *ngIf="this.icon" class="trigger-prefix-icon" [icon]="this.icon" size="${IconSize.Small}">
-            </ht-icon>
+          <div
+            *ngSwitchCase="'${SelectTriggerDisplayMode.MenuWithBorder}'"
+            class="trigger-content menu-with-border"
+            [ngClass]="[this.justifyClass]"
+          >
+            <ht-icon *ngIf="this.icon" class="trigger-prefix-icon" [icon]="this.icon" [size]="this.iconSize"> </ht-icon>
             <ht-label class="trigger-label" [label]="selected?.label || this.placeholder"> </ht-label>
             <ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" size="${IconSize.ExtraSmall}"> </ht-icon>
           </div>
+          <div
+            *ngSwitchCase="'${SelectTriggerDisplayMode.Icon}'"
+            class="trigger-content icon-only"
+            [ngClass]="this.selected !== undefined ? 'selected' : ''"
+          >
+            <ht-icon
+              class="icon"
+              *ngIf="this.icon"
+              [icon]="this.icon"
+              [size]="this.iconSize"
+              [htTooltip]="this.selected?.label || this.placeholder"
+            >
+            </ht-icon>
+          </div>
         </ht-popover-trigger>
         <ht-popover-content>
           <div class="select-content">
@@ -80,6 +102,12 @@ export class SelectComponent<V> implements AfterContentInit, OnChanges {
   @Input()
   public icon?: string;
 
+  @Input()
+  public iconSize?: IconSize = IconSize.Small;
+
+  @Input()
+  public triggerDisplayMode?: SelectTriggerDisplayMode = SelectTriggerDisplayMode.MenuWithBorder;
+
   @Input()
   public placeholder?: string;
 
@@ -164,3 +192,8 @@ export class SelectComponent<V> implements AfterContentInit, OnChanges {
     return this.items.find(item => item.value === value);
   }
 }
+
+export const enum SelectTriggerDisplayMode {
+  MenuWithBorder = 'menu-with-border',
+  Icon = 'icon'
+}

projects/components/src/select/select.module.ts

@@ -5,12 +5,13 @@ import { IconModule } from '../icon/icon.module';
 import { LabelModule } from '../label/label.module';
 import { LetAsyncModule } from '../let-async/let-async.module';
 import { PopoverModule } from '../popover/popover.module';
+import { TooltipModule } from '../tooltip/tooltip.module';
 import { SelectGroupComponent } from './select-group.component';
 import { SelectOptionComponent } from './select-option.component';
 import { SelectComponent } from './select.component';
 
 @NgModule({
-  imports: [FormsModule, CommonModule, IconModule, LabelModule, LetAsyncModule, PopoverModule],
+  imports: [FormsModule, CommonModule, IconModule, LabelModule, LetAsyncModule, PopoverModule, TooltipModule],
   declarations: [SelectComponent, SelectOptionComponent, SelectGroupComponent],
   exports: [SelectComponent, SelectOptionComponent, SelectGroupComponent]
 })