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.

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

ConfirmDialog: icon has wrong size #17087

Open
Timmeeeey opened this issue Dec 17, 2024 · 1 comment
Open

ConfirmDialog: icon has wrong size #17087

Timmeeeey opened this issue Dec 17, 2024 · 1 comment
Assignees
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team
Milestone

Comments

@Timmeeeey
Copy link

Describe the bug

The icon in the confirmation dialog has the wrong size when the InputGroupAddonModule is used.

image

Environment

NA

Reproducer

https://stackblitz.com/edit/github-n6fwtktk-1dgsramq

Angular version

18.2.x

PrimeNG version

18.0.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.14.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

@Timmeeeey Timmeeeey added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Dec 17, 2024
@mertsincan mertsincan added Status: Pending Review Issue or pull request is being reviewed by Core Team and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Dec 17, 2024
@mertsincan mertsincan added this to the 18.0.1 milestone Dec 17, 2024
@github-project-automation github-project-automation bot moved this to Review in PrimeNG Dec 17, 2024
@imaksp
Copy link

imaksp commented Dec 17, 2024

Hello team, I tried to find reason for this:
when inputgroup is present it uses following default icon size instead of using custom size defined in .p-confirmdialog-icon class:

.pi {
    font-size: var(--p-icon-size);
}

Also I have noticed some components uses both class & ngClass, also both @if & *ngIf, this is from confirmDialog icon code:

@if (iconTemplate || _iconTemplate) {
    <ng-template *ngTemplateOutlet="iconTemplate || _iconTemplate"></ng-template>
} @else if (!iconTemplate && !_iconTemplate && !_messageTemplate && !messageTemplate) {
    <i [ngClass]="cx('icon')" [class]="option('icon')" *ngIf="option('icon')"></i>
}

Also ngClass & ngSyle might get deprecated soon with this PR: angular/angular#58860

I think such usage should be removed by refactoring code in v20.

@mehmetcetin01140 mehmetcetin01140 modified the milestones: 18.0.1, 19.0.1 Dec 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team
Projects
Status: Review
Development

No branches or pull requests

4 participants