inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Wojciech Duda
2026-03-31 10:32:26 +02:00
committed by GitHub
parent 7b29d56272
commit 28fe6d3a76
8 changed files with 180 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
-4
View File
@@ -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
-4
View File
@@ -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
-4
View File
@@ -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
-4
View File
@@ -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
-7
View File
@@ -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
+1 -1
View File
@@ -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
+6
View File
@@ -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
+173
View File
@@ -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 }
}
};