1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
// @ts-nocheck
import { createSignal } from "solid-js"
import * as mod from "./popover"
import { create } from "../storybook/scaffold"
const docs = `### Overview
Composable popover with optional title, description, and close button.
Use for small contextual details; avoid long forms.
### API
- \`trigger\` and \`children\` define the anchor and content.
- Optional: \`title\`, \`description\`, \`portal\`, \`open\`, \`defaultOpen\`.
### Variants and states
- Supports controlled and uncontrolled open state.
### Behavior
- Closes on outside click or Escape by default.
### Accessibility
- TODO: confirm focus management from Kobalte.
### Theming/tokens
- Uses \`data-component="popover-content"\` and related slots.
`
const story = create({
title: "UI/Popover",
mod,
args: {
trigger: "Open popover",
title: "Popover",
description: "Optional description",
defaultOpen: true,
children: "Popover content",
},
})
export default {
title: "UI/Popover",
id: "components-popover",
component: story.meta.component,
tags: ["autodocs"],
parameters: {
docs: {
description: {
component: docs,
},
},
},
}
export const Basic = story.Basic
export const NoHeader = {
args: {
title: undefined,
description: undefined,
children: "Popover body only",
},
}
export const Inline = {
args: {
portal: false,
defaultOpen: true,
},
}
export const Controlled = {
render: () => {
const [open, setOpen] = createSignal(true)
return (
<mod.Popover
open={open()}
onOpenChange={setOpen}
trigger="Toggle popover"
title="Controlled"
description="Open state is controlled"
>
Controlled content
</mod.Popover>
)
},
}
|
