Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Button): The icon is not shown #15773

Merged
merged 7 commits into from
Jun 13, 2024
Merged

fix(Button): The icon is not shown #15773

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3d47465
fix button icon
SoyDiego May 31, 2024
e746ab9
format code
SoyDiego Jun 1, 2024
7294cfd
format code
SoyDiego Jun 1, 2024
33b060e
fix button icon
SoyDiego Jun 1, 2024
48c4d43
fix button icon and now detects whatever class you pass
SoyDiego Jun 1, 2024
17f4318
format code
SoyDiego Jun 1, 2024
45141f4
restore change
SoyDiego Jun 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 20 additions & 6 deletions src/app/components/button/button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,10 +303,17 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
let iconElement = DomHandler.findSingle(this.htmlElement, '.p-button-icon');
let labelElement = DomHandler.findSingle(this.htmlElement, '.p-button-label');

if (this.loading && !this.loadingIcon && iconElement) {
iconElement.innerHTML = this.spinnerIcon;
} else if (iconElement?.innerHTML) {
if (this.loading) {
if (!this.loadingIcon && iconElement) {
iconElement.innerHTML = this.spinnerIcon;
} else if (this.loadingIcon && iconElement) {
iconElement.className = `p-button-icon ${this.loadingIcon}`;
}
} else if (this.icon && iconElement) {
iconElement.className = `p-button-icon ${this.icon}`;
} else if (iconElement) {
iconElement.innerHTML = '';
this.createIcon();
}

if (iconElement) {
Expand Down Expand Up @@ -363,7 +370,7 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
<ng-template [ngIf]="loadingIconTemplate" *ngTemplateOutlet="loadingIconTemplate; context: { class: iconClass() }"></ng-template>
</ng-container>
<ng-container *ngIf="!loading">
<span *ngIf="icon && !iconTemplate" [class]="icon" [ngClass]="iconClass()" [attr.data-pc-section]="'icon'"></span>
<span *ngIf="icon && !iconTemplate" [ngClass]="iconClass()" [attr.data-pc-section]="'icon'"></span>
<ng-template [ngIf]="!icon && iconTemplate" *ngTemplateOutlet="iconTemplate; context: { class: iconClass() }"></ng-template>
</ng-container>
<span class="p-button-label" [attr.aria-hidden]="icon && !label" *ngIf="!contentTemplate && label" [attr.data-pc-section]="'label'">{{ label }}</span>
Expand Down Expand Up @@ -527,14 +534,21 @@ export class Button implements AfterContentInit {
}

iconClass() {
return {
[`p-button-loading-icon pi-spin ${this.loadingIcon ?? ''}`]: this.loading,
const iconClasses = {
'p-button-icon': true,
'p-button-icon-left': this.iconPos === 'left' && this.label,
'p-button-icon-right': this.iconPos === 'right' && this.label,
'p-button-icon-top': this.iconPos === 'top' && this.label,
'p-button-icon-bottom': this.iconPos === 'bottom' && this.label
};

if (this.loading) {
iconClasses[`p-button-loading-icon pi-spin ${this.loadingIcon ?? ''}`] = true;
} else if (this.icon) {
iconClasses[this.icon] = true;
}

return iconClasses;
}

get buttonClass() {
Expand Down
20 changes: 20 additions & 0 deletions src/app/showcase/doc/apidoc/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22310,6 +22310,26 @@
],
"description": "Callback to invoke when default command button is clicked."
},
{
"name": "onMenuHide",
"parameters": [
{
"name": "value",
"type": "any"
}
],
"description": "Callback to invoke when overlay menu is hidden."
},
{
"name": "onMenuShow",
"parameters": [
{
"name": "value",
"type": "any"
}
],
"description": "Callback to invoke when overlay menu is shown."
},
{
"name": "onDropdownClick",
"parameters": [
Expand Down
Loading