Merge branch 'main' into summary-card-update

Author: arjunlalb

projects/components/src/combo-box/combo-box.component.scss

@@ -113,6 +113,7 @@
   }
 
   .popover-item {
+    @include body-1-regular($gray-7);
     height: 36px;
     padding: 2px 12px;
     cursor: pointer;

projects/components/src/input/input.component.scss

@@ -1,3 +1,4 @@
+@import 'mixins';
 @import 'color-palette';
 
 :host {
@@ -31,6 +32,7 @@
         padding-bottom: 0;
 
         .mat-form-field-label {
+          @include body-1-regular($gray-7);
           padding: 0 0 0 8px;
           line-height: initial;
           color: $gray-5;

projects/components/src/link/link.component.scss

@@ -2,6 +2,8 @@
 @import 'color-palette';
 
 .ht-link {
+  display: flex;
+  align-items: center;
   text-decoration-line: none;
   text-decoration: none;
   color: inherit;

projects/components/src/tabs/content/tab-group.component.scss

@@ -78,21 +78,8 @@
   flex-direction: row;
   align-items: center;
 
-  .tab-badge {
-    @include font-label($gray-5);
-    display: flex;
-    justify-content: center;
-    text-align: center;
-    margin-left: 6px;
-    padding: 0 6px;
-    height: 16px;
-    background-color: $gray-2;
-    border-radius: 8px;
-
-    &.active {
-      background-color: $gray-9;
-      color: white;
-    }
+  .tab-label-tag {
+    margin-left: 4px;
   }
 }
 

projects/components/src/tabs/content/tab-group.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, ContentChildren, QueryList } from '@angular/core';
+import { Color } from '@hypertrace/common';
 import { TabComponent } from './tab/tab.component';
 
 @Component({
@@ -12,9 +13,14 @@ import { TabComponent } from './tab/tab.component';
           <ng-template mat-tab-label>
             <div class="tab-label">
               {{ tab.label }}
-              <div *ngIf="tab.badge" [ngClass]="{ active: activeTabIndex === i }" class="tab-badge">
-                {{ tab.badge }}
-              </div>
+              <ng-container *ngIf="tab.labelTag">
+                <ht-label-tag
+                  class="tab-label-tag"
+                  [label]="tab.labelTag"
+                  [backgroundColor]="this.getBackgroundColor(i)"
+                  [labelColor]="this.getLabelColor(i)"
+                ></ht-label-tag>
+              </ng-container>
             </div>
             <div class="ink-bar" [ngClass]="{ active: activeTabIndex === i }"></div>
           </ng-template>
@@ -31,4 +37,12 @@ export class TabGroupComponent {
   public tabs!: QueryList<TabComponent>;
 
   public activeTabIndex: number = 0;
+
+  public getBackgroundColor(index: number): Color {
+    return this.activeTabIndex === index ? Color.Gray9 : Color.Gray2;
+  }
+
+  public getLabelColor(index: number): Color {
+    return this.activeTabIndex === index ? Color.White : Color.Gray5;
+  }
 }

projects/components/src/tabs/content/tab.module.ts

@@ -2,12 +2,13 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
+import { LabelTagModule } from '../../label-tag/label-tag.module';
 import { TabGroupComponent } from './tab-group.component';
 import { TabComponent } from './tab/tab.component';
 
 @NgModule({
   declarations: [TabGroupComponent, TabComponent],
   exports: [TabGroupComponent, TabComponent],
-  imports: [MatTabsModule, CommonModule, RouterModule]
+  imports: [MatTabsModule, CommonModule, RouterModule, LabelTagModule]
 })
 export class TabModule {}

projects/components/src/tabs/content/tab/tab.component.ts

@@ -12,5 +12,5 @@ export class TabComponent extends ContentHolder {
   public label!: string;
 
   @Input()
-  public badge?: string;
+  public labelTag?: string;
 }

projects/components/src/tabs/navigable/navigable-tab-group.component.scss

@@ -73,6 +73,10 @@
   padding-bottom: 6px;
 }
 
+.tab-label-tag {
+  margin-left: 4px;
+}
+
 .ink-bar {
   height: 2px; // plus tab-link is 48
   border-radius: 1px;

projects/components/src/tabs/navigable/navigable-tab-group.component.ts

@@ -1,6 +1,6 @@
 import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, QueryList } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { FeatureState, NavigationParams, NavigationParamsType, NavigationService } from '@hypertrace/common';
+import { Color, FeatureState, NavigationParams, NavigationParamsType, NavigationService } from '@hypertrace/common';
 import { merge, Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 import { NavigableTabComponent } from './navigable-tab.component';
@@ -22,6 +22,14 @@ import { NavigableTabComponent } from './navigable-tab.component';
                 class="tab-link"
               >
                 <ng-container *ngTemplateOutlet="tab.content"></ng-container>
+                <ng-container *ngIf="tab.labelTag">
+                  <ht-label-tag
+                    class="tab-label-tag"
+                    [label]="tab.labelTag"
+                    [backgroundColor]="this.getBackgroundColor(activeTab, tab)"
+                    [labelColor]="this.getLabelColor(activeTab, tab)"
+                  ></ht-label-tag>
+                </ng-container>
                 <span *ngIf="featureState === '${FeatureState.Preview}'" class="soon-container">
                   <span class="soon">SOON</span>
                 </span>
@@ -60,6 +68,14 @@ export class NavigableTabGroupComponent implements AfterContentInit {
     replaceCurrentHistory: tab.replaceHistory
   });
 
+  public getBackgroundColor(activeTab: NavigableTabComponent | undefined, tab: NavigableTabComponent): Color {
+    return activeTab === tab ? Color.Gray9 : Color.Gray2;
+  }
+
+  public getLabelColor(activeTab: NavigableTabComponent | undefined, tab: NavigableTabComponent): Color {
+    return activeTab === tab ? Color.White : Color.Gray5;
+  }
+
   private findActiveTab(): NavigableTabComponent | undefined {
     return this.tabs.find(tab => this.navigationService.isRelativePathActive([tab.path], this.activatedRoute));
   }

projects/components/src/tabs/navigable/navigable-tab.component.ts

@@ -18,6 +18,9 @@ export class NavigableTabComponent extends ContentHolder {
   @Input()
   public hidden: boolean = false;
 
+  @Input()
+  public labelTag?: string;
+
   @Input()
   public replaceHistory?: boolean;