Skip to content

Commit

Permalink
Merge pull request #13355 from SoyDiego/13342-button-documentation
Browse files Browse the repository at this point in the history
Button Docs Update: <p-button> examples should use onClick instead of click
  • Loading branch information
cetincakiroglu authored Jul 21, 2023
2 parents b41b175 + 911ce9c commit ea0f869
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 10 deletions.
9 changes: 6 additions & 3 deletions src/app/components/button/button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
</defs>
</svg>`;

constructor(public el: ElementRef, @Inject(DOCUMENT) private document: Document) {}
constructor(public el: ElementRef, @Inject(DOCUMENT) private document: Document) { }

ngAfterViewInit() {
DomHandler.addMultipleClasses(this.htmlElement, this.getStyleClass().join(' '));
Expand Down Expand Up @@ -329,19 +329,22 @@ export class Button implements AfterContentInit {
*/
@Input() ariaLabel: string | undefined;
/**
* Callback to execute when button is clicked.
* Callback to execute when button is clicked.
* This event is intended to be used with the <p-button> component. Using a regular <button> element, use (click).
* @param {MouseEvent} event - Mouse event.
* @group Emits
*/
@Output() onClick: EventEmitter<MouseEvent> = new EventEmitter();
/**
* Callback to execute when button is focused.
* This event is intended to be used with the <p-button> component. Using a regular <button> element, use (focus).
* @param {FocusEvent} event - Focus event.
* @group Emits
*/
@Output() onFocus: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();
/**
* Callback to execute when button loses focus.
* This event is intended to be used with the <p-button> component. Using a regular <button> element, use (blur).
* @param {FocusEvent} event - Focus event.
* @group Emits
*/
Expand Down Expand Up @@ -417,4 +420,4 @@ export class Button implements AfterContentInit {
exports: [ButtonDirective, Button, SharedModule],
declarations: [ButtonDirective, Button]
})
export class ButtonModule {}
export class ButtonModule { }
14 changes: 7 additions & 7 deletions src/app/showcase/doc/button/loadingdoc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import { Code } from '../../domain/code';
<p>Busy state is controlled with the <i>loading</i> property.</p>
</app-docsectiontext>
<div class="card flex justify-content-center">
<p-button label="Submit" [loading]="loading" (click)="load()"></p-button>
<p-button label="Submit" [loading]="loading" (onClick)="load()"></p-button>
<p-button label="Loading custom icon" [loading]="loading" loadingIcon="pi pi-bell" (click)="load()"></p-button>
<p-button label="Loading custom icon" [loading]="loading" loadingIcon="pi pi-bell" (onClick)="load()"></p-button>
</div>
<app-code [code]="code" selector="button-loading-demo"></app-code>
</section>`
Expand All @@ -22,7 +22,7 @@ export class LoadingDoc {

loading: boolean = false;

constructor(private readonly cdr: ChangeDetectorRef) {}
constructor(private readonly cdr: ChangeDetectorRef) { }

load() {
this.loading = true;
Expand All @@ -35,13 +35,13 @@ export class LoadingDoc {

code: Code = {
basic: `
<p-button label="Submit" [loading]="loading" (click)="load()"></p-button>
<p-button label="Loading custom icon" [loading]="loading" loadingIcon="pi pi-bell" (click)="load()"></p-button>`,
<p-button label="Submit" [loading]="loading" (onClick)="load()"></p-button>
<p-button label="Loading custom icon" [loading]="loading" loadingIcon="pi pi-bell" (onClick)="load()"></p-button>`,

html: `
<div class="card flex justify-content-center">
<p-button label="Submit" [loading]="loading" (click)="load()"></p-button>
<p-button label="Loading custom icon" [loading]="loading" loadingIcon="pi pi-bell" (click)="load()"></p-button>
<p-button label="Submit" [loading]="loading" (onClick)="load()"></p-button>
<p-button label="Loading custom icon" [loading]="loading" loadingIcon="pi pi-bell" (onClick)="load()"></p-button>
</div>`,

typescript: `
Expand Down

1 comment on commit ea0f869

@vercel
Copy link

@vercel vercel bot commented on ea0f869 Jul 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.