AAE-23704 Fixed outcome buttons text alignment (#9933)

Alfresco · Jul 9, 2024 · ca648ab · ca648ab
1 parent fe2959d
commit ca648ab
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 27 deletions.
diff --git a/lib/core/src/lib/form/components/form-renderer.component.scss b/lib/core/src/lib/form/components/form-renderer.component.scss
@@ -210,11 +210,9 @@
         white-space: nowrap;
     }
 
-    /* stylelint-disable declaration-no-important */
     &-form-mat-card-actions {
-        float: right;
-        padding-bottom: 25px !important;
-        padding-right: 25px !important;
+        padding-bottom: 25px;
+        padding-right: 25px;
 
         & #{$mat-button} {
             height: 36px;
@@ -227,10 +225,6 @@
 
         & #{$mat-button-label} {
             min-width: 58px;
-            height: 20px;
-            opacity: 0.54;
-            font-size: var(--theme-body-2-font-size);
-            font-weight: bold;
         }
     }
 

diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
@@ -69,7 +69,7 @@ <h4>
                 >
                 </adf-form-renderer>
             </mat-card-content>
-            <mat-card-actions *ngIf="form.hasOutcomes()" class="adf-form-mat-card-actions">
+            <mat-card-actions *ngIf="form.hasOutcomes()" class="adf-form-mat-card-actions" align="end">
                 <ng-content select="adf-cloud-form-custom-outcomes"></ng-content>
                 <ng-container *ngFor="let outcome of form.outcomes">
                     <button

diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss
@@ -76,17 +76,10 @@
             flex-direction: column;
             height: 100%;
 
-            /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
-            mat-card-content {
+            #{$mat-card-content} {
                 height: 100%;
                 overflow: hidden auto;
             }
-
-            /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
-            mat-card-actions {
-                display: flex;
-                justify-content: flex-end;
-            }
         }
     }
 

diff --git a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.html b/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.html
@@ -44,7 +44,7 @@ <h4>
                     [subtitle]="'ADF_CLOUD_TASK_FORM.EMPTY_FORM.SUBTITLE'">
                 </adf-empty-content>
             </mat-card-content>
-            <mat-card-actions class="adf-task-form-actions">
+            <mat-card-actions class="adf-task-form-actions" align="end">
                 <ng-template [ngTemplateOutlet]="taskFormCloudButtons">
                 </ng-template>
                 <button mat-button *ngIf="canCompleteTask()" adf-cloud-complete-task [appName]="appName"

diff --git a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.scss
@@ -1,24 +1,30 @@
+@import 'styles/mat-selectors';
+
 .adf-task-form-cloud-container {
     .adf-task-form {
         &-container {
             overflow: hidden;
 
             .adf-task-form-actions:has(button) {
-                float: right;
                 padding-bottom: 25px;
                 padding-right: 25px;
 
-                & .adf-task-form-actions-button {
+                .adf-task-form-actions-button {
+                    height: 36px;
+                    border-radius: 5px;
+                }
+
+                #{$mat-button} {
                     height: 36px;
                     border-radius: 5px;
+                    width: auto;
+                    padding: 0 16px;
+                    margin: 0 8px;
+                    white-space: nowrap;
+                }
 
-                    span {
-                        width: 58px;
-                        height: 20px;
-                        opacity: 0.54;
-                        font-size: var(--theme-body-2-font-size);
-                        font-weight: bold;
-                    }
+                #{$mat-button-label} {
+                    min-width: 58px;
                 }
             }
         }