Skip to content

ContextualMenu redesign #2155

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
Mil4n0r merged 9 commits into from
Mar 10, 2025
Merged

ContextualMenu redesign #2155

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
cf06110
Reimplementation of the ContextualMenu component with new CSS variables
Feb 7, 2025
20bad76
Fixed gap styles
Feb 7, 2025
dd70b44
Minor fixes to tokens
Feb 25, 2025
f2f1794
Added documentation with the new structure
Feb 25, 2025
a93c0e0
Merge branch 'master' of github.com:dxc-technology/halstack-react int…
Feb 28, 2025
87dbcf1
Added scrollbar mixin
Feb 28, 2025
877dec3
Design fixes, code refactors & more
GomezIvann Mar 4, 2025
44ee986
ItemAction optimization
GomezIvann Mar 4, 2025
d42e82e
Remove empty space
GomezIvann Mar 4, 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/contextual-menu/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 ContextualMenuPageLayout from "screens/components/contextual-menu/ContextualMenuPageLayout";
import ContextualMenuCodePage from "screens/components/contextual-menu/code/ContextualMenuCodePage";

const Code = () => (
<>
<Head>
<title>Contextual Menu Code — Halstack Design System</title>
</Head>
<ContextualMenuCodePage />
</>
);

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

export default Code;
24 changes: 10 additions & 14 deletions apps/website/pages/components/contextual-menu/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import ContextualMenuCodePage from "screens/components/contextual-menu/code/ContextualMenuCodePage";
import ContextualMenuOverviewPage from "screens/components/contextual-menu/overview/ContextualMenuOverviewPage";
import ContextualMenuPageLayout from "screens/components/contextual-menu/ContextualMenuPageLayout";

const Usage = () => {
return (
<>
<Head>
<title>Contextual Menu — Halstack Design System</title>
</Head>
<ContextualMenuCodePage></ContextualMenuCodePage>
</>
);
};
const Usage = () => (
<>
<Head>
<title>Contextual Menu — Halstack Design System</title>
</Head>
<ContextualMenuOverviewPage />
</>
);

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

export default Usage;
21 changes: 0 additions & 21 deletions apps/website/pages/components/contextual-menu/specifications.tsx
View file
Open in desktop

This file was deleted.

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

This file was deleted.

12 changes: 5 additions & 7 deletions apps/website/screens/components/contextual-menu/ContextualMenuPageLayout.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 ContextualMenuPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Code", path: "/components/contextual-menu" },
{ label: "Usage", path: "/components/contextual-menu/usage" },
{ label: "Specifications", path: "/components/contextual-menu/specifications" },
{ label: "Overview", path: "/components/contextual-menu" },
{ label: "Code", path: "/components/contextual-menu/code" },
];

return (
Expand All @@ -17,11 +16,10 @@ const ContextualMenuPageHeading = ({ children }: { children: ReactNode }) => {
<DxcFlex direction="column" gap="2rem">
<ComponentHeading name="Contextual Menu" />
<DxcParagraph>
The Contextual menu is a powerful component that improves user experience by allowing users to navigate
through page-level content or choose from a list of actions while complementing the general disposition of
the main content within the interface.
The Contextual menu provides quick access to navigation or actions related to the current context, enhancing
usability and content organization.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
18 changes: 8 additions & 10 deletions apps/website/screens/components/contextual-menu/code/ContextualMenuCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,15 +86,13 @@ const sections = [
},
];

const ContextualMenuCodePage = () => {
return (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/contextual-menu/code/ContextualMenuCodePage.tsx" />
</DxcFlex>
);
};
const ContextualMenuCodePage = () => (
<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/contextual-menu/code/ContextualMenuCodePage.tsx" />
</DxcFlex>
);

export default ContextualMenuCodePage;
141 changes: 141 additions & 0 deletions apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
import { DxcParagraph, DxcFlex, DxcBulletedList } from "@dxc-technology/halstack-react";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import Image from "@/common/Image";
import anatomy from "./images/contextual-menu_anatomy.png";

const sections = [
{
title: "Introduction",
content: (
<DxcParagraph>
This powerful component improves user experience by allowing users to{" "}
<strong>navigate through page-level content</strong> or choose from a list of actions while complementing the
general disposition of the main content within the interface. It also allows a wide range of possibilities when
it comes to placing content cohesively and comprehensively. To achieve this, it's important to understand how
the items in our contextual menu behave and interact with each other.
</DxcParagraph>
),
},
{
title: "Anatomy",
content: (
<>
<Image src={anatomy} alt="Contextual menu's anatomy" />
<DxcBulletedList type="number">
<DxcBulletedList.Item>
<strong>Section title:</strong> a label that groups related menu items within a contextual menu, enhancing
organization and readability.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Container:</strong> the structural wrapper that holds all menu elements, ensuring proper alignment,
spacing, and visual consistency.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Group item:</strong> they are nests of other group items or individual items that are related to
each other and show indentation as they are unfolded.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Badge:</strong> a small visual indicator, often used to display counts, status updates or categories
within a menu item.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Single item:</strong> an actionable element within the menu that triggers navigation or an operation
when selected.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Expand/collapse Icon:</strong> a visual indicator for nested menus, allowing users to reveal or hide
subitems.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Icon:</strong> a graphical representation within a menu item that aids recognition and reinforces
meaning.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Section:</strong> they are a collection of group and single items within the menu that share a
certain relationship and have a title that describes them.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Divider:</strong> a subtle separator that groups related menu items and improves menu structure.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Scrollbar:</strong> appears when the menu content exceeds the container's height, enabling vertical
navigation.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Contextual menu and Sidenav",
content: (
<>
<DxcParagraph>
Although visually similar, the Sidenav component and the contextual menu differ significantly in
functionality. Our Sidenav is designed to provide a consistent and persistent navigation structure throughout
the application, allowing users to easily switch between different sections or pages within the app.
</DxcParagraph>
<DxcParagraph>
On the other hand, the contextual menu is more{" "}
<strong>context-sensitive, and appears in response to specific user actions</strong>, offering a set of
relevant options or actions that can be performed on the current page. This means that it{" "}
<strong>operates on a page level</strong>, so the component may appear or not depending on the specific needs
and requirements for each screen or interaction.
</DxcParagraph>
</>
),
},
{
title: "Best practices",
content: (
<>
<DxcBulletedList type="number">
<DxcBulletedList.Item>
<strong>Use meaningful icons:</strong> Select icons that accurately represent menu items, ensuring clarity
and intuitive navigation.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Align properly:</strong> position the contextual menu to the left or right, avoiding placement in
the center to prevent obstruction of main content.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Enhance navigation with hierarchy:</strong> structure menu items using different levels to maintain
logical organization.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Use badges for status indication:</strong> incorporate a Badge component to display status updates,
counts or categories for navigable sections.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Default selection:</strong> when pre-selecting an option, try to limit it to the first menu item to
maintain intuitive user interactions.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Avoid deep hierarchies:</strong> limit navigation depth to a maximum of three levels to prevent
excessive indentation and complexity.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Restrict icon usage:</strong> use icons only at the first navigation level to maintain readability
and avoid visual clutter.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Don't overload with icons:</strong> too many icons can create confusion rather than improve
usability. Keep them purposeful and minimal.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
];

const ContextualMenuOverviewPage = () => (
<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/contextual-menu/overview/ContextualMenuOverviewPage.tsx" />
</DxcFlex>
);

export default ContextualMenuOverviewPage;
Binary file added .../screens/components/contextual-menu/overview/images/contextual-menu_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.
Loading