Status
Popover
A small glass card anchored to one spot on the page, for a quick task in place: the calendar's quick add, where a double click on a day asks for a title, a brand and which date it is, then puts the project on that day.
Preview
Props
| Prop | Type | Description |
|---|---|---|
openRequired | boolean | |
onCloseRequired | () => void | |
anchorRequired | HTMLElement | null | The element to sit beside. Nothing shows until there is one. |
titleRequired | React.ReactNode | |
eyebrow | React.ReactNode | |
footer | React.ReactNode | Buttons at the bottom, such as More details and Create. |
width | number | Width in px (default 320; never wider than the window less 24px). |
returnFocus | HTMLElement | null | Where focus goes on close. Defaults to what had focus when it opened. |
closeLabel | string | |
className | string | |
children | React.ReactNode |
Guidelines
A small glass card anchored to one spot on the page, for a quick task in place: the calendar's quick add, where a double click on a day asks for a title, a brand and which date it is, then puts the project on that day.
Provide: open, onClose, anchor (the element to sit beside, such as the day's cell), title, optional eyebrow, footer (the buttons), width (default 320), returnFocus, and the content as children.
- Keep it to the essentials, three fields at most. Anything longer belongs in a Drawer; offer "More details" to carry what was typed over to it.
- It is navigation layer, so it is glass, like menus and the drawer. Fields inside keep their solid fills.
- It lives in a portal on body, so a scrolling panel or a clipped calendar cannot cut it off. It opens below its anchor, aligned to its left edge, and flips above (or to the side) when there is no room, always at least 12px inside the window.
- Focus moves to the first field (or anything marked
data-popover-focus), Tab stays inside, and Escape, the close button or a click outside closes it. Focus goes back to what opened it (the day's date after a double click, the Add button from the keyboard). - Menus opened from inside (a Picker) are part of it. A click inside an element marked
data-popover-keepdoes not close it. - It fades in over 140ms and appears without motion when reduced motion is on.
- Never anchor one popover to another. One at a time.
- Phones never float a card. Under 768px wide the same title, content and footer open as a bottom sheet (a Drawer), with no anchor needed.