import { Popover } from '@uhg-abyss/mobile';useState
Pass the value from the useState hook to the isVisible prop to set the open state of the popover.
Heading
Use the heading prop to set the heading of the popover. For accessibility purposes, a heading is required.
Please provide a heading that accurately describes the content of the popover so a screen reader
can provide the description to the user.
Use the headingSize prop to set the size of the heading. The headingSize prop accepts small and large as values.
The default size is large.
Paragraph
Use the paragraph prop to add a description below the heading. The paragraph should be concise and clear and must not expand on more than 4 lines.
Content
Use the content prop to add custom content below the paragraph.
Media
Use the media prop to add custom content above the heading.
Footer
Use the footer prop to place content at the bottom of the popover. The popover must always have at least one button, so users can close it.
onClose
Use the onClose function to handle the action when close button is triggered or when the background is pressed.
Popover Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| content | string | - | Content of the popover |
| footer | node | - | Component to show at the bottom of the popover |
| heading | string | - | Heading of the popover |
| headingSize | 'large' | 'small' | large | Size of the heading |
| isVisible | boolean | false | Flag to check if the popover is visible |
| media | node | - | Component to show at the top of the popover |
| onClose | function | - | Callback fired when the popover is triggered to close |
| paragraph | string | - | Paragraph copy goes below the heading |
Popover Classes
| Class Name | Description |
|---|---|
| abyss-popover-dialog | Popover dialog element |
| abyss-popover-footer | Popover footer element |
| abyss-popover-heading | The heading text element of the popover |
| abyss-popover-overlay | Popover overlay element |
| abyss-popover-paragraph | The paragraph text element of the popover |
| abyss-popover-root | Popover root element |
| abyss-popover-text-container | Popover container for text elements |
Dynamic Type
To accommodate for larger text sizes, the popover will scroll when it has grown to have a 16px margin on the top and bottom. Depending on the screen size, the height of the popover when scrollable will vary. The footer does not scroll with the rest of the content. Please follow design guidelines when deciding the amount of content to place within popover.
Focus Guidance
Abyss does not control the focus of components on the screen when the Popover is toggled off. To meet accessibility guidelines, the focus must be set to the previous node when closed. The useSetFocus hook can be used for this.
For example, if a button is pressed to open a popover, focus must return to that button once the popover is closed, so that a screen reader or keyboard user may continue using the app where they left off.
Popover Classes
| V2 | V1 | Status |
|---|---|---|
| - | popover-container | Removed |
| - | popover-content-container | Removed |
| popover-dialog | - | Added |
| popover-footer | - | Added |
| - | popover-footer-container | Removed |
| - | popover-header-container | Removed |
| popover-heading | popover-title | Renamed |
| popover-overlay | popover-overlay | Unchanged |
| popover-paragraph | popover-copy | Renamed |
| popover-root | popover-root | Unchanged |
| popover-text-container | - | Added |
Popover Props
| V2 | V1 | Status |
|---|---|---|
| content | children | Renamed |
| footer | footer | Unchanged |
| heading | title | Renamed |
| headingSize | - | Added |
| isVisible | isVisible | Unchanged |
| media | header | Renamed |
| onClose | onClose | Unchanged |
| paragraph | - | Added |
| - | variant | Removed |