inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-34482 Fixing label and alignment issues in forms (#10898)

Browse Source 
* AAE-34482 fixing label and alignment issues in forms

* AAE-34482 fixing margin issues

* AAE-34482 adding span inside mat-label

* AAE-34482 fixing units

* AAE-34482 removing unwanted unit

* AAE-34482 fixing unit

* AAE-34482 fixing native element class in unit tests
This commit is contained in:
Soumyajit Chakraborty
2025-05-28 23:20:17 +05:30
committed by GitHub
parent 5bbb5c5716
commit 79163cbae0
19 changed files with 50 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/core/src/lib/form/components/form-renderer.component.scss
View File

@@ -16,6 +16,10 @@
.alfresco-tabs-widget {
width: 100%;
.adf-form-tab-content {
margin-top: 1em;
}
.adf-form-tab-group {
width: 100%;
}

6
lib/core/src/lib/form/components/widgets/amount/amount.widget.html
View File

@@ -10,9 +10,9 @@
>
</div>
<div>
<mat-form-field class="adf-amount-widget__input" [hideRequiredMarker]="true">
<label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"
>{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
<mat-form-field class="adf-amount-widget__input" [hideRequiredMarker]="true" [floatLabel]="placeholder ? 'always' : 'auto'">
<mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"
>{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></mat-label
>
<span matTextPrefix class="adf-amount-widget__prefix-spacing">{{ currency }}&nbsp;</span>
<input

4
lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
View File

@@ -24,6 +24,10 @@
align-self: flex-end;
}
.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);

4
lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts
View File

@@ -192,7 +192,7 @@ describe('AmountWidgetComponent - rendering', () => {
expect(inputField).toBeTruthy();
expect(await field.getPrefixText()).toBe('$');
const widgetLabel = testingUtils.getByCSS('label.adf-label').nativeElement;
const widgetLabel = testingUtils.getByCSS('.adf-label').nativeElement;
expect(widgetLabel.textContent.trim()).toBe('Test Amount*');
expect(widget.field.isValid).toBe(false);
@@ -228,7 +228,7 @@ describe('AmountWidgetComponent - rendering', () => {
fixture.detectChanges();
await fixture.whenStable();
const widgetLabel = testingUtils.getByCSS('label.adf-label').nativeElement;
const widgetLabel = testingUtils.getByCSS('.adf-label').nativeElement;
expect(widgetLabel.textContent.trim()).toBe('Test Amount*');
const field = await testingUtils.getMatFormField();

4
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
View File

@@ -11,9 +11,9 @@
<mat-form-field class="adf-date-time-widget"
[class.adf-left-label-input-datepicker]="field.leftLabels"
[hideRequiredMarker]="true">
<label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
<mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
{{ field.name | translate }} ({{ field.dateDisplayFormat }})<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
</label>
</mat-label>
<input matInput
[matDatetimepicker]="datetimePicker"
[id]="field.id"

4
lib/core/src/lib/form/components/widgets/decimal/decimal.component.html
View File

@@ -10,9 +10,9 @@
<div>
<mat-form-field [hideRequiredMarker]="true">
<label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
<mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
{{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
</label>
</mat-label>
<input matInput
class="adf-input"

4
lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html
View File

@@ -2,9 +2,9 @@
[class.adf-invalid]="!field.isValid && isTouched()"
[class.adf-readonly]="field.readOnly">
<mat-form-field floatPlaceholder="never" [hideRequiredMarker]="true">
<label class="adf-label" [attr.for]="field.id">
<mat-label class="adf-label" [attr.for]="field.id">
{{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
</label>
</mat-label>
<textarea matInput
class="adf-input"
[cdkTextareaAutosize]="true"

4
lib/core/src/lib/form/components/widgets/number/number.widget.html
View File

@@ -10,9 +10,9 @@
</div>
<div>
<mat-form-field [hideRequiredMarker]="true">
<label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
<mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
{{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
</label>
</mat-label>
<input matInput
class="adf-input"
type="text"

4
lib/core/src/lib/form/components/widgets/text/text.widget.html
View File

@@ -9,9 +9,9 @@
</div>
<div>
<mat-form-field [hideRequiredMarker]="true">
<label *ngIf="!field.leftLabels" class="adf-label" [attr.for]="field.id">
<mat-label *ngIf="!field.leftLabels" class="adf-label" [attr.for]="field.id">
{{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
</label>
</mat-label>
<input matInput
class="adf-input"
type="text"