ACS-8618 fix bulk dropdown icon alignment (#4042)

Alfresco · Aug 20, 2024 · c8dad0f · c8dad0f
1 parent 3da9685
commit c8dad0f
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 23 deletions.
diff --git a/...aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.html b/...aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.html
@@ -2,6 +2,7 @@
   *ngIf="items?.length"
   [title]="tooltip"
   appearance="outline"
+  subscriptSizing="dynamic"
   class="aca-bulk-actions-form-field"
   data-automation-id="aca-bulk-actions-form-field"
 >
@@ -14,13 +15,16 @@
     (keydown)="onKeyDown($event)"
   >
     <mat-select-trigger>
-      <adf-icon
-        *ngIf="bulkSelectControl.value?.icon"
-        [title]="bulkSelectControl.value?.title | translate"
-        [value]="bulkSelectControl.value?.icon"
-        [attr.data-automation-id]="'aca-bulk-action-icon-' + bulkSelectControl.value?.id"
-      ></adf-icon>
-      {{ bulkSelectControl.value?.title | translate }}
+      <div class="aca-bulk-actions-option-content">
+        <adf-icon
+          *ngIf="bulkSelectControl.value?.icon"
+          [title]="bulkSelectControl.value?.title | translate"
+          [value]="bulkSelectControl.value?.icon"
+          class="aca-bulk-actions-icon"
+          [attr.data-automation-id]="'aca-bulk-action-icon-' + bulkSelectControl.value?.id"
+        ></adf-icon>
+        {{ bulkSelectControl.value?.title | translate }}
+      </div>
     </mat-select-trigger>
 
     <mat-option
@@ -30,13 +34,16 @@
       [attr.data-automation-id]="option.id"
       (click)="runAction(option)"
     >
-      <adf-icon
-        *ngIf="option.icon"
-        [title]="option.title | translate"
-        [value]="option.icon"
-        [attr.data-automation-id]="'aca-bulk-action-icon-' + option.id"
-      ></adf-icon>
-      {{ option.title | translate }}
+      <div class="aca-bulk-actions-option-content">
+        <adf-icon
+          *ngIf="option.icon"
+          [title]="option.title | translate"
+          [value]="option.icon"
+          class="aca-bulk-actions-icon"
+          [attr.data-automation-id]="'aca-bulk-action-icon-' + option.id"
+        ></adf-icon>
+        {{ option.title | translate }}
+      </div>
     </mat-option>
   </mat-select>
 </mat-form-field>
diff --git a/...aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.scss b/...aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.scss
@@ -2,23 +2,24 @@
 
 .aca-bulk-actions-form-field {
   margin-left: 24px;
-  margin-top: 1.4375em;
   width: 295px;
 
   #{$mat-form-field-flex},
-  #{$mat-form-text-field-infix} {
+  #{$mat-select-value} {
     height: 48px;
-    line-height: 48px;
     display: flex;
     align-items: center;
-    border: 0;
   }
+}
 
-  #{$mat-form-field-appearance-outline} #{$mat-form-field-outline} {
-    top: 0;
-  }
+.aca-bulk-actions-option-content {
+  height: 100%;
+  display: flex;
+  column-gap: 8px;
+  align-items: center;
 
-  #{$mat-select} {
-    margin-top: 0.25rem;
+  .aca-bulk-actions-icon {
+    width: 24px;
+    height: 24px;
   }
 }