AAE-43710 Fix form field spacing misalignments (#11763)

lib/core/src/lib/form/components/widgets/amount/amount.widget.scss

@@ -20,10 +20,6 @@
             transition: none;
         }
 
-        .adf-input {
-            margin-top: 3px;
-        }
-
         &:not(#{ms.$mat-focused}):not(#{ms.$mat-form-field-invalid}) {
             .adf-amount-widget__prefix-spacing {
                 color: var(--adf-theme-foreground-secondary-text-color);

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss

@@ -11,10 +11,6 @@
         #{ms.$mat-form-field-suffix} {
             top: 26px;
         }
-
-        #{ms.$mat-form-field-label} {
-            top: 20px;
-        }
     }
 
     &-left-label-input-datepicker {

lib/core/src/lib/form/components/widgets/decimal/decimal.component.scss

@@ -7,9 +7,5 @@
             align-items: flex-start;
             flex-direction: column;
         }
-
-        .adf-label {
-            top: 20px;
-        }
     }
 }

lib/core/src/lib/form/components/widgets/number/number.widget.scss

@@ -7,9 +7,5 @@
             align-items: flex-start;
             flex-direction: column;
         }
-
-        .adf-label {
-            top: 20px;
-        }
     }
 }

lib/core/src/lib/form/components/widgets/text/text.widget.scss

@@ -1,14 +1,7 @@
-/* stylelint-disable selector-class-pattern */
-@use '../../../../styles/mat-selectors' as ms;
-
 .adf {
     &-text-widget {
         width: 100%;
 
-        #{ms.$mat-form-field-label} {
-            top: 20px;
-        }
-
         &-container {
             display: flex;
             align-items: flex-start;

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html

@@ -11,7 +11,7 @@
             </label>
         </div>
     }
-    <div>
+    <div class="adf-dropdown-widget-container">
         <mat-form-field class="adf-form-field-input">
             @if ( (field.name || this.field?.required) && !field.leftLabels) {
                 <mat-label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}</mat-label>

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss

@@ -17,6 +17,12 @@
             width: 100%;
         }
 
+        &-container {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+        }
+
         &-dropdown-required-message {
             .adf-error-container {
                 margin-top: 1px;

lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud/task-form-cloud.component.stories.ts

@@ -23,6 +23,156 @@ import { TaskCloudServiceMock } from '../../../mock/task-cloud.service.mock';
 import { FormCloudServiceMock } from '../../../../form/mocks/form-cloud.service.mock';
 import { provideStoryProcessServicesCloud } from '../../../../stories/process-services-cloud-story.providers';
 import { taskWithFormDetailsMock } from '../../../task-header/mocks/task-details-cloud.mock';
+import { Observable, of } from 'rxjs';
+import { FormContent } from '../../../../services/form-fields.interfaces';
+
+const allWidgetTypesForm: FormContent = {
+    formRepresentation: {
+        id: 'form-all-widget-types',
+        name: 'Widget Alignment Test',
+        description: '',
+        version: 0,
+        formDefinition: {
+            tabs: [],
+            fields: [
+                {
+                    type: 'container',
+                    id: 'row-text-dropdown',
+                    name: 'Label',
+                    tab: '',
+                    numberOfColumns: 2,
+                    fields: {
+                        1: [
+                            {
+                                type: 'text',
+                                id: 'textField',
+                                name: 'Text Field',
+                                colspan: 1,
+                                placeholder: null,
+                                value: '',
+                                required: false,
+                                minLength: 0,
+                                maxLength: 0,
+                                regexPattern: null,
+                                visibilityCondition: null,
+                                params: { existingColspan: 1, maxColspan: 2 }
+                            }
+                        ],
+                        2: [
+                            {
+                                type: 'dropdown',
+                                id: 'dropdownField',
+                                name: 'Dropdown Field',
+                                colspan: 1,
+                                value: '',
+                                required: false,
+                                optionType: 'manual',
+                                options: [
+                                    { id: 'empty', name: 'Choose one...' },
+                                    { id: 'opt1', name: 'Option 1' },
+                                    { id: 'opt2', name: 'Option 2' }
+                                ],
+                                visibilityCondition: null,
+                                params: { existingColspan: 1, maxColspan: 2 }
+                            }
+                        ]
+                    }
+                },
+                {
+                    type: 'container',
+                    id: 'row-amount-number',
+                    name: 'Label',
+                    tab: '',
+                    numberOfColumns: 2,
+                    fields: {
+                        1: [
+                            {
+                                type: 'amount',
+                                id: 'amountField',
+                                name: 'Amount Field',
+                                colspan: 1,
+                                placeholder: '123',
+                                value: '',
+                                required: false,
+                                minValue: null,
+                                maxValue: null,
+                                visibilityCondition: null,
+                                params: { existingColspan: 1, maxColspan: 2 },
+                                enableFractions: false,
+                                currency: '$'
+                            }
+                        ],
+                        2: [
+                            {
+                                type: 'integer',
+                                id: 'numberField',
+                                name: 'Number Field',
+                                colspan: 1,
+                                placeholder: null,
+                                value: null,
+                                required: false,
+                                minValue: null,
+                                maxValue: null,
+                                visibilityCondition: null,
+                                params: { existingColspan: 1, maxColspan: 2 }
+                            }
+                        ]
+                    }
+                },
+                {
+                    type: 'container',
+                    id: 'row-date-text2',
+                    name: 'Label',
+                    tab: '',
+                    numberOfColumns: 2,
+                    fields: {
+                        1: [
+                            {
+                                type: 'date',
+                                id: 'dateField',
+                                name: 'Date Field',
+                                value: null,
+                                colspan: 1,
+                                placeholder: null,
+                                required: false,
+                                minValue: null,
+                                maxValue: null,
+                                visibilityCondition: null,
+                                params: { existingColspan: 1, maxColspan: 2 },
+                                dateDisplayFormat: 'D-M-YYYY'
+                            }
+                        ],
+                        2: [
+                            {
+                                type: 'text',
+                                id: 'textField2',
+                                name: 'Another Text',
+                                colspan: 1,
+                                placeholder: null,
+                                value: '',
+                                required: false,
+                                minLength: 0,
+                                maxLength: 0,
+                                regexPattern: null,
+                                visibilityCondition: null,
+                                params: { existingColspan: 1, maxColspan: 2 }
+                            }
+                        ]
+                    }
+                }
+            ],
+            outcomes: [],
+            metadata: {},
+            variables: []
+        }
+    }
+};
+
+class AllWidgetTypesFormCloudServiceMock extends FormCloudServiceMock {
+    override getForm(_appName: string, _formKey: string, _version?: number): Observable<FormContent> {
+        return of(allWidgetTypesForm);
+    }
+}
 
 const meta: Meta<TaskFormCloudComponent> = {
     component: TaskFormCloudComponent,
@@ -218,3 +368,26 @@ export const InvalidOrMissingTaskId: Story = {
         taskDetails: { ...taskWithFormDetailsMock }
     }
 };
+
+export const AllWidgetTypes: Story = {
+    decorators: [
+        moduleMetadata({
+            imports: [TaskFormCloudComponent],
+            providers: [
+                { provide: TaskCloudService, useClass: TaskCloudServiceMock },
+                { provide: FormCloudService, useClass: AllWidgetTypesFormCloudServiceMock }
+            ]
+        }),
+        applicationConfig({
+            providers: [...provideStoryProcessServicesCloud()]
+        })
+    ],
+    render: (args) => ({
+        props: args
+    }),
+    args: {
+        appName: 'app',
+        taskId: 'mock-task-with-form',
+        taskDetails: { ...taskWithFormDetailsMock }
+    }
+};