From c6bda985551ec9d943294fc64853b1e075d4388c Mon Sep 17 00:00:00 2001
From: Egor Volvachev <axe.onegaimy@gmail.com>
Date: Tue, 16 Jul 2024 20:41:38 +0300
Subject: [PATCH] fix(primeng/documentation): unnecessary ripple effect on
 button in toast examples

Fixes #16025.
---
 src/app/showcase/doc/toast/animationdoc.ts  |  6 ++--
 src/app/showcase/doc/toast/basicdoc.ts      |  6 ++--
 src/app/showcase/doc/toast/cleardoc.ts      |  8 ++---
 src/app/showcase/doc/toast/headlessdoc.ts   |  6 ++--
 src/app/showcase/doc/toast/lifedoc.ts       |  8 ++---
 src/app/showcase/doc/toast/multipledoc.ts   |  4 +--
 src/app/showcase/doc/toast/positiondoc.ts   | 12 ++------
 src/app/showcase/doc/toast/responsivedoc.ts |  6 ++--
 src/app/showcase/doc/toast/severitydoc.ts   | 34 +++++++--------------
 src/app/showcase/doc/toast/stickydoc.ts     | 16 ++++------
 src/app/showcase/doc/toast/targetdoc.ts     | 16 ++++------
 src/app/showcase/doc/toast/templatedoc.ts   |  6 ++--
 12 files changed, 46 insertions(+), 82 deletions(-)

diff --git a/src/app/showcase/doc/toast/animationdoc.ts b/src/app/showcase/doc/toast/animationdoc.ts
index efe08ccfe19..b8c8256248b 100644
--- a/src/app/showcase/doc/toast/animationdoc.ts
+++ b/src/app/showcase/doc/toast/animationdoc.ts
@@ -10,7 +10,7 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <p-toast [showTransformOptions]="'translateY(100%)'" [showTransitionOptions]="'1000ms'" [hideTransitionOptions]="'1000ms'" [showTransformOptions]="'translateX(100%)'" />
-            <p-button pRipple (onClick)="show()" label="Show" />
+            <p-button (onClick)="show()" label="Show" />
         </div>
         <app-code [code]="code" selector="toast-animation-demo"></app-code>
     `,
@@ -29,14 +29,14 @@ export class AnimationDoc {
     [showTransitionOptions]="'1000ms'" 
     [hideTransitionOptions]="'1000ms'" 
     [showTransformOptions]="'translateX(100%)'" />
-<p-button pRipple (onClick)="show()" label="Show" />`,
+<p-button (onClick)="show()" label="Show" />`,
         html: `<div class="card flex justify-content-center">
     <p-toast 
         [showTransformOptions]="'translateY(100%)'" 
         [showTransitionOptions]="'1000ms'" 
         [hideTransitionOptions]="'1000ms'" 
         [showTransformOptions]="'translateX(100%)'" />
-    <p-button pRipple (onClick)="show()" label="Show" />
+    <p-button (onClick)="show()" label="Show" />
 </div>`,
         typescript: `import { Component } from '@angular/core';
 import { MessageService } from 'primeng/api';
diff --git a/src/app/showcase/doc/toast/basicdoc.ts b/src/app/showcase/doc/toast/basicdoc.ts
index e4bd9b7d8f9..4af6d7fd8c2 100644
--- a/src/app/showcase/doc/toast/basicdoc.ts
+++ b/src/app/showcase/doc/toast/basicdoc.ts
@@ -13,7 +13,7 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <p-toast />
-            <p-button pRipple (onClick)="show()" label="Show" />
+            <p-button (onClick)="show()" label="Show" />
         </div>
         <app-code [code]="code" selector="toast-basic-demo"></app-code>
     `,
@@ -28,10 +28,10 @@ export class BasicDoc {
 
     code: Code = {
         basic: `<p-toast />
-<p-button pRipple (onClick)="show()" label="Show" />`,
+<p-button (onClick)="show()" label="Show" />`,
         html: `<div class="card flex justify-content-center">
     <p-toast />
-    <p-button pRipple (onClick)="show()" label="Show" />
+    <p-button (onClick)="show()" label="Show" />
 </div>`,
         typescript: `import { Component } from '@angular/core';
 import { MessageService } from 'primeng/api';
diff --git a/src/app/showcase/doc/toast/cleardoc.ts b/src/app/showcase/doc/toast/cleardoc.ts
index 87de728aa34..120dfd06574 100644
--- a/src/app/showcase/doc/toast/cleardoc.ts
+++ b/src/app/showcase/doc/toast/cleardoc.ts
@@ -13,8 +13,8 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card flex justify-content-center gap-2">
             <p-toast key="myKey" />
-            <p-button pRipple (onClick)="show()" label="Show" />
-            <p-button pRipple (onClick)="clear()" label="Clear" severity="secondary" />
+            <p-button (onClick)="show()" label="Show" />
+            <p-button (onClick)="clear()" label="Clear" severity="secondary" />
         </div>
         <app-code [code]="code" selector="toast-clear-demo"></app-code>
     `,
@@ -34,22 +34,18 @@ export class ClearDoc {
     code: Code = {
         basic: `<p-toast key="myKey" />
 <p-button 
-    pRipple 
     (onClick)="show()" 
     label="Show" />
 <p-button 
-    pRipple 
     (onClick)="clear()" 
     label="Clear" 
     severity="secondary" />`,
         html: `<div class="card flex justify-content-center gap-2">
     <p-toast key="myKey" />
     <p-button 
-        pRipple 
         (onClick)="show()" 
         label="Show" />
     <p-button 
-        pRipple 
         (onClick)="clear()" 
         label="Clear" 
         severity="secondary" />
diff --git a/src/app/showcase/doc/toast/headlessdoc.ts b/src/app/showcase/doc/toast/headlessdoc.ts
index a95255d6efa..abf81cbd8ab 100644
--- a/src/app/showcase/doc/toast/headlessdoc.ts
+++ b/src/app/showcase/doc/toast/headlessdoc.ts
@@ -28,7 +28,7 @@ import { Code } from '@domain/code';
                     </section>
                 </ng-template>
             </p-toast>
-            <p-button pRipple (onClick)="showConfirm()" label="Confirm" />
+            <p-button (onClick)="showConfirm()" label="Confirm" />
         </div>
         <app-code [code]="code" selector="toast-headless-demo"></app-code>
     `,
@@ -115,7 +115,7 @@ export class HeadlessDoc {
             </section>
         </ng-template>
 </p-toast>
-<p-button pRipple (onClick)="showConfirm()" label="Confirm" />`,
+<p-button (onClick)="showConfirm()" label="Confirm" />`,
         html: `<div class="card flex justify-content-center">
     <p-toast 
         position="top-center" 
@@ -157,7 +157,7 @@ export class HeadlessDoc {
                 </section>
             </ng-template>
     </p-toast>
-    <p-button pRipple (onClick)="showConfirm()" label="Confirm" />
+    <p-button (onClick)="showConfirm()" label="Confirm" />
 </div>`,
         typescript: `import { ChangeDetectorRef, Component } from '@angular/core';
 import { MessageService } from 'primeng/api';
diff --git a/src/app/showcase/doc/toast/lifedoc.ts b/src/app/showcase/doc/toast/lifedoc.ts
index f1098b30c80..0bd3c0c5587 100644
--- a/src/app/showcase/doc/toast/lifedoc.ts
+++ b/src/app/showcase/doc/toast/lifedoc.ts
@@ -10,8 +10,8 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card flex justify-content-center gap-2">
             <p-toast [life]="10000" />
-            <p-button pRipple (onClick)="showLife()" label="Show Life" />
-            <p-button pRipple (onClick)="showLifeLong()" label="Show Life Long" />
+            <p-button (onClick)="showLife()" label="Show Life" />
+            <p-button (onClick)="showLifeLong()" label="Show Life Long" />
         </div>
         <app-code [code]="code" selector="toast-life-demo"></app-code>
     `,
@@ -31,21 +31,17 @@ export class LifeDoc {
     code: Code = {
         basic: `<p-toast [life]="10000" />
 <p-button 
-    pRipple 
     (onClick)="showLife()" 
     label="Show Life" />
 <p-button 
-    pRipple 
     (onClick)="showLifeLong()" 
     label="Show Life Long" />`,
         html: `<div class="card flex justify-content-center">
     <p-toast [life]="10000" />
     <p-button 
-        pRipple 
         (onClick)="showLife()" 
         label="Show Life" />
     <p-button
-        pRipple 
         (onClick)="showLifeLong()" 
         label="Show Life Long" />
 </div>`,
diff --git a/src/app/showcase/doc/toast/multipledoc.ts b/src/app/showcase/doc/toast/multipledoc.ts
index 0822d5589fb..8561b2e1ffd 100644
--- a/src/app/showcase/doc/toast/multipledoc.ts
+++ b/src/app/showcase/doc/toast/multipledoc.ts
@@ -10,7 +10,7 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <p-toast />
-            <p-button pRipple (onClick)="show()" label="Multiple" severity="warning" />
+            <p-button (onClick)="show()" label="Multiple" severity="warning" />
         </div>
         <app-code [code]="code" selector="toast-multiple-demo"></app-code>
     `,
@@ -31,14 +31,12 @@ export class MultipleDoc {
     code: Code = {
         basic: `<p-toast />
 <p-button
-    pRipple 
     (onClick)="show()" 
     label="Multiple" 
     severity="warning" />`,
         html: `<div class="card flex justify-content-center">
     <p-toast />
     <p-button 
-        pRipple 
         (onClick)="show()" 
         label="Multiple" 
         severity="warning" />
diff --git a/src/app/showcase/doc/toast/positiondoc.ts b/src/app/showcase/doc/toast/positiondoc.ts
index 43b8621a046..7da0ad27a8f 100644
--- a/src/app/showcase/doc/toast/positiondoc.ts
+++ b/src/app/showcase/doc/toast/positiondoc.ts
@@ -13,9 +13,9 @@ import { Code } from '@domain/code';
             <p-toast position="bottom-left" key="bl" />
             <p-toast position="bottom-right" key="br" />
 
-            <p-button pRipple (onClick)="showTopLeft()" label="Top Left" />
-            <p-button pRipple (onClick)="showBottomLeft()" label="Bottom Left" severity="warning" />
-            <p-button pRipple (onClick)="showBottomRight()" label="Bottom Right" severity="help" />
+            <p-button (onClick)="showTopLeft()" label="Top Left" />
+            <p-button (onClick)="showBottomLeft()" label="Bottom Left" severity="warning" />
+            <p-button (onClick)="showBottomRight()" label="Bottom Right" severity="help" />
         </div>
         <app-code [code]="code" selector="toast-position-demo"></app-code>
     `,
@@ -42,16 +42,13 @@ export class PositionDoc {
 <p-toast position="bottom-right" key="br" />
 
 <p-button 
-    pRipple 
     (onClick)="showTopLeft()" 
     label="Top Left" />
 <p-button 
-    pRipple 
     (onClick)="showBottomLeft()" 
     label="Bottom Left" 
     severity="warning" />
 <p-button 
-    pRipple 
     (onClick)="showBottomRight()" 
     label="Bottom Right" 
     severity="help" />`,
@@ -62,16 +59,13 @@ export class PositionDoc {
     <p-toast position="bottom-right" key="br" />
 
     <p-button 
-        pRipple 
         (onClick)="showTopLeft()" 
         label="Top Left" />
     <p-button 
-        pRipple 
         (onClick)="showBottomLeft()" 
         label="Bottom Left" 
         severity="warning" />
     <p-button 
-        pRipple 
         (onClick)="showBottomRight()" 
         label="Bottom Right" 
         severity="help" />
diff --git a/src/app/showcase/doc/toast/responsivedoc.ts b/src/app/showcase/doc/toast/responsivedoc.ts
index 536369bc939..b2a9cc5149d 100644
--- a/src/app/showcase/doc/toast/responsivedoc.ts
+++ b/src/app/showcase/doc/toast/responsivedoc.ts
@@ -13,7 +13,7 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <p-toast [breakpoints]="{ '920px': { width: '100%', right: '0', left: '0' } }" />
-            <p-button pRipple (onClick)="show()" label="Show" />
+            <p-button (onClick)="show()" label="Show" />
         </div>
         <app-code [code]="code" selector="toast-responsive-demo"></app-code>
     `,
@@ -28,10 +28,10 @@ export class ResponsiveDoc {
 
     code: Code = {
         basic: `<p-toast [breakpoints]="{ '920px': { width: '100%', right: '0', left: '0' } }" />
-<p-button pRipple (onClick)="show()" label="Show" />`,
+<p-button (onClick)="show()" label="Show" />`,
         html: `<div class="card flex justify-content-center">
     <p-toast [breakpoints]="{ '920px': { width: '100%', right: '0', left: '0' } }" />
-    <p-button pRipple (onClick)="show()" label="Show" />
+    <p-button (onClick)="show()" label="Show" />
 </div>`,
         typescript: `import { Component } from '@angular/core';
 import { MessageService } from 'primeng/api';
diff --git a/src/app/showcase/doc/toast/severitydoc.ts b/src/app/showcase/doc/toast/severitydoc.ts
index 3f9742701d9..e2e10746b63 100644
--- a/src/app/showcase/doc/toast/severitydoc.ts
+++ b/src/app/showcase/doc/toast/severitydoc.ts
@@ -13,12 +13,12 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card flex justify-content-center gap-2">
             <p-toast />
-            <p-button type="button" pRipple (onClick)="showSuccess()" label="Success" severity="success" />
-            <p-button type="button" pRipple (onClick)="showInfo()" label="Info" severity="info" />
-            <p-button type="button" pRipple (onClick)="showWarn()" label="Warn" severity="warning" />
-            <p-button type="button" pRipple (onClick)="showError()" label="Error" severity="danger" />
-            <p-button type="button" pRipple (onClick)="showSecondary()" label="Secondary" severity="secondary" />
-            <p-button type="button" pRipple (onClick)="showContrast()" label="Contrast" severity="contrast" />
+            <p-button type="button" (onClick)="showSuccess()" label="Success" severity="success" />
+            <p-button type="button" (onClick)="showInfo()" label="Info" severity="info" />
+            <p-button type="button" (onClick)="showWarn()" label="Warn" severity="warning" />
+            <p-button type="button" (onClick)="showError()" label="Error" severity="danger" />
+            <p-button type="button" (onClick)="showSecondary()" label="Secondary" severity="secondary" />
+            <p-button type="button" (onClick)="showContrast()" label="Contrast" severity="contrast" />
         </div>
         <app-code [code]="code" selector="toast-severity-demo"></app-code>
     `,
@@ -55,75 +55,63 @@ export class SeverityDoc {
         basic: `<p-toast />
 <p-button 
     type="button" 
-    pRipple 
     (onClick)="showSuccess()" 
     label="Success" 
     severity="success" />
 <p-button 
     type="button"
-    pRipple 
     (onClick)="showInfo()" 
     label="Info" 
     severity="info" />
 <p-button 
     type="button" 
-    pRipple 
     (onClick)="showWarn()" 
     label="Warn" 
     severity="warning" />
 <p-button 
     type="button" 
-    pRipple 
     (onClick)="showError()" 
     label="Error" 
     severity="danger" />
 <p-button 
     type="button" 
-    pRipple 
     (onClick)="showSecondary()" 
     label="Secondary" 
     severity="secondary" />
 <p-button 
     type="button" 
-    pRipple 
     (onClick)="showContrast()" 
     label="Contrast" 
     severity="contrast" />`,
         html: `<div class="card flex justify-content-center gap-2">
     <p-toast />
     <p-button 
-        type="button" 
-        pRipple 
+        type="button"
         (onClick)="showSuccess()" 
         label="Success" 
         severity="success" />
     <p-button 
         type="button"
-        pRipple 
         (onClick)="showInfo()" 
         label="Info" 
         severity="info" />
     <p-button 
-        type="button" 
-        pRipple 
+        type="button"
         (onClick)="showWarn()" 
         label="Warn" 
         severity="warning"  />
     <p-button 
-        type="button" 
-        pRipple 
+        type="button"
         (onClick)="showError()" 
         label="Error" 
         severity="danger" />
     <p-button 
-        type="button" 
-        pRipple 
+        type="button"
         (onClick)="showSecondary()" 
         label="Secondary" 
         severity="secondary" />
     <p-button 
-        type="button" 
-        pRipple 
+        type="button"
         (onClick)="showContrast()" 
         label="Contrast" 
         severity="contrast" />
diff --git a/src/app/showcase/doc/toast/stickydoc.ts b/src/app/showcase/doc/toast/stickydoc.ts
index 434fea5d1aa..819b7ccf47e 100644
--- a/src/app/showcase/doc/toast/stickydoc.ts
+++ b/src/app/showcase/doc/toast/stickydoc.ts
@@ -11,8 +11,8 @@ import { Code } from '@domain/code';
         <div class="card flex justify-content-center">
             <p-toast />
             <div class="flex flex-wrap gap-2">
-                <p-button pRipple (onClick)="show()" severity="success" label="Sticky" />
-                <p-button pRipple (onClick)="clear()" label="Clear" />
+                <p-button (onClick)="show()" severity="success" label="Sticky" />
+                <p-button (onClick)="clear()" label="Clear" />
             </div>
         </div>
         <app-code [code]="code" selector="toast-sticky-demo"></app-code>
@@ -33,26 +33,22 @@ export class StickyDoc {
     code: Code = {
         basic: `<p-toast />
 <div class="flex flex-wrap gap-2">
-    <p-button 
-        pRipple 
+    <p-button
         (onClick)="show()" 
         severity="success" 
         label="Sticky" />
-    <p-button 
-        pRipple 
+    <p-button
         (onClick)="clear()" 
         label="Clear" />
 </div>`,
         html: `<div class="card flex justify-content-center">
     <p-toast />
     <div class="flex flex-wrap gap-2">
-        <p-button 
-            pRipple 
+        <p-button
             (onClick)="show()" 
             severity="success" 
             label="Sticky" />
-        <p-button 
-            pRipple 
+        <p-button
             (onClick)="clear()" 
             label="Clear" />
     </div>
diff --git a/src/app/showcase/doc/toast/targetdoc.ts b/src/app/showcase/doc/toast/targetdoc.ts
index 881253f2e7e..a8a0549c386 100644
--- a/src/app/showcase/doc/toast/targetdoc.ts
+++ b/src/app/showcase/doc/toast/targetdoc.ts
@@ -11,8 +11,8 @@ import { Code } from '@domain/code';
         <div class="card flex justify-content-center gap-2">
             <p-toast key="toast1" />
             <p-toast key="toast2" />
-            <p-button pRipple (onClick)="showToast1()" label="Show Success" />
-            <p-button pRipple (onClick)="showToast2()" label="Show Warning" severity="warning" />
+            <p-button (onClick)="showToast1()" label="Show Success" />
+            <p-button (onClick)="showToast2()" label="Show Warning" severity="warning" />
         </div>
         <app-code [code]="code" selector="toast-target-demo"></app-code>
     `,
@@ -34,24 +34,20 @@ export class TargetDoc {
     code: Code = {
         basic: `<p-toast key="toast1" />
 <p-toast key="toast2" />
-<p-button 
-    pRipple 
+<p-button
     (onClick)="showToast1()" 
     label="Show Success" />
-<p-button 
-    pRipple 
+<p-button
     (onClick)="showToast2()" 
     label="Show Warning" 
     severity="warning" />`,
         html: `<div class="card flex justify-content-center gap-2">
     <p-toast key="toast1" />
     <p-toast key="toast2" />
-    <p-button 
-        pRipple 
+    <p-button
         (onClick)="showToast1()" 
         label="Show Success" />
-    <p-button 
-        pRipple 
+    <p-button
         (onClick)="showToast2()" 
         label="Show Warning" 
         severity="warning" />
diff --git a/src/app/showcase/doc/toast/templatedoc.ts b/src/app/showcase/doc/toast/templatedoc.ts
index 622b7b6d542..7bf19691770 100644
--- a/src/app/showcase/doc/toast/templatedoc.ts
+++ b/src/app/showcase/doc/toast/templatedoc.ts
@@ -21,7 +21,7 @@ import { Code } from '@domain/code';
                     </div>
                 </ng-template>
             </p-toast>
-            <p-button pRipple (onClick)="showConfirm()" label="View" />
+            <p-button (onClick)="showConfirm()" label="View" />
         </div>
         <app-code [code]="code" selector="toast-template-demo"></app-code>
     `,
@@ -72,7 +72,7 @@ export class TemplateDoc {
             </div>
         </ng-template>
 </p-toast>
-<p-button pRipple (onClick)="showConfirm()" label="View" />`,
+<p-button (onClick)="showConfirm()" label="View" />`,
         html: `<div class="card flex justify-content-center">
     <p-toast 
         position="bottom-center" 
@@ -96,7 +96,7 @@ export class TemplateDoc {
                 </div>
             </ng-template>
     </p-toast>
-    <p-button pRipple (onClick)="showConfirm()" label="View" />
+    <p-button (onClick)="showConfirm()" label="View" />
 </div>`,
         typescript: `import { Component } from '@angular/core';
 import { MessageService } from 'primeng/api';