Skip to content

Commit b95d83d

Browse files
vr-varadvr-varad
authored
Merge pull request #6605 from Ayushmore1214/add/dialog-component-v2
[Docs] Add Dialog component with overview, guidance, and code examples
2 parents f427ca9 + af10ec8 commit b95d83d

4 files changed

Lines changed: 308 additions & 0 deletions

File tree

‎src/sections/Projects/Sistent/components/content.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,14 @@ const componentsData = [
126126
url: "/projects/sistent/components/icons",
127127
src: "/icons"
128128
},
129+
{
130+
id: 17,
131+
name: "Dialog",
132+
description: "Dialogs display important prompts or confirmation requests that interrupt user interaction flow.",
133+
url: "/projects/sistent/components/dialog",
134+
src: "/dialog",
135+
},
136+
129137
];
130138

131139
module.exports = { componentsData };

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

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import React, { useState } from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
import {
6+
Dialog,
7+
DialogTitle,
8+
DialogContent,
9+
DialogActions,
10+
Button,
11+
SistentThemeProvider
12+
} from "@sistent/sistent";
13+
14+
import { SistentLayout } from "../../sistent-layout";
15+
import TabButton from "../../../../../reusecore/Button";
16+
import { CodeBlock } from "../button/code-block";
17+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
18+
19+
const dialogCodeExample = `
20+
const [open, setOpen] = useState(false);
21+
22+
const handleOpen = () => setOpen(true);
23+
const handleClose = () => setOpen(false);
24+
25+
<Button onClick={handleOpen}>Open Dialog</Button>
26+
<Dialog open={open} onClose={handleClose}>
27+
<DialogTitle>Dialog Title</DialogTitle>
28+
<DialogContent>This is a dialog example.</DialogContent>
29+
<DialogActions>
30+
<Button onClick={handleClose}>Cancel</Button>
31+
<Button color="primary" onClick={handleClose}>Confirm</Button>
32+
</DialogActions>
33+
</Dialog>
34+
`;
35+
36+
const DialogCode = () => {
37+
const location = useLocation();
38+
const { isDark } = useStyledDarkMode();
39+
const [open, setOpen] = useState(false);
40+
const [openFull, setOpenFull] = useState(false);
41+
const [openForm, setOpenForm] = useState(false);
42+
43+
const handleOpen = () => setOpen(true);
44+
const handleClose = () => setOpen(false);
45+
46+
return (
47+
<SistentLayout title="Dialog Code Examples">
48+
<div className="content">
49+
<a id="Dialog Code">
50+
<h2>Dialog Code Implementation</h2>
51+
</a>
52+
<p>
53+
The code section demonstrates how to use the Dialog component programmatically. We define state variables
54+
to control its visibility and bind open/close handlers to button actions. This is the typical pattern when
55+
using modal components in React applications.
56+
</p>
57+
58+
<div className="filterBtns">
59+
<TabButton
60+
title="Overview"
61+
className={location.pathname === "/projects/sistent/components/dialog" ? "active" : ""}
62+
onClick={() => navigate("/projects/sistent/components/dialog")}
63+
/>
64+
<TabButton
65+
title="Guidance"
66+
className={location.pathname === "/projects/sistent/components/dialog/guidance" ? "active" : ""}
67+
onClick={() => navigate("/projects/sistent/components/dialog/guidance")}
68+
/>
69+
<TabButton
70+
title="Code"
71+
className={location.pathname === "/projects/sistent/components/dialog/code" ? "active" : ""}
72+
onClick={() => navigate("/projects/sistent/components/dialog/code")}
73+
/>
74+
</div>
75+
76+
<div className="main-content">
77+
<p>Here is a live example of the Dialog component in action:</p>
78+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
79+
<Button onClick={handleOpen}>Open Dialog</Button>
80+
<Dialog open={open} onClose={handleClose}>
81+
<DialogTitle>Confirm Action</DialogTitle>
82+
<DialogContent>Do you want to proceed with this action?</DialogContent>
83+
<DialogActions>
84+
<Button onClick={handleClose}>Cancel</Button>
85+
<Button color="primary" onClick={handleClose}>Confirm</Button>
86+
</DialogActions>
87+
</Dialog>
88+
</SistentThemeProvider>
89+
90+
<h3 style={{ marginTop: "2rem" }}>Code Snippet</h3>
91+
<CodeBlock name="dialog-basic" code={dialogCodeExample} />
92+
93+
{/* Full Screen Dialog */}
94+
<h3 style={{ marginTop: "3rem" }}>Full-Screen Dialog Example</h3>
95+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
96+
<Button onClick={() => setOpenFull(true)}>Open Full-Screen Dialog</Button>
97+
<Dialog
98+
open={openFull}
99+
onClose={() => setOpenFull(false)}
100+
style={{ width: "100%", height: "100vh", maxWidth: "none" }}
101+
>
102+
<DialogTitle>Full-Screen Dialog</DialogTitle>
103+
<DialogContent>
104+
<p>This dialog stretches to full screen. Use it when the user's full attention is needed.</p>
105+
</DialogContent>
106+
<DialogActions>
107+
<Button onClick={() => setOpenFull(false)}>Cancel</Button>
108+
<Button color="primary" onClick={() => setOpenFull(false)}>Save</Button>
109+
</DialogActions>
110+
</Dialog>
111+
</SistentThemeProvider>
112+
113+
{/* Form Inside Dialog */}
114+
<h3 style={{ marginTop: "3rem" }}>Dialog with Form Example</h3>
115+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
116+
<Button onClick={() => setOpenForm(true)}>Open Form Dialog</Button>
117+
<Dialog open={openForm} onClose={() => setOpenForm(false)}>
118+
<DialogTitle>Subscribe</DialogTitle>
119+
<DialogContent>
120+
<form style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
121+
<label>
122+
Email Address:
123+
<input type="email" placeholder="you@example.com" style={{ width: "100%", padding: "0.5rem" }} />
124+
</label>
125+
<label>
126+
Name:
127+
<input type="text" placeholder="John Doe" style={{ width: "100%", padding: "0.5rem" }} />
128+
</label>
129+
</form>
130+
</DialogContent>
131+
<DialogActions>
132+
<Button onClick={() => setOpenForm(false)}>Cancel</Button>
133+
<Button color="primary" onClick={() => setOpenForm(false)}>Subscribe</Button>
134+
</DialogActions>
135+
</Dialog>
136+
</SistentThemeProvider>
137+
</div>
138+
</div>
139+
</SistentLayout>
140+
);
141+
};
142+
143+
export default DialogCode;

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
import {
6+
Dialog,
7+
DialogTitle,
8+
DialogContent,
9+
DialogActions,
10+
Button,
11+
SistentThemeProvider
12+
} from "@sistent/sistent";
13+
import { SistentLayout } from "../../sistent-layout";
14+
import TabButton from "../../../../../reusecore/Button";
15+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
16+
import { Row } from "../../../../../reusecore/Layout";
17+
18+
const DialogGuidance = () => {
19+
const location = useLocation();
20+
const { isDark } = useStyledDarkMode();
21+
const [open, setOpen] = React.useState(false);
22+
23+
return (
24+
<SistentLayout title="Dialog Guidance">
25+
<div className="content">
26+
<a id="Functionality">
27+
<h2>Design Guidelines and Best Practices</h2>
28+
</a>
29+
<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:
32+
</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>
58+
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>
72+
</div>
73+
</SistentLayout>
74+
);
75+
};
76+
77+
export default DialogGuidance;

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
import { Dialog, DialogTitle, DialogContent, DialogActions, Button, SistentThemeProvider } from "@sistent/sistent";
6+
import { SistentLayout } from "../../sistent-layout";
7+
import TabButton from "../../../../../reusecore/Button";
8+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
9+
10+
const SistentDialog = () => {
11+
const { isDark } = useStyledDarkMode();
12+
const location = useLocation();
13+
const [open, setOpen] = React.useState(false);
14+
15+
const handleOpen = () => setOpen(true);
16+
const handleClose = () => setOpen(false);
17+
18+
return (
19+
<SistentLayout title="Dialog">
20+
<div className="content">
21+
<a id="Identity">
22+
<h2>Understanding the Dialog Component</h2>
23+
</a>
24+
<p>
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.
29+
</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+
37+
<div className="filterBtns">
38+
<TabButton
39+
title="Overview"
40+
className={location.pathname === "/projects/sistent/components/dialog" ? "active" : ""}
41+
onClick={() => navigate("/projects/sistent/components/dialog")}
42+
/>
43+
<TabButton
44+
title="Guidance"
45+
className={location.pathname === "/projects/sistent/components/dialog/guidance" ? "active" : ""}
46+
onClick={() => navigate("/projects/sistent/components/dialog/guidance")}
47+
/>
48+
<TabButton
49+
title="Code"
50+
className={location.pathname === "/projects/sistent/components/dialog/code" ? "active" : ""}
51+
onClick={() => navigate("/projects/sistent/components/dialog/code")}
52+
/>
53+
</div>
54+
55+
<div className="main-content">
56+
<a id="Basic Usage">
57+
<h3>Basic Example</h3>
58+
</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>
63+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
64+
<Button onClick={handleOpen}>Open Dialog</Button>
65+
<Dialog open={open} onClose={handleClose}>
66+
<DialogTitle>Dialog Title</DialogTitle>
67+
<DialogContent>This is a simple dialog box used for demonstration purposes.</DialogContent>
68+
<DialogActions>
69+
<Button onClick={handleClose}>Cancel</Button>
70+
<Button onClick={handleClose} color="primary">Confirm</Button>
71+
</DialogActions>
72+
</Dialog>
73+
</SistentThemeProvider>
74+
</div>
75+
</div>
76+
</SistentLayout>
77+
);
78+
};
79+
80+
export default SistentDialog;

0 commit comments

Comments
 (0)