Merge pull request #16036 from volvachev/fix-toast-documentation-example

fix(primeng/documentation): unnecessary ripple effect on button in toast examples
primefaces · Jul 18, 2024 · 73eda97 · 73eda97
2 parents e142de6 + c6bda98
commit 73eda97
Show file tree

Hide file tree

Showing 12 changed files with 46 additions and 82 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>