refactor: minor style change support for combo box (hypertrace#1336)

Author: anandtiwary

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

@@ -11,9 +11,12 @@
   align-items: center;
   height: inherit;
   width: inherit;
-  border: 1px solid $color-border;
   border-radius: 6px;
 
+  &.show-border {
+    border: 1px solid $color-border;
+  }
+
   &.chip {
     border: 1px solid transparent;
 

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

@@ -39,7 +39,11 @@ import { ComboBoxMode, ComboBoxOption, ComboBoxResult } from './combo-box-api';
         <div
           #trigger
           class="popover-trigger"
-          [ngClass]="this.mode"
+          [ngClass]="{
+            input: this.mode === '${ComboBoxMode.Input}',
+            chip: this.mode === '${ComboBoxMode.Chip}',
+            'show-border': this.showBorder
+          }"
           [class.has-text]="this.text"
           [class.input-focused]="input.matches(':focus')"
         >
@@ -149,6 +153,9 @@ export class ComboBoxComponent<TValue = string> implements AfterViewInit, OnChan
   @Input()
   public options?: ComboBoxOption<TValue>[] = [];
 
+  @Input()
+  public showBorder: boolean = true;
+
   @Output()
   public readonly textChange: EventEmitter<string> = new EventEmitter();
 

projects/components/src/form-field/form-field.component.scss

@@ -42,6 +42,7 @@
 
     &.error-border {
       border: 1px solid $red-3;
+      border-radius: 6px;
     }
   }