@contentful/f36-popover
v4.65.5
Published
Forma 36: Popover component
Downloads
87,571
Keywords
Readme
title: 'Popover' slug: /components/popover/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/popover' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-popover--basic' typescript: ./src/Popover.tsx
Popover is used to display some content on top of another, and should be paired with a clickable trigger element.
It is a base for other more specific component, like Menu
, Autocomplete
and Multiselect
. Please, consider using these specific componenets to cover your needs.
How to use Popover
- Only if
Menu
,Autocomplete
andMultiselect
components are not covering your use cases, you should usePopover
. - Before using this component, double-check your design requirements. We are providing
Menu
,Autocomplete
, andMultiselect
for more specific use-cases and they can address your needs. - Keep in mind that you will have to implement everything related to accessibility for the popover content.
- Component is controllable, so don't forget to pass
onClose
callback prop. OtherwisecloseOnEsc
andcloseOnBlur
will not work properly.
Import
import { Popover } from '@contentful/f36-components';
// or
import { Popover } from '@contentful/f36-popover';
Examples
Basic
- Pass trigger component as a child for
Popover.Trigger
. NOTE: 🚨 Ensure that the component that you pass acceptsref
. Consider usingforwardRef
for functional components. - Pass popover content as a child for
Popover.Content
Trapping focus within Popover
If the popover contains interactive elements that user can navigate through with Tab
,
consider using react-focus-lock to trap the focus within Popover
Props (API reference)
Content guidelines
- Use an interactive element such as
button
forPopover.Trigger
Accessibility
- If the popover contains interactive elements that user can navigate through with
Tab
, consider using react-focus-lock to trap the focus within Popover - When the popover is opened, focus is moved to the
Popover.Content
. If you setautoFocus
tofalse
, it will not move the focus. - When the popover is open and focus is within the
Popover.Content
, click onEsc
key will close the popover. If you setcloseOnEsc
tofalse
, it will not close. - When the popover is open and focus is within the
Popover.Content
, click outside popover or blurring out will close the it. If you setcloseOnBlur
tofalse
, it will not close. - All the necessary a11y attributes for
Popover.Content
andPopover.Trigger
are provided.