[ACS-6211] Fixed UI alignment issues in create rules screen (CardView and child components) (#9101)

* [ACS-6211] Fixed UI alignment issues create rule dialog (changes in card-view and child components)

* [ACS-6211] Removed unneeded test case

* [ACS-6211] Addressed code review findings. Added label div for when card-view-selectitem.component is in non-editable mode. Added corresponding tests

* [ACS-6211] Fixed alignment issue for card-view-selectitem.component

* [ACS-6211] Removed unneeded testcase

* [ACS-6211] Resolved ui alignment issue with card-view-text-item.component

lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.ts

@@ -22,7 +22,14 @@ import { BaseCardView } from '../base-card-view';
 
 @Component({
     selector: 'adf-card-view-boolitem',
-    templateUrl: './card-view-boolitem.component.html'
+    templateUrl: './card-view-boolitem.component.html',
+    styles: [
+        `
+            .adf-property-value {
+                padding: 15px 0;
+            }
+        `
+    ]
 })
 
 export class CardViewBoolItemComponent extends BaseCardView<CardViewBoolItemModel> {

lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts

@@ -73,9 +73,12 @@ describe('CardViewSelectItemComponent', () => {
     });
 
     describe('Rendering', () => {
-        it('should render the label', () => {
+        it('should render custom label when editable is set to false', () => {
+            component.property = new CardViewSelectItemModel({
+                ...mockDefaultProps,
+                editable: false
+            });
             fixture.detectChanges();
-
             const labelValue = fixture.debugElement.query(By.css('.adf-property-label'));
             expect(labelValue).not.toBeNull();
             expect(labelValue.nativeElement.innerText).toBe('Select box label');

lib/core/src/lib/card-view/components/card-view/card-view.component.html

@@ -1,5 +1,5 @@
 <div class="adf-property-list">
-    <div *ngFor="let property of properties">
+    <div *ngFor="let property of properties" class="adf-property-container">
         <div [attr.data-automation-id]="'header-'+property.key" class="adf-property">
             <adf-card-view-item-dispatcher
                 [property]="property"

lib/core/src/lib/card-view/components/card-view/card-view.component.scss

@@ -7,7 +7,7 @@
     .adf-property-label {
         color: var(--adf-metadata-property-panel-text-color);
         display: flex;
-        padding: 6px 0;
+        padding: 3px 0;
         line-height: 20px;
 
         &.adf-property-value-editable {
@@ -19,6 +19,10 @@
         }
     }
 
+    .adf-property-container {
+        margin-bottom: 10px;
+    }
+
     .adf-property {
         .adf-property-field {
             width: 100%;
@@ -30,7 +34,7 @@
             .mat-input-element {
                 text-overflow: ellipsis;
                 color: var(--adf-metadata-property-panel-title-color);
-                margin-top: 32px;
+                margin-top: 20px;
                 padding: 6px 0;
                 line-height: 20px;
             }
@@ -57,7 +61,7 @@
             }
 
             .mat-form-field-label {
-                padding: 6px 0;
+                padding: 0;
                 justify-content: center;
                 display: flex;
                 flex-direction: column;
@@ -83,7 +87,7 @@
             &.mat-input-element {
                 color: var(--adf-metadata-action-button-clear-color);
                 padding: 6px 0 6px 12px;
-                margin: 32px 0 0;
+                margin: 20px 0 0;
             }
         }