From 5054679f6cdbe86931098e57075b476f6e302e00 Mon Sep 17 00:00:00 2001
From: swapnil-verma-gl <92505353+swapnil-verma-gl@users.noreply.github.com>
Date: Wed, 3 Jan 2024 12:19:04 +0530
Subject: [PATCH] [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
---
 .../card-view-boolitem.component.ts                  |  9 ++++++++-
 .../card-view-selectitem.component.spec.ts           |  7 +++++--
 .../components/card-view/card-view.component.html    |  2 +-
 .../components/card-view/card-view.component.scss    | 12 ++++++++----
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.ts b/lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.ts
index d5337fd39b3..8d36313b570 100644
--- a/lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.ts
+++ b/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> {
diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts
index 32ed33a2a80..9421959f39b 100644
--- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts
+++ b/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');
diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.html b/lib/core/src/lib/card-view/components/card-view/card-view.component.html
index 10ac653f315..81a1f52ac2c 100644
--- a/lib/core/src/lib/card-view/components/card-view/card-view.component.html
+++ b/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"
diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss
index fa1a330d324..c8090e8cdd9 100644
--- a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss
+++ b/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;
             }
         }