Skip to content

[minor] New Popover component #2389

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 8 commits into from
Feb 4, 2026
Merged

[minor] New Popover component #2389

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
dca03f1
Popover component implementation
Jialecl Feb 2, 2026
a95b2a9
Documentation + additional tests
Jialecl Feb 3, 2026
b76e166
Merge branch 'master' into jialecl/popover-component
Jialecl Feb 3, 2026
0b47c24
Fixed accessibility issues
Jialecl Feb 4, 2026
04a9888
Merge branch 'jialecl/popover-component' of https://github.com/dxc-te…
Jialecl Feb 4, 2026
2c4681c
Fixed documentation and other consistency issues
Jialecl Feb 4, 2026
f6cda97
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Feb 4, 2026
f7a986b
Changing toast icon and added one for the popover
Jialecl Feb 4, 2026
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/popover/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 PopoverPageLayout from "screens/components/popover/PopoverPageLayout";
import PopoverCodePage from "screens/components/popover/code/PopoverCodePage";

const Code = () => (
<>
<Head>
<title>Popover code — Halstack Design System</title>
</Head>
<PopoverCodePage />
</>
);

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

export default Code;
17 changes: 17 additions & 0 deletions apps/website/pages/components/popover/index.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 PopoverOverviewPage from "screens/components/popover/overview/PopoverOverviewPage";
import PopoverPageLayout from "screens/components/popover/PopoverPageLayout";

const Index = () => (
<>
<Head>
<title>Popover — Halstack Design System</title>
</Head>
<PopoverOverviewPage />
</>
);

Index.getLayout = (page: ReactElement) => <PopoverPageLayout>{page}</PopoverPageLayout>;

export default Index;
8 changes: 7 additions & 1 deletion apps/website/screens/common/componentsList.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@
"label": "Toast",
"path": "/components/toast",
"status": "stable",
"icon": "chat_bubble"
"icon": "toast"
},
{
"label": "Tooltip",
Expand Down Expand Up @@ -260,6 +260,12 @@
"path": "/components/inset",
"status": "stable",
"icon": "padding"
},
{
"label": "Popover",
"path": "/components/popover",
"status": "experimental",
"icon": "chat_bubble"
}
]
},
Expand Down
30 changes: 30 additions & 0 deletions apps/website/screens/components/popover/PopoverPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
import PageHeading from "@/common/PageHeading";
import TabsPageHeading from "@/common/TabsPageLayout";
import ComponentHeading from "@/common/ComponentHeading";
import { ReactNode } from "react";

const PopoverPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Overview", path: "/components/popover" },
{ label: "Code", path: "/components/popover/code" },
];

return (
<DxcFlex direction="column" gap="var(--spacing-gap-xxl)">
<PageHeading>
<DxcFlex direction="column" gap="var(--spacing-gap-xl)">
<ComponentHeading name="Popover" />
<DxcParagraph>
The popover component shows contextual content anchored to an element. It is used to present additional
information or actions without disrupting the interface.
</DxcParagraph>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
</DxcFlex>
);
};

export default PopoverPageHeading;
145 changes: 145 additions & 0 deletions apps/website/screens/components/popover/code/PopoverCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
import { TableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
import Example from "@/common/example/Example";
import uncontrolled from "./examples/uncontrolled";
import controlled from "./examples/controlled";

const sections = [
{
title: "Props",
content: (
<DxcTable>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>actionToOpen</td>
<td>
<TableCode>'click' | 'hover'</TableCode>
</td>
<td>Action that triggers the popover to open.</td>
<td>
<TableCode>'click'</TableCode>
</td>
</tr>
<tr>
<td>align</td>
<td>
<TableCode>'start' | 'center' | 'end'</TableCode>
</td>
<td>Alignment of the popover relative to the trigger element.</td>
<td>
<TableCode>'center'</TableCode>
</td>
</tr>
<tr>
<td>asChild</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>Set to true if child controls the events. It will render the child directly without wrapping it.</td>
<td>-</td>
</tr>
<tr>
<td>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="required" />
children
</DxcFlex>
</td>
<td>
<TableCode>React.ReactNode</TableCode>
</td>
<td>Element that triggers the popover and works as the anchor.</td>
<td>-</td>
</tr>
<tr>
<td>hasTip</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>Whether the popover should display a tip (arrow).</td>
<td>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>isOpen</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>Controlled open state of the popover. If it is left undefined, it will be uncontrolled.</td>
<td>-</td>
</tr>
<tr>
<td>onClose</td>
<td>
<TableCode>{"() => void"}</TableCode>
</td>
<td>
Callback function when the popover is opened. Used only in controlled mode and if the trigger lacks the
events to manage the controlled behavior.
</td>
<td>-</td>
</tr>
<tr>
<td>onOpen</td>
<td>
<TableCode>{"() => void"}</TableCode>
</td>
<td>Callback function when the popover is closed.</td>
<td>-</td>
</tr>
<tr>
<td>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="required" />
popoverContent
</DxcFlex>
</td>
<td>
<TableCode>React.ReactNode</TableCode>
</td>
<td>Content to be displayed inside the popover.</td>
<td>-</td>
</tr>
<tr>
<td>side</td>
<td>
<TableCode>'top' | 'bottom' | 'left' | 'right'</TableCode>
</td>
<td>Side of the trigger where the popover will appear.</td>
<td>
<TableCode>'bottom'</TableCode>
</td>
</tr>
</tbody>
</DxcTable>
),
},
{
title: "Examples",
subSections: [
{ title: "Uncontrolled Popover", content: <Example example={uncontrolled} defaultIsVisible /> },
{ title: "Controlled Popover", content: <Example example={controlled} defaultIsVisible /> },
],
},
];

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

export default PopoverCodePage;
27 changes: 27 additions & 0 deletions apps/website/screens/components/popover/code/examples/controlled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { DxcContainer, DxcParagraph, DxcPopover } from "@dxc-technology/halstack-react";
import { useState } from "react";

const code = `() => {
const [isOpen, setIsOpen] = useState(false);
return (
<DxcContainer height="100px" padding="var(--spacing-padding-m)" boxSizing="border-box">
<DxcPopover
isOpen={isOpen}
onOpen={() => setIsOpen(true)}
onClose={() => setIsOpen(false)}
popoverContent={<DxcParagraph>Popover content.</DxcParagraph>}
>
<DxcParagraph>Click me to see the popover.</DxcParagraph>
</DxcPopover>
</DxcContainer>
);
}`;

const scope = {
useState,
DxcContainer,
DxcParagraph,
DxcPopover,
};

export default { code, scope };
21 changes: 21 additions & 0 deletions apps/website/screens/components/popover/code/examples/uncontrolled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { DxcContainer, DxcParagraph, DxcPopover } from "@dxc-technology/halstack-react";

const code = `() => {
return (
<DxcContainer height="100px" padding="var(--spacing-padding-m)" boxSizing="border-box">
<DxcPopover
actionToOpen="hover"
popoverContent={<DxcParagraph>Popover content.</DxcParagraph>}>
<DxcParagraph>Hover me to see the popover.</DxcParagraph>
</DxcPopover>
</DxcContainer>
);
}`;

const scope = {
DxcContainer,
DxcParagraph,
DxcPopover,
};

export default { code, scope };
Loading