Skip to content

Dialog redesign #2159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
GomezIvann merged 9 commits into from
Mar 13, 2025
Merged

Dialog redesign #2159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c048016
Reimplementation of the Dialog component with new CSS variables
Feb 11, 2025
49c9894
Added documentation with the new structure
Feb 18, 2025
d698c0e
Fixed layout text
Feb 18, 2025
c48377a
Minor fixes from review
Mar 10, 2025
e022535
Fixing overview page
Mar 10, 2025
eba9dc1
Removed return statement
Mar 13, 2025
ad74e4b
Removed opinionated stories
Mar 13, 2025
78f3149
Removed opinionated stories
Mar 13, 2025
5a36ec6
Merge branch 'master' into Mil4n0r/tokens-dialog
Mil4n0r Mar 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions apps/website/pages/components/dialog/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import DialogPageLayout from "screens/components/dialog/DialogPageLayout";
import DialogCodePage from "screens/components/dialog/code/DialogCodePage";

const Code = () => (
<>
<Head>
<title>Dialog Code — Halstack Design System</title>
</Head>
<DialogCodePage />
</>
);

Code.getLayout = (page: ReactElement) => <DialogPageLayout>{page}</DialogPageLayout>;

export default Code;
8 changes: 3 additions & 5 deletions apps/website/pages/components/dialog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
import Head from "next/head";
import type { ReactElement } from "react";
import DialogPageLayout from "screens/components/dialog/DialogPageLayout";
import DialogCodePage from "screens/components/dialog/code/DialogCodePage";
import DialogOverviewPage from "screens/components/dialog/overview/DialogOverviewPage";

const Index = () => {
return (
<>
<Head>
<title>Dialog — Halstack Design System</title>
</Head>
<DialogCodePage></DialogCodePage>
<DialogOverviewPage />
</>
);
};

Index.getLayout = function getLayout(page: ReactElement) {
return <DialogPageLayout>{page}</DialogPageLayout>;
};
Index.getLayout = (page: ReactElement) => <DialogPageLayout>{page}</DialogPageLayout>;

export default Index;
21 changes: 0 additions & 21 deletions apps/website/pages/components/dialog/specifications.tsx
View file
Open in desktop

This file was deleted.

21 changes: 0 additions & 21 deletions apps/website/pages/components/dialog/usage.tsx
View file
Open in desktop

This file was deleted.

10 changes: 4 additions & 6 deletions apps/website/screens/components/dialog/DialogPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@ import { ReactNode } from "react";

const DialogPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Code", path: "/components/dialog" },
{ label: "Usage", path: "/components/dialog/usage" },
{ label: "Specifications", path: "/components/dialog/specifications" },
{ label: "Overview", path: "/components/dialog" },
{ label: "Code", path: "/components/dialog/code" },
];

return (
Expand All @@ -18,10 +17,9 @@ const DialogPageHeading = ({ children }: { children: ReactNode }) => {
<ComponentHeading name="Dialog" />
<DxcParagraph>
A modal dialog is a message box or child window that requires user interaction before returning to the
parent window. These boxes appear on top of the open parent window that is currently displayed on the
screen.
parent window.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
44 changes: 22 additions & 22 deletions apps/website/screens/components/dialog/code/DialogCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,23 @@ const sections = [
</tr>
</thead>
<tbody>
<tr>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
children
</DxcFlex>
</td>
<td>
<TableCode>React.ReactNode</TableCode>
</td>
<td>
Area within the dialog that can be used to render custom content. We strongly encourage users to not
change the <Code>tabindex</Code> of the inner components or elements. This can lead to unpredictable
behaviour for keyboard users, affecting the order of focus and focus locking within the dialog.
</td>
<td>-</td>
</tr>
<tr>
<td>closable</td>
<td>
Expand All @@ -35,23 +52,23 @@ const sections = [
</td>
</tr>
<tr>
<td>onCloseClick</td>
<td>onBackgroundClick</td>
<td>
<TableCode>{"() => void"}</TableCode>
</td>
<td>
This function will be called when the user clicks the close button. The responsibility of hiding the
This function will be called when the user clicks on the background of the modal. The responsibility of hiding the
dialog lies with the user.
</td>
<td>-</td>
</tr>
<tr>
<td>onBackgroundClick</td>
<td>onCloseClick</td>
<td>
<TableCode>{"() => void"}</TableCode>
</td>
<td>
This function will be called when the on the background of the modal. The responsibility of hiding the
This function will be called when the user clicks the close button. The responsibility of hiding the
dialog lies with the user.
</td>
<td>-</td>
Expand All @@ -66,23 +83,6 @@ const sections = [
<TableCode>true</TableCode>
</td>
</tr>
<tr>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
children
</DxcFlex>
</td>
<td>
<TableCode>React.ReactNode</TableCode>
</td>
<td>
Area within the dialog that can be used to render custom content. We strongly encourage users to not
change the <Code>tabindex</Code> of the inner components or elements. This can lead to unpredictable
behaviour for keyboard users, affecting the order of focus and focus locking within the dialog.
</td>
<td>-</td>
</tr>
<tr>
<td>tabIndex</td>
<td>
Expand Down Expand Up @@ -135,7 +135,7 @@ const DialogCodePage = () => {
return (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
<QuickNavContainer sections={sections} startHeadingLevel={2} />
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/dialog/code/DialogCodePage.tsx" />
</DxcFlex>
Expand Down
151 changes: 151 additions & 0 deletions apps/website/screens/components/dialog/overview/DialogOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import DocFooter from "@/common/DocFooter";
import Figure from "@/common/Figure";
import Image from "@/common/Image";
import content from "./images/dialog_content.png";
import overlay from "./images/dialog_overlay.png";
import anatomy from "./images/dialog_anatomy.png";

const sections = [
{
title: "Introduction",
content: (
<DxcParagraph>
The <strong>dialog</strong> component is a modal window that{" "}
<strong>captures user attention for critical interactions</strong>, such as confirmations, alerts, or form
inputs. It appears above the main content and requires user action before continuing. To maintain usability,
dialogs should be concise, focused on a single task, and provide clear actions like confirmation or dismissal.
</DxcParagraph>
),
},
{
title: "Anatomy",
content: (
<>
<Image src={anatomy} alt="Dialog's anatomy" />
<DxcBulletedList type="number">
<DxcBulletedList.Item>
<strong>Title:</strong> displays the main heading of the dialog, providing users with a clear and immediate
understanding of its purpose
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Container:</strong> the structural wrapper that holds all dialog elements, ensuring proper
alignment, spacing, and responsiveness.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Close action:</strong> an optional button, usually represented by an “X” icon, allowing users to
dismiss the dialog without completing an action.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Content:</strong> the main area where relevant information, messages, or interactive elements (e.g.,
forms) are displayed.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Actions:</strong> a set of buttons at the bottom of the dialog that guide users toward completing or
canceling the intended action.
</DxcBulletedList.Item>
</DxcBulletedList>
<DxcParagraph>
<em>
* Please note that while these elements are not included by default in the component's configuration, they
are the expected components in a dialog.
</em>
</DxcParagraph>
</>
),
},
{
title: "Placing content in a dialog",
content: (
<>
<Figure caption="Example of a form inside of a Halstack dialog">
<Image src={content} alt="Example of a form inside of a Halstack dialog" />
</Figure>
<DxcParagraph>
Any content (Halstack components or custom) can be placed inside the dialog component. Dialog tasks should be
direct and easy to complete. However, to ensure that the component is used as intended and to prevent it from
becoming unusable, please consider the following aspects:
</DxcParagraph>
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Avoid placing complex or large amounts of data</strong>, as it will increase the cognitive load and
users will struggle when processing information.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
As much as possible, <strong>avoid scrolling in a dialog</strong>, as it disrupts focus and usability,
especially for modal interactions that require immediate attention. It can also make critical actions harder
to access, forcing users to scroll to find the key information or buttons. Instead, keep dialogs concise or
consider alternative patterns to display the information.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Overlay in dialogs",
content: (
<>
<DxcParagraph>
The <strong>overlay</strong> element helps focus the user's attention on the dialog by creating a
semi-transparent layer between the main application and the modal content. This visual separation reduces
distractions, ensures the dialog stands out, and reinforces the need for user action before returning to the
underlying interface. Additionally, it enhances accessibility by preventing unintended interactions with
background elements.
</DxcParagraph>
<Figure caption="Example of the overlay usage in a dialog">
<Image src={overlay} alt="Example of the overlay usage in a dialog" />
</Figure>
</>
),
},
{
title: "Best practices",
content: (
<>
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Use dialogs for critical interactions:</strong> reserve dialogs for important decisions that require
user confirmation or input.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Ensure clarity:</strong> titles and messages should be direct, with clear descriptions of the
action's consequences.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Provide easy dismissal:</strong> always include a way to close the dialog, whether through a cancel
button or a close icon.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Maintain focus:</strong> keep the user's attention within the dialog by managing focus and
preventing background interactions.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Provide clear actions:</strong> use distinct primary and secondary buttons for confirmation and
cancellation.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Keep it focused:</strong> dialogs should be concise and address a single task to avoid overwhelming
users.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Avoid scrolling:</strong> keep content brief to prevent excessive scrolling; use alternative
patterns for complex interactions.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
];

const DialogOverviewPage = () => (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2} />
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/dialog/overview/DialogOverviewPage.tsx" />
</DxcFlex>
);

export default DialogOverviewPage;
Binary file added apps/website/screens/components/dialog/overview/images/dialog_anatomy.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/website/screens/components/dialog/overview/images/dialog_content.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/website/screens/components/dialog/overview/images/dialog_overlay.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading