Skip to content

Commit b0ea899

Browse files
pedrodominguespanderson-gregorio-totvs
pedrodominguesp
authored and
anderson-gregorio-totvs
committed
feat(fields): aplica definições de espaçamento em label
Define o espaçamento mais compacto entre os elementos que formam o Label de um field: p-label, p-requirement e p-helper.
1 parent 96d98cd commit b0ea899

91 files changed

Lines changed: 863 additions & 14 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎projects/ui/src/lib/components/po-dynamic/po-dynamic-form/interfaces/po-dynamic-form-field.interface.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -896,4 +896,40 @@ export interface PoDynamicFormField extends PoDynamicField {
896896
* @default `false`
897897
*/
898898
invalidValue?: boolean;
899+
900+
/**
901+
* Define se o título do campo será exibido de forma compacta.
902+
*
903+
* Quando habilitado (`true`), o modo compacto afeta o conjunto composto por:
904+
* - `po-label`
905+
* - `p-requirement (showRequired)`
906+
* - `po-helper`
907+
*
908+
* Ou seja, todos os elementos relacionados ao título do campo
909+
* (rótulo, indicador de obrigatoriedade e componente auxiliar) passam
910+
* a seguir o comportamento de layout compacto.
911+
*
912+
* Também é possível definir esse comportamento de forma global,
913+
* uma única vez, na folha de estilo geral da aplicação, por meio
914+
* da customização dos tokens CSS:
915+
*
916+
* - `--field-container-title-justify`
917+
* - `--field-container-title-flex`
918+
*
919+
* Exemplo:
920+
* ```
921+
* :root {
922+
* --field-container-title-justify: flex-start;
923+
* --field-container-title-flex: 0 1 auto;
924+
* }
925+
* ```
926+
*
927+
* Dessa forma, o layout compacto passa a ser o padrão da aplicação,
928+
* sem a necessidade de definir a propriedade individualmente em cada campo.
929+
*
930+
* @default `false`
931+
*
932+
* **Compatível com todos os componentes**
933+
*/
934+
compactLabel?: boolean;
899935
}

‎projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
[ngClass]="field.componentClass"
2323
[additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
2424
[p-additional-help-tooltip]="field.additionalHelpTooltip"
25+
[p-compact-label]="field.compactLabel"
2526
[p-clean]="field.clean"
2627
[p-disabled]="isDisabled(field)"
2728
[p-error-pattern]="field.errorMessage"
@@ -59,6 +60,7 @@
5960
[additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
6061
[p-additional-help-tooltip]="field.additionalHelpTooltip"
6162
[p-clean]="field.clean"
63+
[p-compact-label]="field.compactLabel"
6264
[p-disabled]="isDisabled(field)"
6365
[p-auto-focus]="field.focus"
6466
[p-help]="field.help"
@@ -91,6 +93,7 @@
9193
[additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
9294
[p-additional-help-tooltip]="field.additionalHelpTooltip"
9395
[p-clean]="field.clean"
96+
[p-compact-label]="field.compactLabel"
9497
[p-disabled]="isDisabled(field)"
9598
[p-error-pattern]="field.errorMessage"
9699
[p-error-limit]="field.errorLimit"
@@ -130,6 +133,7 @@
130133
[additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
131134
[p-additional-help-tooltip]="field.additionalHelpTooltip"
132135
[p-clean]="field.clean"
136+
[p-compact-label]="field.compactLabel"
133137
[p-disabled]="isDisabled(field)"
134138
[p-error-pattern]="field.errorMessage"
135139
[p-error-limit]="field.errorLimit"
@@ -168,6 +172,7 @@
168172
[additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
169173
[p-additional-help-tooltip]="field.additionalHelpTooltip"
170174
[p-clean]="field.clean"
175+
[p-compact-label]="field.compactLabel"
171176
[p-error-pattern]="field.errorMessage"
172177
[p-error-limit]="field.errorLimit"
173178
[p-error-async-properties]="field.errorAsyncProperties"
@@ -210,6 +215,7 @@
210215
[p-additional-help-tooltip]="field.additionalHelpTooltip"
211216
[p-field-label]="field.fieldLabel"
212217
[p-field-value]="field.fieldValue"
218+
[p-compact-label]="field.compactLabel"
213219
[p-disabled]="isDisabled(field)"
214220
[p-help]="field.help"
215221
[p-helper]="field.helper"
@@ -238,6 +244,7 @@
238244
[additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
239245
[p-additional-help-tooltip]="field.additionalHelpTooltip"
240246
[p-columns]="field.columns || 3"
247+
[p-compact-label]="field.compactLabel"
241248
[p-auto-focus]="field.focus"
242249
[p-disabled]="isDisabled(field)"
243250
[p-help]="field.help"
@@ -264,6 +271,7 @@
264271
[ngClass]="field.componentClass"
265272
[additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
266273
[p-additional-help-tooltip]="field.additionalHelpTooltip"
274+
[p-compact-label]="field.compactLabel"
267275
[p-disabled]="isDisabled(field)"
268276
[p-error-limit]="field.errorLimit"
269277
[p-field-error-message]="field.errorMessage"
@@ -292,6 +300,7 @@
292300
[additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
293301
[p-additional-help-tooltip]="field.additionalHelpTooltip"
294302
[p-auto-focus]="field.focus"
303+
[p-compact-label]="field.compactLabel"
295304
[p-disabled]="isDisabled(field)"
296305
[p-help]="field.help"
297306
[p-helper]="field.helper"
@@ -313,6 +322,7 @@
313322
[additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
314323
[p-additional-help-tooltip]="field.additionalHelpTooltip"
315324
[p-auto-focus]="field.focus"
325+
[p-compact-label]="field.compactLabel"
316326
[p-clean]="field.clean"
317327
[p-disabled]="isDisabled(field)"
318328
[p-field-label]="field.fieldLabel"
@@ -359,6 +369,7 @@
359369
[ngClass]="field.componentClass"
360370
[additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
361371
[p-additional-help-tooltip]="field.additionalHelpTooltip"
372+
[p-compact-label]="field.compactLabel"
362373
[p-clean]="field.clean"
363374
[p-columns]="field.columns"
364375
[p-disabled]="isDisabled(field)"
@@ -401,6 +412,7 @@
401412
[additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
402413
[p-additional-help-tooltip]="field.additionalHelpTooltip"
403414
[p-columns]="field.columns || 3"
415+
[p-compact-label]="field.compactLabel"
404416
[p-auto-focus]="field.focus"
405417
[p-disabled]="isDisabled(field)"
406418
[p-help]="field.help"
@@ -427,6 +439,7 @@
427439
[ngClass]="field.componentClass"
428440
[additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
429441
[p-additional-help-tooltip]="field.additionalHelpTooltip"
442+
[p-compact-label]="field.compactLabel"
430443
[p-disabled]="isDisabled(field)"
431444
[p-auto-focus]="field.focus"
432445
[p-auto-height]="field.autoHeight"
@@ -466,6 +479,7 @@
466479
[ngClass]="field.componentClass"
467480
[additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
468481
[p-additional-help-tooltip]="field.additionalHelpTooltip"
482+
[p-compact-label]="field.compactLabel"
469483
[p-disabled]="isDisabled(field)"
470484
[p-auto-focus]="field.focus"
471485
[p-help]="field.help"
@@ -497,6 +511,7 @@
497511
[ngClass]="field.componentClass"
498512
[additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
499513
[p-additional-help-tooltip]="field.additionalHelpTooltip"
514+
[p-compact-label]="field.compactLabel"
500515
[p-clean]="field.clean"
501516
[p-disabled]="isDisabled(field)"
502517
[p-error-pattern]="field.errorMessage"
@@ -534,6 +549,7 @@
534549
[additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
535550
[p-additional-help-tooltip]="field.additionalHelpTooltip"
536551
[p-auto-upload]="field.autoUpload"
552+
[p-compact-label]="field.compactLabel"
537553
[p-directory]="field.directory"
538554
[p-disabled]="isDisabled(field)"
539555
[p-drag-drop]="field.dragDrop"

‎projects/ui/src/lib/components/po-field/po-checkbox-group/po-checkbox-group-base.component.spec.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -440,6 +440,17 @@ describe('PoCheckboxGroupBaseComponent: ', () => {
440440
expect(component['getGridSystemColumns']).toHaveBeenCalled();
441441
});
442442

443+
it('p-compact-label: should update property with `true` when input is true', () => {
444+
fixture.componentRef.setInput('p-compact-label', true);
445+
fixture.detectChanges();
446+
447+
expect(component.compactLabel()).toBe(true);
448+
});
449+
450+
it('p-compact-label: should have default value as false', () => {
451+
expect(component.compactLabel()).toBe(false);
452+
});
453+
443454
describe('p-size', () => {
444455
beforeEach(() => {
445456
document.documentElement.removeAttribute('data-a11y');

‎projects/ui/src/lib/components/po-field/po-checkbox-group/po-checkbox-group-base.component.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,46 @@ export class PoCheckboxGroupBaseComponent implements ControlValueAccessor, Valid
8989
*/
9090
@Input({ alias: 'p-auto-focus', transform: convertToBoolean }) autoFocus: boolean = false;
9191

92+
/**
93+
* @Input
94+
*
95+
* @optional
96+
*
97+
* @description
98+
* Define se o título do campo será exibido de forma compacta.
99+
*
100+
* Quando habilitado (`true`), o modo compacto afeta o conjunto composto por:
101+
* - `po-label`
102+
* - `p-requirement (showRequired)`
103+
* - `po-helper`
104+
*
105+
* Ou seja, todos os elementos relacionados ao título do campo
106+
* (rótulo, indicador de obrigatoriedade e componente auxiliar) passam
107+
* a seguir o comportamento de layout compacto.
108+
*
109+
* Também é possível definir esse comportamento de forma global,
110+
* uma única vez, na folha de estilo geral da aplicação, por meio
111+
* da customização dos tokens CSS:
112+
*
113+
* - `--field-container-title-justify`
114+
* - `--field-container-title-flex`
115+
*
116+
* Exemplo:
117+
*
118+
* ```
119+
* :root {
120+
* --field-container-title-justify: flex-start;
121+
* --field-container-title-flex: 0 1 auto;
122+
* }
123+
* ```
124+
*
125+
* Dessa forma, o layout compacto passa a ser o padrão da aplicação,
126+
* sem a necessidade de definir a propriedade individualmente em cada campo.
127+
*
128+
* @default `false`
129+
*/
130+
compactLabel = input<boolean, unknown>(false, { alias: 'p-compact-label', transform: convertToBoolean });
131+
92132
/** Nome dos checkboxes */
93133
@Input('name') name: string;
94134

‎projects/ui/src/lib/components/po-field/po-checkbox-group/po-checkbox-group.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
[p-show-helper]="label ? displayAdditionalHelp : undefined"
1010
[p-size]="size"
1111
[p-text-wrap]="labelTextWrap()"
12+
[p-compact-label]="compactLabel()"
1213
>
1314
<div role="group" class="po-checkbox-group-content" [attr.aria-label]="label" [attr.p-size]="size">
1415
<div class="po-field-container-content" [attr.name]="name" [attr.p-size]="size">

‎projects/ui/src/lib/components/po-field/po-checkbox-group/samples/sample-po-checkbox-group-labs/sample-po-checkbox-group-labs.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
[p-error-limit]="properties?.includes('errorLimit')"
1515
[p-show-required]="properties.includes('showRequired')"
1616
[p-label-text-wrap]="properties.includes('labelTextWrap')"
17+
[p-compact-label]="properties?.includes('compactLabel')"
1718
[p-size]="size"
1819
(p-change)="changeEvent('p-change')"
1920
(p-keydown)="changeEvent('p-keydown')"

‎projects/ui/src/lib/components/po-field/po-checkbox-group/samples/sample-po-checkbox-group-labs/sample-po-checkbox-group-labs.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ export class SamplePoCheckboxGroupLabsComponent implements OnInit {
3636
{ value: 'required', label: 'Required' },
3737
{ value: 'showRequired', label: 'Show Required' },
3838
{ value: 'errorLimit', label: 'Limit Error Message' },
39-
{ value: 'labelTextWrap', label: 'Label Text Wrap' }
39+
{ value: 'labelTextWrap', label: 'Label Text Wrap' },
40+
{ value: 'compactLabel', label: 'Compact Label' }
4041
];
4142

4243
public readonly sizeOptions: Array<PoRadioGroupOption> = [

‎projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox-base.component.spec.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,17 @@ describe('PoCheckboxBaseComponent:', () => {
4747
expectPropertiesValues(component, 'disabled', booleanInvalidValues, false);
4848
});
4949

50+
it('p-compact-label: should update property with `true` when input is true', () => {
51+
fixture.componentRef.setInput('p-compact-label', true);
52+
fixture.detectChanges();
53+
54+
expect(component.compactLabel()).toBe(true);
55+
});
56+
57+
it('p-compact-label: should have default value as false', () => {
58+
expect(component.compactLabel()).toBe(false);
59+
});
60+
5061
describe('p-size', () => {
5162
beforeEach(() => {
5263
document.documentElement.removeAttribute('data-a11y');

‎projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox-base.component.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ import { PoHelperOptions } from '../../po-helper';
3636
* | `--border-color` | Cor da borda | `var(--color-neutral-dark-70)` |
3737
* | `--color-unchecked` | Cor quando não selecionado | `var(--color-neutral-light-00)` |
3838
* | `--color-checked` | Cor quando selecionado | `var(--color-action-default)` |
39+
* | `--field-container-title-justify` | Alinhamento horizontal do título (`justify-content`) | `space-between` |
40+
* | `--field-container-title-flex` | Flex do título (`flex`) | `1 auto` |
3941
* | **Hover** | | |
4042
* | `--color-hover` | Cor principal no estado hover | `var(--color-action-hover)` |
4143
* | `--shadow-color-hover` | Cor da sombra no estado hover | `var(--color-brand-01-lighter)` |
@@ -85,6 +87,46 @@ export abstract class PoCheckboxBaseComponent implements ControlValueAccessor {
8587
*/
8688
@Input({ alias: 'p-append-in-body', transform: convertToBoolean }) appendBox?: boolean = false;
8789

90+
/**
91+
* @Input
92+
*
93+
* @optional
94+
*
95+
* @description
96+
* Define se o título do campo será exibido de forma compacta.
97+
*
98+
* Quando habilitado (`true`), o modo compacto afeta o conjunto composto por:
99+
* - `po-label`
100+
* - `p-requirement (showRequired)`
101+
* - `po-helper`
102+
*
103+
* Ou seja, todos os elementos relacionados ao título do campo
104+
* (rótulo, indicador de obrigatoriedade e componente auxiliar) passam
105+
* a seguir o comportamento de layout compacto.
106+
*
107+
* Também é possível definir esse comportamento de forma global,
108+
* uma única vez, na folha de estilo geral da aplicação, por meio
109+
* da customização dos tokens CSS:
110+
*
111+
* - `--field-container-title-justify`
112+
* - `--field-container-title-flex`
113+
*
114+
* Exemplo:
115+
*
116+
* ```
117+
* :root {
118+
* --field-container-title-justify: flex-start;
119+
* --field-container-title-flex: 0 1 auto;
120+
* }
121+
* ```
122+
*
123+
* Dessa forma, o layout compacto passa a ser o padrão da aplicação,
124+
* sem a necessidade de definir a propriedade individualmente em cada campo.
125+
*
126+
* @default `false`
127+
*/
128+
compactLabel = input<boolean, unknown>(false, { alias: 'p-compact-label', transform: convertToBoolean });
129+
88130
/**
89131
* @optional
90132
*

‎projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@let poHelper = setHelper(label, additionalHelpTooltip);
22
@if (help) {
3-
<po-field-container [p-disabled]="disabled" [p-size]="size">
3+
<po-field-container [p-disabled]="disabled" [p-size]="size" [p-compact-label]="compactLabel()">
44
<div class="po-field-container-content">
55
<ng-container *ngTemplateOutlet="checkboxContent"></ng-container>
66
</div>

0 commit comments

Comments
 (0)