feat(button): adiciona propriedade p-hide-label

Author: felipepetuco

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;
 }

projects/ui/src/lib/components/po-button/po-button.component.html

@@ -15,5 +15,5 @@
   </div>
 
   <po-icon *ngIf="icon" class="po-button-icon" [p-icon]="icon"></po-icon>
-  <span *ngIf="label" class="po-button-label">{{ label }}</span>
+  <span *ngIf="canShowLabel()" class="po-button-label">{{ label }}</span>
 </button>

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: ', () => {

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;
+  }
 }

projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.html

@@ -3,6 +3,7 @@
   <po-button
     class="po-sm-12"
     [p-disabled]="properties.includes('disabled')"
+    [p-hide-label]="properties.includes('hideLabel')"
     [p-icon]="icon"
     [p-label]="label"
     [p-loading]="properties.includes('loading')"
@@ -19,7 +20,15 @@
 <!-- Properties -->
 <form #f="ngForm">
   <div class="po-row">
-    <po-input class="po-md-6" name="label" [(ngModel)]="label" p-clean p-label="Label"> </po-input>
+    <po-input
+      class="po-md-6"
+      name="label"
+      [(ngModel)]="label"
+      p-clean
+      p-label="Label"
+      (p-change-model)="verifyHideLabel()"
+    >
+    </po-input>
   </div>
 
   <div class="po-row">

projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
 
 import { PoCheckboxGroupOption, PoRadioGroupOption, PoDialogService } from '@po-ui/ng-components';
 
@@ -12,11 +12,13 @@ export class SamplePoButtonLabsComponent implements OnInit {
   icon: string;
   size: string;
   properties: Array<string>;
+  hideLabel: boolean;
 
   propertiesOptions: Array<PoCheckboxGroupOption> = [
     { 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<PoRadioGroupOption> = [
@@ -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 };