Skip to content

Commit 0dbaecd

Browse files
ARYANSHAH1567ARYANSHAH1567
committed
Enhanced the Dialog component based on code section
Signed-off-by: Aryan Shah <aryanashah11@gmail.com>
1 parent 0f17739 commit 0dbaecd

2 files changed

Lines changed: 258 additions & 77 deletions

File tree

‎src/sections/Projects/Sistent/components/dialog/guidance.js‎

Lines changed: 181 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,218 @@
1-
import React from "react";
1+
import React, { useState } from "react";
22
import { navigate } from "gatsby";
33
import { useLocation } from "@reach/router";
4-
4+
import { SistentLayout } from "../../sistent-layout";
55
import {
66
Dialog,
77
DialogTitle,
88
DialogContent,
99
DialogActions,
1010
Button,
11-
SistentThemeProvider
11+
SistentThemeProvider,
12+
Input
1213
} from "@sistent/sistent";
13-
import { SistentLayout } from "../../sistent-layout";
14+
import { Row } from "../../../../../reusecore/Layout";
1415
import TabButton from "../../../../../reusecore/Button";
1516
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
16-
import { Row } from "../../../../../reusecore/Layout";
1717

1818
const DialogGuidance = () => {
19-
const location = useLocation();
2019
const { isDark } = useStyledDarkMode();
21-
const [open, setOpen] = React.useState(false);
20+
const location = useLocation();
21+
22+
const [openBasic, setOpenBasic] = useState(false);
23+
const [openForm, setOpenForm] = useState(false);
24+
const [openFullScreen, setOpenFullScreen] = useState(false);
2225

2326
return (
24-
<SistentLayout title="Dialog Guidance">
27+
<SistentLayout title="Dialog">
2528
<div className="content">
26-
<a id="Functionality">
27-
<h2>Design Guidelines and Best Practices</h2>
29+
<a id="Identity">
30+
<h2>Dialog</h2>
2831
</a>
2932
<p>
30-
When designing dialog components, it is crucial to consider their impact on user experience. Dialogs
31-
should be used thoughtfully to avoid frustrating users. Below are some best practices for implementing dialogs:
33+
The Dialog component is a modal window that appears on top of the main content to focus
34+
user attention on specific tasks or information. It provides a controlled way to present
35+
confirmations, forms, alerts, and detailed content without navigating away from the
36+
current context.
3237
</p>
33-
<ul>
34-
<li>Use dialogs for critical user decisions such as confirmations, deletions, and irreversible actions.</li>
35-
<li>Keep dialog content focused and brief. Do not overload with unnecessary information.</li>
36-
<li>Ensure accessibility by including focus management and keyboard navigation.</li>
37-
<li>Provide clear and distinct action buttons such as "Cancel" and "Confirm" with appropriate labels.</li>
38-
<li>Do not use dialogs for casual notifications—use banners or toast messages instead.</li>
39-
</ul>
40-
4138
<div className="filterBtns">
4239
<TabButton
43-
title="Overview"
44-
className={location.pathname === "/projects/sistent/components/dialog" ? "active" : ""}
40+
className={
41+
location.pathname === "/projects/sistent/components/dialog"
42+
? "active"
43+
: ""
44+
}
4545
onClick={() => navigate("/projects/sistent/components/dialog")}
46+
title="Overview"
4647
/>
4748
<TabButton
49+
className={
50+
location.pathname ===
51+
"/projects/sistent/components/dialog/guidance"
52+
? "active"
53+
: ""
54+
}
55+
onClick={() =>
56+
navigate("/projects/sistent/components/dialog/guidance")
57+
}
4858
title="Guidance"
49-
className={location.pathname === "/projects/sistent/components/dialog/guidance" ? "active" : ""}
50-
onClick={() => navigate("/projects/sistent/components/dialog/guidance")}
5159
/>
5260
<TabButton
53-
title="Code"
54-
className={location.pathname === "/projects/sistent/components/dialog/code" ? "active" : ""}
61+
className={
62+
location.pathname === "/projects/sistent/components/dialog/code"
63+
? "active"
64+
: ""
65+
}
5566
onClick={() => navigate("/projects/sistent/components/dialog/code")}
67+
title="Code"
5668
/>
5769
</div>
70+
<div className="main-content">
71+
<p>
72+
Proper usage of the Dialog component can enhance user experience by providing clear,
73+
focused interactions that guide users through important decisions and tasks. Below are
74+
guidelines and interactive examples to help you implement dialogs effectively.
75+
</p>
76+
77+
<a id="Usage">
78+
<h2>Usage</h2>
79+
</a>
80+
<p>
81+
To use the Dialog component, include it with the required props and structure. The component
82+
supports various configurations and styling options:
83+
</p>
84+
<ul>
85+
<li><code>open</code> to control visibility state</li>
86+
<li><code>onClose</code> for handling dialog closure</li>
87+
<li><code>fullScreen</code> for expanded display</li>
88+
<li><code>maxWidth</code> for size constraints</li>
89+
</ul>
90+
<br />
91+
92+
<a id="Basic Dialog">
93+
<h3>Basic Dialog</h3>
94+
</a>
95+
<p>
96+
A simple confirmation dialog with title, content, and action buttons. This pattern
97+
is ideal for user confirmations and simple decision-making scenarios:
98+
</p>
99+
<Row $Hcenter className="image-container">
100+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
101+
<Button onClick={() => setOpenBasic(true)}>Open Basic Dialog</Button>
102+
<Dialog open={openBasic} onClose={() => setOpenBasic(false)}>
103+
<DialogTitle>Confirm Action</DialogTitle>
104+
<DialogContent>
105+
Do you want to proceed with this action?
106+
</DialogContent>
107+
<DialogActions>
108+
<Button onClick={() => setOpenBasic(false)}>Cancel</Button>
109+
<Button color="primary" onClick={() => setOpenBasic(false)}>
110+
Confirm
111+
</Button>
112+
</DialogActions>
113+
</Dialog>
114+
</SistentThemeProvider>
115+
</Row>
58116

59-
<Row $Hcenter className="image-container">
60-
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
61-
<Button onClick={() => setOpen(true)}>Open Dialog</Button>
62-
<Dialog open={open} onClose={() => setOpen(false)}>
63-
<DialogTitle>Delete Item</DialogTitle>
64-
<DialogContent>Are you sure you want to delete this item? This action cannot be undone.</DialogContent>
65-
<DialogActions>
66-
<Button onClick={() => setOpen(false)}>Cancel</Button>
67-
<Button color="secondary" onClick={() => setOpen(false)}>Delete</Button>
68-
</DialogActions>
69-
</Dialog>
70-
</SistentThemeProvider>
71-
</Row>
117+
<br />
118+
<a id="Form Dialog">
119+
<h3>Dialog with Form</h3>
120+
</a>
121+
<p>
122+
Dialogs can contain forms for collecting user input without requiring navigation
123+
to a separate page. This pattern works well for quick data collection:
124+
</p>
125+
<Row $Hcenter className="image-container">
126+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
127+
<Button onClick={() => setOpenForm(true)}>Open Form Dialog</Button>
128+
<Dialog open={openForm} onClose={() => setOpenForm(false)}>
129+
<DialogTitle>Subscribe</DialogTitle>
130+
<DialogContent>
131+
<div style={{ display: "flex", flexDirection: "column", gap: "1rem", minWidth: "300px" }}>
132+
<Input
133+
label="Email Address"
134+
type="email"
135+
placeholder="you@example.com"
136+
required
137+
/>
138+
<Input
139+
label="Name"
140+
type="text"
141+
placeholder="John Doe"
142+
required
143+
/>
144+
</div>
145+
</DialogContent>
146+
<DialogActions>
147+
<Button onClick={() => setOpenForm(false)}>Cancel</Button>
148+
<Button color="primary" onClick={() => setOpenForm(false)}>
149+
Subscribe
150+
</Button>
151+
</DialogActions>
152+
</Dialog>
153+
</SistentThemeProvider>
154+
</Row>
155+
156+
<br />
157+
<a id="Full Screen Dialog">
158+
<h3>Full-Screen Dialog</h3>
159+
</a>
160+
<p>
161+
Full-screen dialogs provide maximum space for complex content or forms. They're
162+
particularly useful on mobile devices or when extensive user input is required:
163+
</p>
164+
<Row $Hcenter className="image-container">
165+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
166+
<Button onClick={() => setOpenFullScreen(true)}>Open Full-Screen Dialog</Button>
167+
<Dialog
168+
open={openFullScreen}
169+
onClose={() => setOpenFullScreen(false)}
170+
fullScreen
171+
maxWidth="lg"
172+
>
173+
<DialogTitle>Full-Screen Dialog</DialogTitle>
174+
<DialogContent>
175+
<p>
176+
This dialog stretches to full screen. Use it when the user's
177+
full attention is needed for complex tasks or on mobile devices.
178+
</p>
179+
</DialogContent>
180+
<DialogActions>
181+
<Button onClick={() => setOpenFullScreen(false)}>Cancel</Button>
182+
<Button color="primary" onClick={() => setOpenFullScreen(false)}>
183+
Save
184+
</Button>
185+
</DialogActions>
186+
</Dialog>
187+
</SistentThemeProvider>
188+
</Row>
189+
190+
<a id="Best Practices">
191+
<h2>Best Practices</h2>
192+
</a>
193+
<br/>
194+
<h3>When to Use Dialogs</h3>
195+
<p>
196+
Use dialogs for critical user decisions, confirmations, and tasks that require
197+
immediate attention. Avoid overusing dialogs as they can interrupt workflow and
198+
frustrate users if used inappropriately.
199+
</p>
200+
201+
<h3>Content Guidelines</h3>
202+
<p>
203+
Keep dialog content focused and concise. Use clear, action-oriented language
204+
for buttons and provide sufficient context without overwhelming the user.
205+
</p>
206+
207+
<h3>Accessibility</h3>
208+
<p>
209+
Ensure proper focus management, keyboard navigation, and screen reader support.
210+
Always provide clear titles and meaningful action button labels.
211+
</p>
212+
</div>
72213
</div>
73214
</SistentLayout>
74215
);
75216
};
76217

77-
export default DialogGuidance;
218+
export default DialogGuidance;

0 commit comments

Comments
 (0)