Popover

A Popover is used for displaying additional rich content on top of something.

Status
alpha
Version
1.0.44
Sources
Github
Import from
@twilio-paste/core/popover — or — @twilio-paste/popover

Using alpha components in your product

Alpha components are ready for you to use in production. Components such as Popover are likely to not see any API changes. This is only an alpha due to the lack of documentation and a matching Sketch symbol. Feel free to share your experience using this component by starting a discussion on GitHub. We are also looking for a contributor to symbolize this component in Sketch. Interested? Reach out!

Guidelines#

About Popover#

The Popover component is a non-modal dialog that is commonly used for displaying additional rich content above your UI.

Accessibility#

Popovers and non-modal dialogs follow these accessibility guidelines:

  • There must be a focusable element inside the popover.
  • There should be a close button so screen readers have a specific close action to target.
  • A Popover is a focus trap, and focus is placed inside it when it's shown.
  • A Popover must be triggered by an explicit user action, e.g. clicking a button.

Examples#

Basic Popover#

Controlling placement#

The placement of the popover is configurable via the placement prop. The available placement options are available in the props description here.

Anatomy#

PopoverButton#

See the button component.

Popover#

PropertyDefault tokenModifiable?
background-colorcolor-background-bodyNo
border-widthborder-width-10No
border-colorcolor-border-lighterNo
border-radiusborder-radius-20No
box-shadowshadow-cardNo
max-widthsize-30No
paddingspace-50No
padding-leftspace-70No
padding-rightspace-70No
z-indexz-index-80No

Usage Guide#

API#

Installation#

yarn add @twilio-paste/popover - or - yarn add @twilio-paste/core

Usage#

import {Popover, PopoverContainer, PopoverButton} from '@twilio-paste/popover';
const PopoverExample: React.FC = () => {
return (
<PopoverContainer baseId="popover-example">
<PopoverButton variant="primary">Open popover</PopoverButton>
<Popover aria-label="Popover">Popover content</Popover>
</PopoverContainer>
);
};

Props#

Popover Container#

baseId?: string

Sets the ID that will serve as a base for all the items IDs.

gutter?: string

Sets the offset between the reference and the popover on the main axis.

placement?: "auto-start" | "auto" | "auto-end" | "top-start...

Sets the placement of popover in relation to the PopoverButton. Available options include:

  • auto-start
  • auto-end
  • auto
  • top-start
  • top-end
  • top
  • bottom-start
  • bottom-end
  • bottom
  • right-start
  • right-end
  • right
  • left-start
  • left-end
  • left

Popover#

aria-label: string

Required label for this Popover component. Titles the entire popover context for screen readers.


Support

If you need support, please open a new issue in our GitHub repository. Please try to provide as much detail as possible in your issue.

Contributing

The Paste design system is open source and contributions are welcome. Check out the project on GitHub to learn more about contributing.

Copyright © 2020 Twilio, Inc.