From 47b0ae8003478698a9ececf599546baa2058d3c0 Mon Sep 17 00:00:00 2001
From: tomasz hanaj <12088991+tomaszhanaj@users.noreply.github.com>
Date: Thu, 4 Jul 2024 12:35:43 +0200
Subject: [PATCH] [AAE-23622] fixed buttons and chips (#9913)

---
 .../card-view-arrayitem.component.html        | 20 ++++++++++++-------
 .../card-view-arrayitem.component.scss        |  6 +++++-
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html
index 0e549aa1b6a..33abcfe8f4c 100644
--- a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html
+++ b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html
@@ -8,8 +8,10 @@
                     (keyup.enter)="clicked()"
                     (click)="clicked()"
                     [attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
-                    <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
-                    <span>{{item?.value}}</span>
+                    <div class="adf-card-view-array-chip-content">
+                        <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
+                        <span>{{item?.value}}</span>
+                    </div>
                 </mat-chip-option>
                 <mat-chip-option
                     *ngIf="items.length > displayCount"
@@ -24,8 +26,10 @@
                     (keyup.enter)="clicked()"
                     (click)="clicked()"
                     [attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
-                    <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
-                    <span>{{item?.value}}</span>
+                    <div class="adf-card-view-array-chip-content">
+                        <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
+                        <span>{{item?.value}}</span>
+                    </div>
                 </mat-chip-option>
             </ng-template>
         </mat-chip-listbox>
@@ -36,8 +40,10 @@
                         <mat-chip-option (click)="clicked()" (keyup.enter)="clicked()"
                             *ngFor="let item of items.slice(displayCount, items.length)"
                             [attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
-                        <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
-                        <span>{{item?.value}}</span>
+                            <div class="adf-card-view-array-chip-content">
+                                <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
+                                <span>{{item?.value}}</span>
+                            </div>
                         </mat-chip-option>
                     </mat-chip-listbox>
                 </mat-card-content>
@@ -54,6 +60,6 @@
         [attr.aria-label]="'CORE.METADATA.ACTIONS.EDIT' | translate"
         [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
         [attr.data-automation-id]="'card-array-item-clickable-icon-' + property.key">
-        <mat-icon class="adf-array-item-icon">{{property.icon}}</mat-icon>
+        <mat-icon class="adf-array-item-button-icon">{{property.icon}}</mat-icon>
     </button>
 </div>
diff --git a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
index 7f940c09dbf..0f0d561655d 100644
--- a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
+++ b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
@@ -43,7 +43,6 @@
         place-content: center space-between;
         align-items: center;
         background: var(--adf-card-view-array-item-background);
-        border: var(--adf-card-view-array-item-border);
         border-color: var(--adf-card-view-array-item-border-color);
         border-radius: var(--adf-card-view-array-item-border-radius);
 
@@ -51,4 +50,9 @@
             cursor: pointer;
         }
     }
+
+    &-card-view-array-chip-content {
+        align-items: center;
+        display: flex;
+    }
 }