Inline dialog
An inline dialog is a pop-up container for small amounts of information.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Popup } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| isOpen * | boolean | — | Whether the dialog is shown. The open state belongs to you. |
| onClose * | () => void | — | Called on Escape and on a click outside. |
| trigger * | (props: { 'aria-expanded': boolean; 'aria-haspopup': true; onClick: () => void }) => ReactNode | — | A function returning the element the dialog hangs off. Spread the props it is given onto that element. |
| content * | ReactNode | — | The dialog content. A short paragraph, or a very small set of controls. |
| placement | 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'bottom-start' | Which corner it opens from. It flips when there is no room. |
| isDialog | boolean | — | Set this for an inline dialog. It pads the surface for prose rather than for a menu. |
| label | string | — | Names the dialog for assistive technology. It matters more here than for a menu, because the content is prose. |
Accessibility
What the component does for you, and what it needs from you.
- An inline dialog is a dialog, so give it a label. Unlike a menu, its content is prose and has no items to announce.
- Escape closes it and focus returns to the trigger.
- The trigger must receive the props the component hands it, or it never announces that it opens something.