ProgressSpinner - Documentation and Template Class Discrepancy

[Aniruddha-Shriwant]

Describe the bug

The classes mentioned in the documentation for the ProgressSpinner component are not aligned with the classes used in the actual Angular component's template. This inconsistency can lead to confusion and potential issues for developers who rely on the documentation for theming or other customizations.

Environment

I encountered this issue while working in a development environment using Angular, specifically with PrimeNG's ProgressSpinner component.

Reproducer

No response

Angular version

16.1.4

PrimeNG version

16.0.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.0

Browser(s)

No response

Steps to reproduce the behavior

1. Navigate to the documentation for the ProgressSpinner component.
2. Observe the classes mentioned for various elements:
   • Expected for SVG element: p-progress-circle
   • Expected for Circle element: p-progress-path
3. Now, inspect the actual Angular component's template.
4. Observe the classes used in the template:
   • Actual for SVG element: p-progress-spinner-svg
   • Actual for Circle element: p-progress-spinner-circle
5. Notice the discrepancy between the expected classes from the documentation and the actual classes in the component template.

Template:

primeng/src/app/components/progressspinner/progressspinner.ts

Lines 9 to 15 in 24993b4

	template: `
	<div class="p-progress-spinner" [ngStyle]="style" [ngClass]="styleClass" role="progressbar" [attr.aria-busy]="true" [attr.data-pc-name]="'progressspinner'" [attr.data-pc-section]="'root'">
	<svg class="p-progress-spinner-svg" viewBox="25 25 50 50" [style.animation-duration]="animationDuration" [attr.data-pc-section]="'root'">
	<circle class="p-progress-spinner-circle" cx="50" cy="50" r="20" [attr.fill]="fill" [attr.stroke-width]="strokeWidth" stroke-miterlimit="10" />
	</svg>
	</div>
	`,

Documentation:

primeng/src/app/showcase/doc/progressspinner/styledoc.ts

Lines 22 to 29 in 24993b4

	<tr>
	<td>p-progress-circle</td>
	<td>SVG element.</td>
	</tr>
	<tr>
	<td>p-progress-path</td>
	<td>Circle element.</td>
	</tr>

Expected behavior

The classes mentioned in the documentation should align with the classes used in the Angular component's template to avoid any confusion or potential issues.

[SoyDiego]

Hi @Aniruddha-Shriwant, thanks for report the issue.
Pull requests are welcome :)

[Aniruddha-Shriwant]

Thanks @SoyDiego will raise it 😛