Skip to content

Commit cf4ed97

Browse files
GomezIvannGomezIvann
authored
Merge pull request #2159 from dxc-technology/Mil4n0r/tokens-dialog
Dialog redesign
2 parents 9721f4f + 5a36ec6 commit cf4ed97

File tree

18 files changed

+211
-572
lines changed

18 files changed

+211
-572
lines changed

‎apps/website/pages/components/dialog/code.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Head from "next/head";
2+
import type { ReactElement } from "react";
3+
import DialogPageLayout from "screens/components/dialog/DialogPageLayout";
4+
import DialogCodePage from "screens/components/dialog/code/DialogCodePage";
5+
6+
const Code = () => (
7+
<>
8+
<Head>
9+
<title>Dialog Code — Halstack Design System</title>
10+
</Head>
11+
<DialogCodePage />
12+
</>
13+
);
14+
15+
Code.getLayout = (page: ReactElement) => <DialogPageLayout>{page}</DialogPageLayout>;
16+
17+
export default Code;

‎apps/website/pages/components/dialog/index.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
import Head from "next/head";
22
import type { ReactElement } from "react";
33
import DialogPageLayout from "screens/components/dialog/DialogPageLayout";
4-
import DialogCodePage from "screens/components/dialog/code/DialogCodePage";
4+
import DialogOverviewPage from "screens/components/dialog/overview/DialogOverviewPage";
55

66
const Index = () => {
77
return (
88
<>
99
<Head>
1010
<title>Dialog — Halstack Design System</title>
1111
</Head>
12-
<DialogCodePage></DialogCodePage>
12+
<DialogOverviewPage />
1313
</>
1414
);
1515
};
1616

17-
Index.getLayout = function getLayout(page: ReactElement) {
18-
return <DialogPageLayout>{page}</DialogPageLayout>;
19-
};
17+
Index.getLayout = (page: ReactElement) => <DialogPageLayout>{page}</DialogPageLayout>;
2018

2119
export default Index;

‎apps/website/pages/components/dialog/specifications.tsx

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎apps/website/pages/components/dialog/usage.tsx

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎apps/website/screens/components/dialog/DialogPageLayout.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@ import { ReactNode } from "react";
66

77
const DialogPageHeading = ({ children }: { children: ReactNode }) => {
88
const tabs = [
9-
{ label: "Code", path: "/components/dialog" },
10-
{ label: "Usage", path: "/components/dialog/usage" },
11-
{ label: "Specifications", path: "/components/dialog/specifications" },
9+
{ label: "Overview", path: "/components/dialog" },
10+
{ label: "Code", path: "/components/dialog/code" },
1211
];
1312

1413
return (
@@ -18,10 +17,9 @@ const DialogPageHeading = ({ children }: { children: ReactNode }) => {
1817
<ComponentHeading name="Dialog" />
1918
<DxcParagraph>
2019
A modal dialog is a message box or child window that requires user interaction before returning to the
21-
parent window. These boxes appear on top of the open parent window that is currently displayed on the
22-
screen.
20+
parent window.
2321
</DxcParagraph>
24-
<TabsPageHeading tabs={tabs}></TabsPageHeading>
22+
<TabsPageHeading tabs={tabs} />
2523
</DxcFlex>
2624
</PageHeading>
2725
{children}

‎apps/website/screens/components/dialog/code/DialogCodePage.tsx

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,23 @@ const sections = [
2424
</tr>
2525
</thead>
2626
<tbody>
27+
<tr>
28+
<td>
29+
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
30+
<StatusBadge status="required" />
31+
children
32+
</DxcFlex>
33+
</td>
34+
<td>
35+
<TableCode>React.ReactNode</TableCode>
36+
</td>
37+
<td>
38+
Area within the dialog that can be used to render custom content. We strongly encourage users to not
39+
change the <Code>tabindex</Code> of the inner components or elements. This can lead to unpredictable
40+
behaviour for keyboard users, affecting the order of focus and focus locking within the dialog.
41+
</td>
42+
<td>-</td>
43+
</tr>
2744
<tr>
2845
<td>closable</td>
2946
<td>
@@ -35,23 +52,23 @@ const sections = [
3552
</td>
3653
</tr>
3754
<tr>
38-
<td>onCloseClick</td>
55+
<td>onBackgroundClick</td>
3956
<td>
4057
<TableCode>{"() => void"}</TableCode>
4158
</td>
4259
<td>
43-
This function will be called when the user clicks the close button. The responsibility of hiding the
60+
This function will be called when the user clicks on the background of the modal. The responsibility of hiding the
4461
dialog lies with the user.
4562
</td>
4663
<td>-</td>
4764
</tr>
4865
<tr>
49-
<td>onBackgroundClick</td>
66+
<td>onCloseClick</td>
5067
<td>
5168
<TableCode>{"() => void"}</TableCode>
5269
</td>
5370
<td>
54-
This function will be called when the on the background of the modal. The responsibility of hiding the
71+
This function will be called when the user clicks the close button. The responsibility of hiding the
5572
dialog lies with the user.
5673
</td>
5774
<td>-</td>
@@ -66,23 +83,6 @@ const sections = [
6683
<TableCode>true</TableCode>
6784
</td>
6885
</tr>
69-
<tr>
70-
<td>
71-
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
72-
<StatusBadge status="required" />
73-
children
74-
</DxcFlex>
75-
</td>
76-
<td>
77-
<TableCode>React.ReactNode</TableCode>
78-
</td>
79-
<td>
80-
Area within the dialog that can be used to render custom content. We strongly encourage users to not
81-
change the <Code>tabindex</Code> of the inner components or elements. This can lead to unpredictable
82-
behaviour for keyboard users, affecting the order of focus and focus locking within the dialog.
83-
</td>
84-
<td>-</td>
85-
</tr>
8686
<tr>
8787
<td>tabIndex</td>
8888
<td>
@@ -135,7 +135,7 @@ const DialogCodePage = () => {
135135
return (
136136
<DxcFlex direction="column" gap="4rem">
137137
<QuickNavContainerLayout>
138-
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
138+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
139139
</QuickNavContainerLayout>
140140
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/dialog/code/DialogCodePage.tsx" />
141141
</DxcFlex>

‎apps/website/screens/components/dialog/overview/DialogOverviewPage.tsx

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
2+
import QuickNavContainer from "@/common/QuickNavContainer";
3+
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
4+
import DocFooter from "@/common/DocFooter";
5+
import Figure from "@/common/Figure";
6+
import Image from "@/common/Image";
7+
import content from "./images/dialog_content.png";
8+
import overlay from "./images/dialog_overlay.png";
9+
import anatomy from "./images/dialog_anatomy.png";
10+
11+
const sections = [
12+
{
13+
title: "Introduction",
14+
content: (
15+
<DxcParagraph>
16+
The <strong>dialog</strong> component is a modal window that{" "}
17+
<strong>captures user attention for critical interactions</strong>, such as confirmations, alerts, or form
18+
inputs. It appears above the main content and requires user action before continuing. To maintain usability,
19+
dialogs should be concise, focused on a single task, and provide clear actions like confirmation or dismissal.
20+
</DxcParagraph>
21+
),
22+
},
23+
{
24+
title: "Anatomy",
25+
content: (
26+
<>
27+
<Image src={anatomy} alt="Dialog's anatomy" />
28+
<DxcBulletedList type="number">
29+
<DxcBulletedList.Item>
30+
<strong>Title:</strong> displays the main heading of the dialog, providing users with a clear and immediate
31+
understanding of its purpose
32+
</DxcBulletedList.Item>
33+
<DxcBulletedList.Item>
34+
<strong>Container:</strong> the structural wrapper that holds all dialog elements, ensuring proper
35+
alignment, spacing, and responsiveness.
36+
</DxcBulletedList.Item>
37+
<DxcBulletedList.Item>
38+
<strong>Close action:</strong> an optional button, usually represented by an “X” icon, allowing users to
39+
dismiss the dialog without completing an action.
40+
</DxcBulletedList.Item>
41+
<DxcBulletedList.Item>
42+
<strong>Content:</strong> the main area where relevant information, messages, or interactive elements (e.g.,
43+
forms) are displayed.
44+
</DxcBulletedList.Item>
45+
<DxcBulletedList.Item>
46+
<strong>Actions:</strong> a set of buttons at the bottom of the dialog that guide users toward completing or
47+
canceling the intended action.
48+
</DxcBulletedList.Item>
49+
</DxcBulletedList>
50+
<DxcParagraph>
51+
<em>
52+
* Please note that while these elements are not included by default in the component's configuration, they
53+
are the expected components in a dialog.
54+
</em>
55+
</DxcParagraph>
56+
</>
57+
),
58+
},
59+
{
60+
title: "Placing content in a dialog",
61+
content: (
62+
<>
63+
<Figure caption="Example of a form inside of a Halstack dialog">
64+
<Image src={content} alt="Example of a form inside of a Halstack dialog" />
65+
</Figure>
66+
<DxcParagraph>
67+
Any content (Halstack components or custom) can be placed inside the dialog component. Dialog tasks should be
68+
direct and easy to complete. However, to ensure that the component is used as intended and to prevent it from
69+
becoming unusable, please consider the following aspects:
70+
</DxcParagraph>
71+
<DxcBulletedList>
72+
<DxcBulletedList.Item>
73+
<strong>Avoid placing complex or large amounts of data</strong>, as it will increase the cognitive load and
74+
users will struggle when processing information.
75+
</DxcBulletedList.Item>
76+
<DxcBulletedList.Item>
77+
As much as possible, <strong>avoid scrolling in a dialog</strong>, as it disrupts focus and usability,
78+
especially for modal interactions that require immediate attention. It can also make critical actions harder
79+
to access, forcing users to scroll to find the key information or buttons. Instead, keep dialogs concise or
80+
consider alternative patterns to display the information.
81+
</DxcBulletedList.Item>
82+
</DxcBulletedList>
83+
</>
84+
),
85+
},
86+
{
87+
title: "Overlay in dialogs",
88+
content: (
89+
<>
90+
<DxcParagraph>
91+
The <strong>overlay</strong> element helps focus the user's attention on the dialog by creating a
92+
semi-transparent layer between the main application and the modal content. This visual separation reduces
93+
distractions, ensures the dialog stands out, and reinforces the need for user action before returning to the
94+
underlying interface. Additionally, it enhances accessibility by preventing unintended interactions with
95+
background elements.
96+
</DxcParagraph>
97+
<Figure caption="Example of the overlay usage in a dialog">
98+
<Image src={overlay} alt="Example of the overlay usage in a dialog" />
99+
</Figure>
100+
</>
101+
),
102+
},
103+
{
104+
title: "Best practices",
105+
content: (
106+
<>
107+
<DxcBulletedList>
108+
<DxcBulletedList.Item>
109+
<strong>Use dialogs for critical interactions:</strong> reserve dialogs for important decisions that require
110+
user confirmation or input.
111+
</DxcBulletedList.Item>
112+
<DxcBulletedList.Item>
113+
<strong>Ensure clarity:</strong> titles and messages should be direct, with clear descriptions of the
114+
action's consequences.
115+
</DxcBulletedList.Item>
116+
<DxcBulletedList.Item>
117+
<strong>Provide easy dismissal:</strong> always include a way to close the dialog, whether through a cancel
118+
button or a close icon.
119+
</DxcBulletedList.Item>
120+
<DxcBulletedList.Item>
121+
<strong>Maintain focus:</strong> keep the user's attention within the dialog by managing focus and
122+
preventing background interactions.
123+
</DxcBulletedList.Item>
124+
<DxcBulletedList.Item>
125+
<strong>Provide clear actions:</strong> use distinct primary and secondary buttons for confirmation and
126+
cancellation.
127+
</DxcBulletedList.Item>
128+
<DxcBulletedList.Item>
129+
<strong>Keep it focused:</strong> dialogs should be concise and address a single task to avoid overwhelming
130+
users.
131+
</DxcBulletedList.Item>
132+
<DxcBulletedList.Item>
133+
<strong>Avoid scrolling:</strong> keep content brief to prevent excessive scrolling; use alternative
134+
patterns for complex interactions.
135+
</DxcBulletedList.Item>
136+
</DxcBulletedList>
137+
</>
138+
),
139+
},
140+
];
141+
142+
const DialogOverviewPage = () => (
143+
<DxcFlex direction="column" gap="4rem">
144+
<QuickNavContainerLayout>
145+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
146+
</QuickNavContainerLayout>
147+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/dialog/overview/DialogOverviewPage.tsx" />
148+
</DxcFlex>
149+
);
150+
151+
export default DialogOverviewPage;

‎apps/website/screens/components/dialog/overview/images/dialog_anatomy.png

52.8 KB
Loading

‎apps/website/screens/components/dialog/overview/images/dialog_content.png

32 KB
Loading

‎apps/website/screens/components/dialog/overview/images/dialog_overlay.png

43.4 KB
Loading

0 commit comments

Comments
 (0)