mirror of
https://github.com/hanzoai/o11y-components.git
synced 2026-10-30 14:54:15 +00:00
zeekay
464e1eece0
A version written into a manifest is written into every manifest that wants it, which is how eslint came to exist in a hundred and four forms across this estate and how a package came to resolve twice at run time. The catalog moves the number out of the manifest: a manifest names the package, the workspace names the version. Four are held below their latest because the newer release cannot be used, and the reason is recorded rather than the version alone: @noble/hashes 2 renamed every subpath the web3 stack imports, @splinetool/runtime 2 depends on a package that was never published, @dynamic-labs 5.4.1 the same, and react-resizable-panels 3 points its types condition at the bundle.
135 lines
3.6 KiB
Plaintext
135 lines
3.6 KiB
Plaintext
import { Meta, Controls, Primary } from '@storybook/addon-docs/blocks';
|
|
import * as PopoverStories from './popover.stories';
|
|
import * as PopoverPrimitiveStories from './popover-primitive.stories';
|
|
import * as PopoverTriggerStories from './popover-trigger.stories';
|
|
import * as PopoverContentStories from './popover-content.stories';
|
|
import * as PopoverAnchorStories from './popover-anchor.stories';
|
|
import * as PopoverSimpleStories from './popover-simple.stories';
|
|
|
|
<Meta of={PopoverStories} />
|
|
|
|
# Popover
|
|
|
|
Displays rich content in a portal, triggered by a button. Use for tooltips, menus, date pickers, and similar patterns.
|
|
|
|
## How to use
|
|
|
|
### PopoverSimple (preset)
|
|
|
|
For simple use cases, use `PopoverSimple` with `trigger` and `children`:
|
|
|
|
```tsx
|
|
import { PopoverSimple, Button } from '@signozhq/ui';
|
|
|
|
export default function MyComponent() {
|
|
return (
|
|
<PopoverSimple
|
|
trigger={<Button variant="outline">Open</Button>}
|
|
style={{ width: 256 }}
|
|
>
|
|
<p>Simple popover content</p>
|
|
</PopoverSimple>
|
|
);
|
|
}
|
|
```
|
|
|
|
<Primary />
|
|
|
|
## PopoverSimple Props
|
|
|
|
<Controls of={PopoverSimpleStories.Default} />
|
|
|
|
## Primitive composition
|
|
|
|
For full control, use the low-level building blocks: `Popover`, `PopoverTrigger`, `PopoverContent`, and optionally `PopoverAnchor`.
|
|
|
|
```tsx
|
|
import { Popover, PopoverTrigger, PopoverContent, Button } from '@signozhq/ui';
|
|
|
|
export default function MyComponent() {
|
|
return (
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="outline">Open popover</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent style={{ width: 320 }}>
|
|
<div className="stack-8">
|
|
<h4 style={{ fontWeight: 500 }}>Title</h4>
|
|
<p style={{ fontSize: 14, lineHeight: 1.42857, color: 'var(--muted-foreground)' }}>Content goes here.</p>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Controlled mode
|
|
|
|
```tsx
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button>{date ? date.toLocaleDateString() : 'Pick a date'}</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent align="start">
|
|
<Calendar mode="single" selected={date} onSelect={(d) => { setDate(d); setOpen(false); }} />
|
|
</PopoverContent>
|
|
</Popover>
|
|
```
|
|
|
|
### PopoverAnchor
|
|
|
|
Use `PopoverAnchor` when you want the popover positioned against a different element than the trigger:
|
|
|
|
```tsx
|
|
<Popover>
|
|
<PopoverAnchor asChild>
|
|
<div style={{ display: 'flex', gap: 8 }}>
|
|
<span>Row as anchor</span>
|
|
<PopoverTrigger>Trigger</PopoverTrigger>
|
|
</div>
|
|
</PopoverAnchor>
|
|
<PopoverContent>Content positioned against the anchor row</PopoverContent>
|
|
</Popover>
|
|
```
|
|
|
|
### Popover inside another popover
|
|
|
|
When nesting a popover inside another (e.g. a submenu or cascading picker), set `withPortal={false}` on the inner `PopoverContent`. This keeps the nested content in the parent popover's DOM hierarchy instead of portaling to `document.body`, avoiding z-index and stacking issues.
|
|
|
|
```tsx
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="outline">Open menu</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent style={{ width: 256 }}>
|
|
<p>Parent content</p>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="ghost" size="sm">Open submenu</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent withPortal={false}>
|
|
<p>Nested popover content</p>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</PopoverContent>
|
|
</Popover>
|
|
```
|
|
|
|
## Popover Props
|
|
|
|
<Controls of={PopoverPrimitiveStories.Default} />
|
|
|
|
## PopoverTrigger Props
|
|
|
|
<Controls of={PopoverTriggerStories.Default} />
|
|
|
|
## PopoverContent Props
|
|
|
|
<Controls of={PopoverContentStories.Default} />
|
|
|
|
## PopoverAnchor Props
|
|
|
|
<Controls of={PopoverAnchorStories.Default} />
|