diff --git a/projects/ui/src/lib/components/po-button/po-button-base.component.ts b/projects/ui/src/lib/components/po-button/po-button-base.component.ts index 8837061aa..eadfd7880 100644 --- a/projects/ui/src/lib/components/po-button/po-button-base.component.ts +++ b/projects/ui/src/lib/components/po-button/po-button-base.component.ts @@ -226,4 +226,16 @@ export class PoButtonBaseComponent { * > Em caso de botões com apenas ícone a atribuição de valor à esta propriedade é muito importante para acessibilidade. */ @Input('p-aria-label') ariaLabel?: string; + + /** + * @optional + * + * @description + * + * Permite ao desenvolvedor definir se a label é exibida ou não. + * + * @default `false` + * + */ + @Input({ alias: 'p-hide-label', transform: convertToBoolean }) hideLabel: boolean = false; } diff --git a/projects/ui/src/lib/components/po-button/po-button.component.html b/projects/ui/src/lib/components/po-button/po-button.component.html index 39ede74e4..cc8ce2e4d 100644 --- a/projects/ui/src/lib/components/po-button/po-button.component.html +++ b/projects/ui/src/lib/components/po-button/po-button.component.html @@ -15,5 +15,5 @@ - {{ label }} + {{ label }} diff --git a/projects/ui/src/lib/components/po-button/po-button.component.spec.ts b/projects/ui/src/lib/components/po-button/po-button.component.spec.ts index 97abac017..72545326c 100644 --- a/projects/ui/src/lib/components/po-button/po-button.component.spec.ts +++ b/projects/ui/src/lib/components/po-button/po-button.component.spec.ts @@ -85,7 +85,7 @@ describe('PoButtonComponent: ', () => { expectPropertiesValues(component, 'loading', booleanFalseValues, false); }); - it('p-label: should add span with an label if `p-label` is defined', () => { + it('p-label: should add span with a label if `p-label` is defined', () => { component.label = 'Po Button'; fixture.detectChanges(); @@ -98,6 +98,13 @@ describe('PoButtonComponent: ', () => { expect(nativeElement.querySelector('i.po-button-label')).toBeFalsy(); }); + + it('p-hide-label: should´t add span with a label if `p-hide-label` is defined', () => { + component.hideLabel = true; + fixture.detectChanges(); + + expect(nativeElement.querySelector('span.po-button-label')).toBeFalsy(); + }); }); describe('Methods:', () => { @@ -129,6 +136,29 @@ describe('PoButtonComponent: ', () => { expect(component.buttonElement.nativeElement.focus).not.toHaveBeenCalled(); }); + + it('canShowLabel: should call canShowLabel and return true if `label` contains value and `hideLabel` is false', () => { + spyOn(component, 'canShowLabel').and.callThrough(); + + component.hideLabel = false; + component.label = 'PO Button'; + + const result = component.canShowLabel(); + + expect(component.canShowLabel).toHaveBeenCalled(); + expect(result).toBe(true); + }); + + it('canShowLabel: should call canShowLabel and return false if `hideLabel` is true', () => { + spyOn(component, 'canShowLabel').and.callThrough(); + + component.hideLabel = true; + + const result = component.canShowLabel(); + + expect(component.canShowLabel).toHaveBeenCalled(); + expect(result).toBe(false); + }); }); describe('Templates: ', () => { diff --git a/projects/ui/src/lib/components/po-button/po-button.component.ts b/projects/ui/src/lib/components/po-button/po-button.component.ts index 70963687c..3618c1ff5 100644 --- a/projects/ui/src/lib/components/po-button/po-button.component.ts +++ b/projects/ui/src/lib/components/po-button/po-button.component.ts @@ -60,4 +60,8 @@ export class PoButtonComponent extends PoButtonBaseComponent { onClick() { this.click.emit(null); } + + canShowLabel() { + return this.label && !this.hideLabel ? true : false; + } } diff --git a/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.html b/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.html index bfb094eb2..37bf77570 100644 --- a/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.html +++ b/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.html @@ -3,6 +3,7 @@
- + +
diff --git a/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.ts b/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.ts index f0af681e6..9fe0ccc51 100644 --- a/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.ts +++ b/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.ts @@ -12,11 +12,13 @@ export class SamplePoButtonLabsComponent implements OnInit { icon: string; size: string; properties: Array; + hideLabel: boolean; propertiesOptions: Array = [ { value: 'disabled', label: 'Disabled' }, { value: 'loading', label: 'Loading' }, - { value: 'danger', label: 'Danger' } + { value: 'danger', label: 'Danger' }, + { value: 'hideLabel', label: 'Hide Label', disabled: true } ]; iconsOptions: Array = [ @@ -61,6 +63,18 @@ export class SamplePoButtonLabsComponent implements OnInit { } } + verifyHideLabel() { + const options = [...this.propertiesOptions]; + + if (this.label.length > 0) { + options[3] = { value: 'hideLabel', label: 'Hide Label', disabled: false }; + } else { + options[3] = { value: 'hideLabel', label: 'Hide Label', disabled: true }; + } + + this.propertiesOptions = options; + } + verifyDisabled(event) { const value = [...this.propertiesOptions]; @@ -78,6 +92,8 @@ export class SamplePoButtonLabsComponent implements OnInit { this.kind = 'secondary'; this.size = 'medium'; this.icon = undefined; + this.hideLabel = false; + this.propertiesOptions[3] = { ...this.propertiesOptions[3], disabled: true }; this.properties = []; this.kindsOptions[2] = { ...this.kindsOptions[2], disabled: false }; this.sizesOptions[0] = { ...this.sizesOptions[0], disabled: false };