Skip to content

Commit 9d5d52e

Browse files
Ayushmore1214Ayushmore1214
committed
[Docs] Enhance Dialog Overview, Guidance, and Code sections
Signed-off-by: Ayush More <[email protected]>
1 parent 2dbe72a commit 9d5d52e

3 files changed

Lines changed: 74 additions & 31 deletions

File tree

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

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@ import { CodeBlock } from "../button/code-block";
1717
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
1818

1919
const dialogCodeExample = `
20+
const [open, setOpen] = useState(false);
21+
22+
const handleOpen = () => setOpen(true);
23+
const handleClose = () => setOpen(false);
24+
2025
<Button onClick={handleOpen}>Open Dialog</Button>
2126
<Dialog open={open} onClose={handleClose}>
2227
<DialogTitle>Dialog Title</DialogTitle>
@@ -33,14 +38,19 @@ const DialogCode = () => {
3338
const { isDark } = useStyledDarkMode();
3439
const [open, setOpen] = useState(false);
3540

41+
const handleOpen = () => setOpen(true);
42+
const handleClose = () => setOpen(false);
43+
3644
return (
37-
<SistentLayout title="Dialog Code">
45+
<SistentLayout title="Dialog Code Examples">
3846
<div className="content">
39-
<a id="Identity">
40-
<h2>Dialog</h2>
47+
<a id="Dialog Code">
48+
<h2>Dialog Code Implementation</h2>
4149
</a>
4250
<p>
43-
This section provides code examples and snippets to help you implement Dialogs quickly.
51+
The code section demonstrates how to use the Dialog component programmatically. We define state variables
52+
to control its visibility and bind open/close handlers to button actions. This is the typical pattern when
53+
using modal components in React applications.
4454
</p>
4555

4656
<div className="filterBtns">
@@ -62,23 +72,25 @@ const DialogCode = () => {
6272
</div>
6373

6474
<div className="main-content">
75+
<p>Here is a live example of the Dialog component in action:</p>
6576
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
66-
<Button onClick={() => setOpen(true)}>Launch Dialog</Button>
67-
<Dialog open={open} onClose={() => setOpen(false)}>
68-
<DialogTitle>Sample Dialog</DialogTitle>
69-
<DialogContent>This is the content of the dialog.</DialogContent>
77+
<Button onClick={handleOpen}>Open Dialog</Button>
78+
<Dialog open={open} onClose={handleClose}>
79+
<DialogTitle>Confirm Action</DialogTitle>
80+
<DialogContent>Do you want to proceed with this action?</DialogContent>
7081
<DialogActions>
71-
<Button onClick={() => setOpen(false)}>Cancel</Button>
72-
<Button color="primary" onClick={() => setOpen(false)}>Ok</Button>
82+
<Button onClick={handleClose}>Cancel</Button>
83+
<Button color="primary" onClick={handleClose}>Confirm</Button>
7384
</DialogActions>
7485
</Dialog>
7586
</SistentThemeProvider>
7687

88+
<h3 style={{ marginTop: "2rem" }}>Code Snippet</h3>
7789
<CodeBlock name="dialog-basic" code={dialogCodeExample} />
7890
</div>
7991
</div>
8092
</SistentLayout>
8193
);
8294
};
8395

84-
export default DialogCode;
96+
export default DialogCode;

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

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,47 @@ const DialogGuidance = () => {
2121
const [open, setOpen] = React.useState(false);
2222

2323
return (
24-
<SistentLayout title="Dialog">
24+
<SistentLayout title="Dialog Guidance">
2525
<div className="content">
2626
<a id="Functionality">
27-
<h2>Dialog Functionality</h2>
27+
<h2>Design Guidelines and Best Practices</h2>
2828
</a>
2929
<p>
30-
Dialogs interrupt users with critical information or actions.
31-
Use them for alerts, confirmations, or forms that require immediate attention.
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:
3232
</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+
41+
<div className="filterBtns">
42+
<TabButton
43+
title="Overview"
44+
className={location.pathname === "/projects/sistent/components/dialog" ? "active" : ""}
45+
onClick={() => navigate("/projects/sistent/components/dialog")}
46+
/>
47+
<TabButton
48+
title="Guidance"
49+
className={location.pathname === "/projects/sistent/components/dialog/guidance" ? "active" : ""}
50+
onClick={() => navigate("/projects/sistent/components/dialog/guidance")}
51+
/>
52+
<TabButton
53+
title="Code"
54+
className={location.pathname === "/projects/sistent/components/dialog/code" ? "active" : ""}
55+
onClick={() => navigate("/projects/sistent/components/dialog/code")}
56+
/>
57+
</div>
3358

3459
<Row $Hcenter className="image-container">
3560
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
3661
<Button onClick={() => setOpen(true)}>Open Dialog</Button>
3762
<Dialog open={open} onClose={() => setOpen(false)}>
3863
<DialogTitle>Delete Item</DialogTitle>
39-
<DialogContent>Are you sure you want to delete this item?</DialogContent>
64+
<DialogContent>Are you sure you want to delete this item? This action cannot be undone.</DialogContent>
4065
<DialogActions>
4166
<Button onClick={() => setOpen(false)}>Cancel</Button>
4267
<Button color="secondary" onClick={() => setOpen(false)}>Delete</Button>
@@ -49,4 +74,4 @@ const DialogGuidance = () => {
4974
);
5075
};
5176

52-
export default DialogGuidance;
77+
export default DialogGuidance;

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

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,7 @@ import React from "react";
22
import { navigate } from "gatsby";
33
import { useLocation } from "@reach/router";
44

5-
import {
6-
Dialog,
7-
DialogTitle,
8-
DialogContent,
9-
DialogActions,
10-
Button,
11-
SistentThemeProvider
12-
} from "@sistent/sistent";
5+
import { Dialog, DialogTitle, DialogContent, DialogActions, Button, SistentThemeProvider } from "@sistent/sistent";
136
import { SistentLayout } from "../../sistent-layout";
147
import TabButton from "../../../../../reusecore/Button";
158
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
@@ -26,12 +19,21 @@ const SistentDialog = () => {
2619
<SistentLayout title="Dialog">
2720
<div className="content">
2821
<a id="Identity">
29-
<h2>Dialog</h2>
22+
<h2>Understanding the Dialog Component</h2>
3023
</a>
3124
<p>
32-
The `Dialog` component provides a modal UI that interrupts the user's flow to display important content or interactions.
33-
It's commonly used for confirmations, forms, or alerts.
25+
Dialogs are modal components that appear on top of the main content to convey critical information
26+
or to prompt the user for a decision. They block interaction with the rest of the interface until
27+
dismissed or confirmed. In user interface design, they serve an essential role in making applications
28+
interactive and responsive to user inputs.
3429
</p>
30+
<p>
31+
The Dialog component in the Sistent design system is flexible and customizable, providing developers
32+
with a consistent and accessible modal window to use across various parts of the application. It can be
33+
used for confirmations, forms, alerts, and even feature walkthroughs. Proper use of dialogs ensures that
34+
users are clearly guided in their interactions without overwhelming them.
35+
</p>
36+
3537
<div className="filterBtns">
3638
<TabButton
3739
title="Overview"
@@ -52,13 +54,17 @@ const SistentDialog = () => {
5254

5355
<div className="main-content">
5456
<a id="Basic Usage">
55-
<h3>Basic Usage</h3>
57+
<h3>Basic Example</h3>
5658
</a>
59+
<p>
60+
The following example demonstrates a simple usage of the Dialog component. It includes a button
61+
that, when clicked, triggers a modal containing a title, some content, and two action buttons.
62+
</p>
5763
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
5864
<Button onClick={handleOpen}>Open Dialog</Button>
5965
<Dialog open={open} onClose={handleClose}>
6066
<DialogTitle>Dialog Title</DialogTitle>
61-
<DialogContent>This is a simple dialog box.</DialogContent>
67+
<DialogContent>This is a simple dialog box used for demonstration purposes.</DialogContent>
6268
<DialogActions>
6369
<Button onClick={handleClose}>Cancel</Button>
6470
<Button onClick={handleClose} color="primary">Confirm</Button>
@@ -71,4 +77,4 @@ const SistentDialog = () => {
7177
);
7278
};
7379

74-
export default SistentDialog;
80+
export default SistentDialog;

0 commit comments

Comments
 (0)