fix: make border configurable in form field (#1311)

Author: anandtiwary

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

@@ -32,11 +32,13 @@
   .content {
     flex: 1 1 auto;
     width: 100%;
-    border: 1px solid $gray-2;
-    border-radius: 6px;
-    width: 100%;
     background: white;
 
+    &.show-border {
+      border: 1px solid $gray-2;
+      border-radius: 6px;
+    }
+
     &.error-border {
       border: 1px solid $red-3;
     }

projects/components/src/form-field/form-field.component.test.ts

@@ -28,6 +28,10 @@ describe('Form Field Component', () => {
         }
       }
     );
+
+    expect(spectator.query('.content')).not.toHaveClass(['show-border', 'error-border']);
+    expect(spectator.query('.content')).toExist();
+
     const labels = spectator.queryAll(LabelComponent);
     expect(labels[0].label).toEqual('Label');
     expect(labels[1].label).toEqual('Error message');
@@ -55,19 +59,21 @@ describe('Form Field Component', () => {
     expect(labels[1].label).toEqual('(Optional)');
   });
 
-  test('should show error when showFormError and errorLabel is present', () => {
+  test('should show error when showFormError, errorLabel and showBorder is present', () => {
     const spectator = hostFactory(
       `
-    <ht-form-field [label]="label" [showFormError]="showFormError" [errorLabel]="errorLabel">
+    <ht-form-field [label]="label" [showFormError]="showFormError" [errorLabel]="errorLabel" [showBorder]="showBorder">
     </ht-form-field>`,
       {
         hostProps: {
           label: 'Label',
           errorLabel: 'Invalid Form element',
-          showFormError: true
+          showFormError: true,
+          showBorder: true
         }
       }
     );
+    expect(spectator.query('.content')).toHaveClass(['content', 'show-border', 'error-border']);
 
     expect(spectator.query('.error')).toExist();
 
@@ -81,5 +87,6 @@ describe('Form Field Component', () => {
     });
 
     expect(spectator.query('.error')).not.toExist();
+    expect(spectator.query('.content')).toHaveClass(['show-border']);
   });
 });

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

@@ -19,7 +19,13 @@ import { IconSize } from '../icon/icon-size';
           [htTooltip]="this.iconTooltip"
         ></ht-icon>
       </div>
-      <div class="content" [ngClass]="{ 'error-border': this.showFormError && this.errorLabel }">
+      <div
+        class="content"
+        [ngClass]="{
+          'show-border': this.showBorder,
+          'error-border': this.showFormError && this.errorLabel
+        }"
+      >
         <ng-content></ng-content>
       </div>
       <!-- For Backward Compatibility: Start -->
@@ -56,6 +62,9 @@ export class FormFieldComponent {
   @Input()
   public errorLabel?: string = '';
 
+  @Input()
+  public showBorder: boolean = false;
+
   @Input()
   public showFormError?: boolean = true;
 }