[AAE-23622] fixed buttons and chips (#9913)

Alfresco · Jul 4, 2024 · 493e573 · 493e573
1 parent 176e549
commit 493e573
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 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
@@ -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
@@ -43,12 +43,16 @@
         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);
 
         #{$mat-chip}:hover {
             cursor: pointer;
         }
     }
+
+    &-card-view-array-chip-content {
+        align-items: center;
+        display: flex;
+    }
 }