Popover

Owned by Bronwyn Hawkins (Deactivated), created

Jun 04, 2021

1 min read

Design COMPLETE IMPLEMENTATION PENDING

The three statuses above and their possible values:

PROPOSAL STATUS	DESIGN STATUS	IMPLEMENTATION STATUS

PROPOSAL STATUS	DESIGN STATUS	IMPLEMENTATION STATUS
DRAFT	DESIGN PENDING	IMPLEMENTATION PENDING
READY FOR REVIEW	DESIGN PLANNED	IMPLEMENTATION PLANNED
APPROVED TO ADD	DESIGN IN PROGRESS	IMPLEMENTATION IN PROGRESS
DEFERRED	DESIGN COMPLETE	IMPLEMENTATION COMPLETE
NEEDS CHANGES

For more information see the https://openedx.atlassian.net/wiki/spaces/BPL/pages/1773502564/Component+Contribution+Process#Step-1-%E2%80%93-Start-a-component-proposal.

Popovers are small overlays that present additional content and actions without cluttering the page.

Contributors	@Bronwyn Hawkins (Deactivated)
Paragon Jira ticket	https://openedx.atlassian.net/browse/PAR-187
Design resources	https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=5917%3A335
Technical docs

1 Variants | 2 Best Practices | 3 Related Components | 4 Specification | 4.1 Behaviors | 4.2 Accessibility | 5 Notes

Design

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=5917%3A335

Variants

Top, Bottom, Left and Right carat position variants
Default, Warning, Danger and Success state variants

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=5917%3A347

Best Practices

Do

Do show or hide icons, title and helper text as-needed

Do allow text to wrap within the Poppver

Do use the muted link styles in popovers

Don't

Don’t let the width of the Popover exceed 480px

Related Components

Specification

What does an engineer need to know in order to build this component?

Redlined Design Spec

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=5917%3A357

Behaviors

Accessibility

Notes

Notes from collaborator conversations or meetings regarding this component.

XX.XX.20XX