[PB-3520]: add HeadlessPopover component with accessibility support #73
Conversation
terrerox
changed the title
Introduces a new HeadlessPopover component built with @headlessui/react, providing enhanced accessibility features including ARIA support, keyboard navigation, and focus management. The component supports flexible APIs including render props, custom styling, transitions, and static mode.
terrerox
force-pushed
the
feat/popover
branch
from
08ced9b to
592893b
Compare
terrerox
changed the title
| "storybook:build": "storybook build" | ||
| }, | ||
| "dependencies": { | ||
| "@headlessui/react": "1.7.5", |
There was a problem hiding this comment.
I’m not totally convinced about adding a new library for the headless setup, so I created a separate popover component instead of changing the existing one. Curious what you think
There was a problem hiding this comment.
The fewer dependencies on third parties, the better. Why use this library compared to what we already have?
CandelR
left a comment
CandelR
left a comment
There was a problem hiding this comment.
Remember to add the storybook of the component and the snapshot tests :)
| * </HeadlessPopover> | ||
| * ``` | ||
| * | ||
| * **Note:** If `children` prop is provided, all other props (trigger, panel, etc.) are ignored. |
There was a problem hiding this comment.
I think that classname it applies
| * @returns {JSX.Element} | ||
| * - The rendered HeadlessPopover component. | ||
| */ | ||
| export default function HeadlessPopover({ |
There was a problem hiding this comment.
Is not totally headless because it already has default style :O
| "storybook:build": "storybook build" | ||
| }, | ||
| "dependencies": { | ||
| "@headlessui/react": "1.7.5", |
There was a problem hiding this comment.
The fewer dependencies on third parties, the better. Why use this library compared to what we already have?
2 participants
Introduces a new HeadlessPopover component built with @headlessui/react, providing
enhanced accessibility features including ARIA support, keyboard navigation, and
focus management. The component supports flexible APIs including render props, custom
styling, transitions, and static mode.