feat: new inputs for newer panel style (#1512)

Author: itssharmasandeep

projects/components/src/panel/header/title/panel-title.component.scss

@@ -4,7 +4,6 @@
   @include subtitle-2;
   display: inline-flex;
   align-items: center;
-  padding: 4px 8px;
   border-radius: 2px;
 
   .label {

projects/components/src/panel/panel.component.scss

@@ -2,7 +2,7 @@
 @import 'color-palette';
 
 .ht-panel {
-  padding: 4px;
+  padding: 12px 10px;
   display: flex;
   flex-direction: column;
 
@@ -23,6 +23,11 @@
     overflow: auto;
     height: 100%;
   }
+
+  &.bordered {
+    border: 1px solid $gray-2;
+    border-radius: 10px;
+  }
 }
 
 .disabled {

projects/components/src/panel/panel.component.ts

@@ -11,6 +11,7 @@ import {
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
+import { Color } from '@hypertrace/common';
 import { PanelBodyComponent } from './body/panel-body.component';
 import { PanelHeaderComponent } from './header/panel-header.component';
 
@@ -19,7 +20,12 @@ import { PanelHeaderComponent } from './header/panel-header.component';
   styleUrls: ['./panel.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="ht-panel fill-container" [htLayoutChangeTrigger]="this.expanded">
+    <div
+      class="ht-panel fill-container"
+      [htLayoutChangeTrigger]="this.expanded"
+      [style.backgroundColor]="this.backgroundColor"
+      [ngClass]="{ bordered: this.showBorder }"
+    >
       <div *ngIf="this.header" [ngClass]="{ disabled: this.disabled, expanded: this.expanded }" class="header">
         <ng-container #headerContainer></ng-container>
       </div>
@@ -36,6 +42,12 @@ export class PanelComponent implements AfterViewInit {
   @Input()
   public disabled: boolean = false;
 
+  @Input()
+  public backgroundColor: string = Color.White;
+
+  @Input()
+  public showBorder: boolean = false;
+
   @Output()
   public readonly expandedChange: EventEmitter<boolean> = new EventEmitter();