Skip to content

Commit 5e9f22c

Browse files
tugcekucukoglutugcekucukoglu
committed
feat: add ConfirmPopup docs
1 parent 30a4166 commit 5e9f22c

8 files changed

Lines changed: 451 additions & 0 deletions

File tree

‎apps/showcase/demo/confirmpopup/basic-demo.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { ConfirmPopup } from 'primereact/confirmpopup';
2+
3+
export default function BasicDemo() {
4+
return (
5+
<div className="card flex flex-wrap gap-2 justify-center">
6+
<ConfirmPopup>
7+
<ConfirmPopup.Trigger variant="outlined">Save</ConfirmPopup.Trigger>
8+
<ConfirmPopup.Portal>
9+
<ConfirmPopup.Content>
10+
<ConfirmPopup.Icon className="pi pi-exclamation-triangle" />
11+
<ConfirmPopup.Message>Are you sure you want to proceed?</ConfirmPopup.Message>
12+
</ConfirmPopup.Content>
13+
<ConfirmPopup.Footer>
14+
<ConfirmPopup.Reject severity="secondary" variant="outlined">
15+
Cancel
16+
</ConfirmPopup.Reject>
17+
<ConfirmPopup.Accept>Save</ConfirmPopup.Accept>
18+
</ConfirmPopup.Footer>
19+
</ConfirmPopup.Portal>
20+
</ConfirmPopup>
21+
<ConfirmPopup>
22+
<ConfirmPopup.Trigger severity="danger" variant="outlined">
23+
Delete
24+
</ConfirmPopup.Trigger>
25+
<ConfirmPopup.Portal>
26+
<ConfirmPopup.Content>
27+
<ConfirmPopup.Icon className="pi pi-info-circle" />
28+
<ConfirmPopup.Message>Are you sure you want to proceed?</ConfirmPopup.Message>
29+
</ConfirmPopup.Content>
30+
<ConfirmPopup.Footer>
31+
<ConfirmPopup.Reject severity="secondary" variant="outlined">
32+
Cancel
33+
</ConfirmPopup.Reject>
34+
<ConfirmPopup.Accept severity="danger">Delete</ConfirmPopup.Accept>
35+
</ConfirmPopup.Footer>
36+
</ConfirmPopup.Portal>
37+
</ConfirmPopup>
38+
</div>
39+
);
40+
}

‎apps/showcase/demo/confirmpopup/confirmpopup-pt.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { ConfirmPopup } from 'primereact/confirmpopup';
2+
3+
export default function ConfirmPopupPT() {
4+
return (
5+
<>
6+
<ConfirmPopup>
7+
<ConfirmPopup.Trigger variant="outlined">Open Popup</ConfirmPopup.Trigger>
8+
<ConfirmPopup.Portal>
9+
<ConfirmPopup.Content>
10+
<ConfirmPopup.Icon className="pi pi-exclamation-triangle" />
11+
<ConfirmPopup.Message>Are you sure you want to proceed?</ConfirmPopup.Message>
12+
</ConfirmPopup.Content>
13+
<ConfirmPopup.Footer>
14+
<ConfirmPopup.Reject severity="secondary" variant="outlined">
15+
Cancel
16+
</ConfirmPopup.Reject>
17+
<ConfirmPopup.Accept>Save</ConfirmPopup.Accept>
18+
</ConfirmPopup.Footer>
19+
</ConfirmPopup.Portal>
20+
</ConfirmPopup>
21+
{/* <ConfirmPopup />
22+
<div
23+
id="pr_id_r4a"
24+
role="alertdialog"
25+
aria-modal="true"
26+
data-pc-name="motion"
27+
data-pc-section="root"
28+
className="p-confirmpopup p-component !relative"
29+
style={{
30+
'--pui-motion-height': '82px',
31+
zIndex: 1107,
32+
insetInlineStart: '1648.12px',
33+
top: '874.953px',
34+
transformOrigin: 'center top',
35+
'--p-confirmpopup-arrow-left': '0px'
36+
}}
37+
>
38+
<div className="p-confirmpopup-content" data-pc-section="root" data-pc-name="confirmpopupcontent">
39+
<span className="p-confirmpopup-icon pi pi-exclamation-triangle" data-pc-section="root" data-pc-name="confirmpopupicon"></span>
40+
<span className="p-confirmpopup-message" data-pc-section="root" data-pc-name="confirmpopupmessage">
41+
Are you sure you want to proceed?
42+
</span>
43+
</div>
44+
<div className="p-confirmpopup-footer" data-pc-section="root" data-pc-name="confirmpopupfooter">
45+
<button id="pr_id_r5s" className="p-button p-component p-button-secondary p-button-outlined p-button-sm p-confirmpopup-reject-button" data-pc-name="reject" data-pc-section="root" data-pc-extend="button">
46+
Cancel
47+
</button>
48+
<button id="pr_id_r62" className="p-button p-component p-button-sm p-confirmpopup-accept-button" data-pc-name="accept" data-pc-section="root" data-pc-extend="button">
49+
Save
50+
</button>
51+
</div>
52+
</div> */}
53+
</>
54+
);
55+
}

‎apps/showcase/demo/confirmpopup/template-demo.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { ConfirmPopup } from 'primereact/confirmpopup';
2+
3+
export default function TemplateDemo() {
4+
return (
5+
<div className="card flex justify-center">
6+
<ConfirmPopup>
7+
<ConfirmPopup.Trigger>Save</ConfirmPopup.Trigger>
8+
<ConfirmPopup.Portal>
9+
<ConfirmPopup.Content>
10+
<div className="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
11+
<i className="pi pi-exclamation-circle text-6xl text-primary-500"></i>
12+
<p>Please confirm to proceed moving forward.</p>
13+
</div>
14+
</ConfirmPopup.Content>
15+
<ConfirmPopup.Footer>
16+
<ConfirmPopup.Reject variant="outlined">
17+
<i className="pi pi-times" />
18+
Cancel
19+
</ConfirmPopup.Reject>
20+
<ConfirmPopup.Accept>
21+
<i className="pi pi-check" />
22+
Confirm
23+
</ConfirmPopup.Accept>
24+
</ConfirmPopup.Footer>
25+
</ConfirmPopup.Portal>
26+
</ConfirmPopup>
27+
</div>
28+
);
29+
}

‎apps/showcase/docs/components/confirmpopup/api.mdx‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
---
2+
title: ConfirmPopup API
3+
description: API documentation for ConfirmPopup component
4+
component: confirmpopup
5+
---
6+
7+
## ConfirmPopup
8+
9+
### Props
10+
11+
<DocTable name="ConfirmPopup" category="api" type="props" />
12+
13+
### State
14+
15+
<DocTable name="ConfirmPopup" category="api" type="state" />
16+
17+
### Exposes
18+
19+
<DocTable name="ConfirmPopup" category="api" type="exposes" />
20+
21+
### Interfaces
22+
23+
<DocTable name="ConfirmPopup" category="api" type="interfaces" />
24+
25+
### Types
26+
27+
<DocTable name="ConfirmPopup" category="api" type="types" />
28+
29+
## ConfirmPopupTrigger
30+
31+
### Props
32+
33+
<DocTable name="ConfirmPopupTrigger" category="api" type="props" />
34+
35+
### Exposes
36+
37+
<DocTable name="ConfirmPopupTrigger" category="api" type="exposes" />
38+
39+
### Interfaces
40+
41+
<DocTable name="ConfirmPopupTrigger" category="api" type="interfaces" />
42+
43+
### Types
44+
45+
<DocTable name="ConfirmPopupTrigger" category="api" type="types" />
46+
47+
## ConfirmPopupPortal
48+
49+
### Props
50+
51+
<DocTable name="ConfirmPopupPortal" category="api" type="props" />
52+
53+
### Exposes
54+
55+
<DocTable name="ConfirmPopupPortal" category="api" type="exposes" />
56+
57+
### Interfaces
58+
59+
<DocTable name="ConfirmPopupPortal" category="api" type="interfaces" />
60+
61+
### Types
62+
63+
<DocTable name="ConfirmPopupPortal" category="api" type="types" />
64+
65+
## ConfirmPopupContent
66+
67+
### Props
68+
69+
<DocTable name="ConfirmPopupContent" category="api" type="props" />
70+
71+
### Exposes
72+
73+
<DocTable name="ConfirmPopupContent" category="api" type="exposes" />
74+
75+
### Interfaces
76+
77+
<DocTable name="ConfirmPopupContent" category="api" type="interfaces" />
78+
79+
### Types
80+
81+
<DocTable name="ConfirmPopupContent" category="api" type="types" />
82+
83+
## ConfirmPopupIcon
84+
85+
### Props
86+
87+
<DocTable name="ConfirmPopupIcon" category="api" type="props" />
88+
89+
### Exposes
90+
91+
<DocTable name="ConfirmPopupIcon" category="api" type="exposes" />
92+
93+
### Interfaces
94+
95+
<DocTable name="ConfirmPopupIcon" category="api" type="interfaces" />
96+
97+
### Types
98+
99+
<DocTable name="ConfirmPopupIcon" category="api" type="types" />
100+
101+
## ConfirmPopupMessage
102+
103+
### Props
104+
105+
<DocTable name="ConfirmPopupMessage" category="api" type="props" />
106+
107+
### Exposes
108+
109+
<DocTable name="ConfirmPopupMessage" category="api" type="exposes" />
110+
111+
### Interfaces
112+
113+
<DocTable name="ConfirmPopupMessage" category="api" type="interfaces" />
114+
115+
### Types
116+
117+
<DocTable name="ConfirmPopupMessage" category="api" type="types" />
118+
119+
## ConfirmPopupFooter
120+
121+
### Props
122+
123+
<DocTable name="ConfirmPopupFooter" category="api" type="props" />
124+
125+
### Exposes
126+
127+
<DocTable name="ConfirmPopupFooter" category="api" type="exposes" />
128+
129+
### Interfaces
130+
131+
<DocTable name="ConfirmPopupFooter" category="api" type="interfaces" />
132+
133+
### Types
134+
135+
<DocTable name="ConfirmPopupFooter" category="api" type="types" />
136+
137+
## ConfirmPopupReject
138+
139+
### Props
140+
141+
<DocTable name="ConfirmPopupReject" category="api" type="props" />
142+
143+
### Exposes
144+
145+
<DocTable name="ConfirmPopupReject" category="api" type="exposes" />
146+
147+
### Interfaces
148+
149+
<DocTable name="ConfirmPopupReject" category="api" type="interfaces" />
150+
151+
### Types
152+
153+
<DocTable name="ConfirmPopupReject" category="api" type="types" />
154+
155+
## ConfirmPopupAccept
156+
157+
### Props
158+
159+
<DocTable name="ConfirmPopupAccept" category="api" type="props" />
160+
161+
### Exposes
162+
163+
<DocTable name="ConfirmPopupAccept" category="api" type="exposes" />
164+
165+
### Interfaces
166+
167+
<DocTable name="ConfirmPopupAccept" category="api" type="interfaces" />
168+
169+
### Types
170+
171+
<DocTable name="ConfirmPopupAccept" category="api" type="types" />
172+
173+
## useConfirmPopup
174+
175+
### Props
176+
177+
<DocTable name="useConfirmPopup" category="api" type="props" />
178+
179+
### State
180+
181+
<DocTable name="useConfirmPopup" category="api" type="state" />
182+
183+
### Exposes
184+
185+
<DocTable name="useConfirmPopup" category="api" type="exposes" />
186+
187+
### Events
188+
189+
<DocTable name="useConfirmPopup" category="api" type="events" />
190+
191+
### Types
192+
193+
<DocTable name="useConfirmPopup" category="api" type="types" />

‎apps/showcase/docs/components/confirmpopup/features.mdx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
title: ConfirmPopup
3+
description: ConfirmPopup uses a Dialog UI
4+
component: confirmpopup
5+
---
6+
7+
## Usage
8+
9+
```tsx
10+
import { ConfirmPopup } from 'primereact/confirmpopup';
11+
```
12+
13+
```tsx
14+
<ConfirmPopup>
15+
<ConfirmPopup.Trigger />
16+
<ConfirmPopup.Portal>
17+
<ConfirmPopup.Content>
18+
<ConfirmPopup.Icon />
19+
<ConfirmPopup.Message />
20+
</ConfirmPopup.Content>
21+
<ConfirmPopup.Footer>
22+
<ConfirmPopup.Reject />
23+
<ConfirmPopup.Accept />
24+
</ConfirmPopup.Footer>
25+
</ConfirmPopup.Portal>
26+
</ConfirmPopup>
27+
```
28+
29+
## Examples
30+
31+
### Basic
32+
33+
ConfirmPopup is defined using `ConfirmPopup`, `ConfirmPopup.Trigger`, `ConfirmPopup.Portal`, `ConfirmPopup.Content`, `ConfirmPopup.Footer`, `ConfirmPopup.Reject` and `ConfirmPopup.Accept` components.
34+
35+
<DocDemoViewer name="confirmpopup:basic-demo" />
36+
37+
### Template
38+
39+
ConfirmPopup can be customized with templates. The `ConfirmPopup.Content` can be used to define the content of the popup, while `ConfirmPopup.Footer` can be used to define the footer actions.
40+
41+
<DocDemoViewer name="confirmpopup:template-demo" />
42+
43+
## Accessibility
44+
45+
### Screen Reader
46+
47+
ConfirmPopup component uses `alertdialog` role and since any attribute is passed to the root element you may define attributes like `aria-label` or `aria-labelledby` to describe the popup contents. In addition `aria-modal` is added since focus is kept within the popup.
48+
49+
### Overlay Keyboard Support
50+
51+
| Key | Function |
52+
| ----------- | -------------------------------------------------------------------------- |
53+
| tab | Moves focus to the next the focusable element within the confirmpopup. |
54+
| shift + tab | Moves focus to the previous the focusable element within the confirmpopup. |
55+
| escape | Closes the popup and moves focus to the trigger. |
56+
57+
### Close Button Keyboard Support
58+
59+
| Key | Function |
60+
| ----- | --------------------------------------------------------------------- |
61+
| enter | Triggers the action, closes the popup and moves focus to the trigger. |
62+
| space | Triggers the action, closes the popup and moves focus to the trigger. |

0 commit comments

Comments
 (0)