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.

Sign up for GitHub

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

Jump to bottom

fix(primeng/documentation): unnecessary ripple effect on button in toast examples #16036

Merged
merged 1 commit into from
Jul 18, 2024
Merged

fix(primeng/documentation): unnecessary ripple effect on button in toast examples #16036

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/app/showcase/doc/toast/animationdoc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`,
Expand All @@ -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';
Expand Down
6 changes: 3 additions & 3 deletions src/app/showcase/doc/toast/basicdoc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`,
Expand All @@ -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';
Expand Down
8 changes: 2 additions & 6 deletions src/app/showcase/doc/toast/cleardoc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`,
Expand All @@ -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" />
Expand Down
6 changes: 3 additions & 3 deletions src/app/showcase/doc/toast/headlessdoc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`,
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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';
Expand Down
8 changes: 2 additions & 6 deletions src/app/showcase/doc/toast/lifedoc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`,
Expand All @@ -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>`,
Expand Down
4 changes: 1 addition & 3 deletions src/app/showcase/doc/toast/multipledoc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`,
Expand All @@ -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" />
Expand Down
12 changes: 3 additions & 9 deletions src/app/showcase/doc/toast/positiondoc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`,
Expand All @@ -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" />`,
Expand All @@ -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" />
Expand Down
6 changes: 3 additions & 3 deletions src/app/showcase/doc/toast/responsivedoc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`,
Expand All @@ -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';
Expand Down
34 changes: 11 additions & 23 deletions src/app/showcase/doc/toast/severitydoc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`,
Expand Down Expand Up @@ -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" />
Expand Down
16 changes: 6 additions & 10 deletions src/app/showcase/doc/toast/stickydoc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
Loading
Loading