Skip to content

fix(pds-popover): convert to slot for trigger and portal rendering #574

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
pixelflips merged 10 commits into from
Nov 7, 2025
Merged

fix(pds-popover): convert to slot for trigger and portal rendering #574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4594d74
fix(popover): implement portal-based rendering for correct positioning
pixelflips Nov 5, 2025
ef0ec52
test(popover): update tests for portal implementation
pixelflips Nov 5, 2025
5ba8af2
docs(popover): add rich content story with Pine components
pixelflips Nov 5, 2025
ad301ca
chore(core): update auto-generated type definitions
pixelflips Nov 5, 2025
10a41e1
test(popover): fix test issues and remove problematic timer tests
pixelflips Nov 5, 2025
4a825df
test(popover): fix fallback trigger initialization test
pixelflips Nov 5, 2025
2b8cea6
fix(popover): sync portal content on slot changes while active
pixelflips Nov 6, 2025
7808e41
fix(popover): make story controls work for Toggle and WithContent
pixelflips Nov 6, 2025
ea91156
fix(popover): add missing semicolon for consistency
pixelflips Nov 6, 2025
f071ed6
test(popover): add afterEach cleanup to prevent portal pollution
pixelflips Nov 6, 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
8 changes: 0 additions & 8 deletions libs/core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1333,10 +1333,6 @@ export namespace Components {
* Opens the popover programmatically
*/
"show": () => Promise<void>;
/**
* Text that appears on the trigger element
*/
"text": string;
/**
* Toggles the popover open/closed state programmatically
*/
Expand Down Expand Up @@ -3999,10 +3995,6 @@ declare namespace LocalJSX {
* @default 'auto'
*/
"popoverType"?: 'auto' | 'manual';
/**
* Text that appears on the trigger element
*/
"text"?: string;
}
interface PdsProgress {
/**
Expand Down
132 changes: 108 additions & 24 deletions libs/core/src/components/pds-popover/docs/pds-popover.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,84 @@ Popovers display contextual information when users click or initiates a keyboard

<DocArgsTable componentName="pds-popover" docSource={components} />

## Usage

### Trigger Slot

Use the `trigger` slot to provide the element that will open the popover. You can use any Pine component - buttons, chips, avatars, or other interactive elements.

<DocCanvas client:only
mdxSource={{
react: `
<PdsBox display="flex" gap="md" align-items="center" flex-wrap="wrap">
<PdsPopover componentId="button-trigger" placement="bottom-start" popoverTargetAction="toggle">
<PdsButton slot="trigger">Button Trigger</PdsButton>
<p>Popover content is displayed here</p>
</PdsPopover>

<PdsPopover componentId="icon-trigger" placement="bottom-start" popoverTargetAction="toggle">
<PdsButton slot="trigger" variant="secondary" iconOnly icon="info-circle" ariaLabel="Information" />
<p>Popover content is displayed here</p>
</PdsPopover>

<PdsPopover componentId="chip-trigger" placement="bottom-start" popoverTargetAction="toggle">
<PdsChip slot="trigger" variant="dropdown">Chip Trigger</PdsChip>
<p>Popover content is displayed here</p>
</PdsPopover>

<PdsPopover componentId="avatar-trigger" placement="bottom-start" popoverTargetAction="toggle">
<PdsAvatar slot="trigger" name="John Doe" size="md" dropdown={true} />
<p>Popover content is displayed here</p>
</PdsPopover>
</PdsBox>
`,
webComponent: `
<pds-box display="flex" gap="md" align-items="center" flex-wrap="wrap">
<pds-popover component-id="button-trigger" placement="bottom-start" popover-target-action="toggle">
<pds-button slot="trigger">Button Trigger</pds-button>
<p>Popover content is displayed here</p>
</pds-popover>

<pds-popover component-id="icon-trigger" placement="bottom-start" popover-target-action="toggle">
<pds-button slot="trigger" variant="secondary" icon-only icon="info-circle" aria-label="Information"></pds-button>
<p>Popover content is displayed here</p>
</pds-popover>

<pds-popover component-id="chip-trigger" placement="bottom-start" popover-target-action="toggle">
<pds-chip slot="trigger" variant="dropdown">Chip Trigger</pds-chip>
<p>Popover content is displayed here</p>
</pds-popover>

<pds-popover component-id="avatar-trigger" placement="bottom-start" popover-target-action="toggle">
<pds-avatar slot="trigger" name="John Doe" size="md" dropdown="true"></pds-avatar>
<p>Popover content is displayed here</p>
</pds-popover>
</pds-box>
`
}}>
<pds-box display="flex" gap="md" align-items="center" flex-wrap="wrap">
<pds-popover component-id="button-trigger" placement="bottom-start" popover-target-action="toggle">
<pds-button slot="trigger">Button Trigger</pds-button>
<p>Popover content is displayed here</p>
</pds-popover>

<pds-popover component-id="icon-trigger" placement="bottom-start" popover-target-action="toggle">
<pds-button slot="trigger" variant="secondary" icon-only icon="info-circle" aria-label="Information"></pds-button>
<p>Popover content is displayed here</p>
</pds-popover>

<pds-popover component-id="chip-trigger" placement="bottom-start" popover-target-action="toggle">
<pds-chip slot="trigger" variant="dropdown">Chip Trigger</pds-chip>
<p>Popover content is displayed here</p>
</pds-popover>

<pds-popover component-id="avatar-trigger" placement="bottom-start" popover-target-action="toggle">
<pds-avatar slot="trigger" name="John Doe" size="md" dropdown="true"></pds-avatar>
<p>Popover content is displayed here</p>
</pds-popover>
</pds-box>
</DocCanvas>

### Behavior Types

#### Auto (Default)
Expand All @@ -31,17 +109,20 @@ Closes automatically when clicking outside the popover content. Can also be clos
<DocCanvas client:only
mdxSource={{
react: `
<PdsPopover componentId="auto" text="Auto Popover">
<PdsPopover componentId="auto" placement="bottom-start">
<PdsButton slot="trigger">Auto Popover</PdsButton>
<p>Clicks outside will close this popover</p>
</PdsPopover>
`,
webComponent: `
<pds-popover component-id="auto" text="Auto Popover">
<pds-popover component-id="auto" placement="bottom-start">
<pds-button slot="trigger">Auto Popover</pds-button>
<p>Clicks outside will close this popover</p>
</pds-popover>
`
}}>
<pds-popover component-id="auto" text="Auto Popover">
<pds-popover component-id="auto" placement="bottom-start">
<pds-button slot="trigger">Auto Popover</pds-button>
<p>Clicks outside will close this popover</p>
</pds-popover>
</DocCanvas>
Expand All @@ -62,17 +143,20 @@ Learn more about popover target actions in the [MDN Documentation](https://devel
<DocCanvas client:only
mdxSource={{
react: `
<PdsPopover componentId="manual" text="Manual Popover" popoverTargetAction="toggle" popoverType="manual">
<PdsPopover componentId="manual" placement="bottom-start" popoverTargetAction="toggle" popoverType="manual">
<PdsButton slot="trigger">Manual Popover</PdsButton>
<p>This popover requires explicit closing</p>
</PdsPopover>
`,
webComponent: `
<pds-popover component-id="manual" text="Manual Popover" popover-target-action="toggle" popover-type="manual">
<pds-popover component-id="manual" placement="bottom-start" popover-target-action="toggle" popover-type="manual">
<pds-button slot="trigger">Manual Popover</pds-button>
<p>This popover requires explicit closing</p>
</pds-popover>
`
}}>
<pds-popover component-id="manual" text="Manual Popover" popover-target-action="toggle" popover-type="manual">
<pds-popover component-id="manual" placement="bottom-start" popover-target-action="toggle" popover-type="manual">
<pds-button slot="trigger">Manual Popover</pds-button>
<p>This popover requires explicit closing</p>
</pds-popover>
</DocCanvas>
Expand All @@ -88,17 +172,20 @@ Shows the popover when triggered. Clicking the popover trigger while open will n
<DocCanvas client:only
mdxSource={{
react: `
<PdsPopover componentId="show" text="Show Action">
<PdsPopover componentId="show" placement="bottom-start">
<PdsButton slot="trigger">Show Action</PdsButton>
<p>This popover uses the show action</p>
</PdsPopover>
`,
webComponent: `
<pds-popover component-id="show" text="Show Action">
<pds-popover component-id="show" placement="bottom-start">
<pds-button slot="trigger">Show Action</pds-button>
<p>This popover uses the show action</p>
</pds-popover>
`
}}>
<pds-popover component-id="show" text="Show Action">
<pds-popover component-id="show" placement="bottom-start">
<pds-button slot="trigger">Show Action</pds-button>
<p>This popover uses the show action</p>
</pds-popover>
</DocCanvas>
Expand All @@ -110,17 +197,20 @@ Toggles the popover visibility state when triggered. Clicking the popover trigge
<DocCanvas client:only
mdxSource={{
react: `
<PdsPopover componentId="toggle" text="Toggle Action" popoverTargetAction="toggle">
<PdsPopover componentId="toggle" placement="bottom-start" popoverTargetAction="toggle">
<PdsButton slot="trigger">Toggle Action</PdsButton>
<p>This popover uses the toggle action</p>
</PdsPopover>
`,
webComponent: `
<pds-popover component-id="toggle" text="Toggle Action" popover-target-action="toggle">
<pds-popover component-id="toggle" placement="bottom-start" popover-target-action="toggle">
<pds-button slot="trigger">Toggle Action</pds-button>
<p>This popover uses the toggle action</p>
</pds-popover>
`
}}>
<pds-popover component-id="toggle" text="Toggle Action" popover-target-action="toggle">
<pds-popover component-id="toggle" placement="bottom-start" popover-target-action="toggle">
<pds-button slot="trigger">Toggle Action</pds-button>
<p>This popover uses the toggle action</p>
</pds-popover>
</DocCanvas>
Expand All @@ -132,26 +222,20 @@ The `max-width` prop allows adjusting the maximum width of the popover content.
<DocCanvas client:only
mdxSource={{
react: `
<PdsPopover componentId="wide" text="Wide Popover" maxWidth="520px">
<PdsPopover componentId="wide" placement="bottom-start" maxWidth="520px">
<PdsButton slot="trigger">Wide Popover</PdsButton>
<p>This is a wider popover with more content space available.</p>
</PdsPopover>
`,
webComponent: `
<pds-popover component-id="wide" text="Wide Popover" max-width="520px">
<pds-popover component-id="wide" placement="bottom-start" max-width="520px">
<pds-button slot="trigger">Wide Popover</pds-button>
<p>This is a wider popover with more content space available.</p>
</pds-popover>
`
}}>
<pds-popover component-id="wide" text="Wide Popover" max-width="520px">
<pds-popover component-id="wide" placement="bottom-start" max-width="520px">
<pds-button slot="trigger">Wide Popover</pds-button>
<p>This is a wider popover with more content space available.</p>
</pds-popover>
</DocCanvas>


## Additional Resources

[Mdn Web Docs: Popover Attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/popover)

[MDN Web Docs: Popover Api](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)

[MDN: Using the Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using)
42 changes: 6 additions & 36 deletions libs/core/src/components/pds-popover/pds-popover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,43 +3,13 @@

display: inline-block;

[popover] {
background-color: var(--pine-color-background-container);
border: var(--pine-border);
border-radius: var(--pine-dimension-125);
box-shadow: var(--pine-box-shadow-200);
margin: var(--pine-dimension-none);
max-width: var(--sizing-max-width-default);
padding: var(--pine-dimension-md);
position: fixed;

// Hide popover initially to prevent flash before positioning
// stylelint-disable-next-line selector-pseudo-class-no-unknown
&:popover-open:not(.pds-popover--positioned) {
visibility: hidden;
}
// Trigger wrapper for slotted content
.pds-popover__trigger-wrapper {
display: inline-block;
}

button {
align-items: center;
background-color: var(--pine-color-secondary);
border: var(--pine-border);
border-radius: var(--pine-border-radius-full);
color: var(--pine-color-text-secondary);
display: flex;
font: var(--pine-typography-body-medium);
font-family: var(--pine-font-family-heading);
letter-spacing: var(--pine-letter-spacing);
min-height: 40px;
padding: var(--pine-dimension-xs) var(--pine-dimension-sm);

&:focus-visible {
outline: var(--pine-outline-focus);
outline-offset: var(--pine-border-width);
}

&:hover {
background-color: var(--pine-color-secondary-hover);
}
// Content slot wrapper is hidden (content is rendered in portal)
.pds-popover__content-slot-wrapper {
display: none;
}
}
Loading
Loading