-
Notifications
You must be signed in to change notification settings - Fork 589
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Overlay #1084
Conversation
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/primer/primer-components/DuivWJCwQCYcfsysR73vHvDq4Ku7 |
|
Co-authored-by: Inayaili León <[email protected]>
Co-authored-by: Inayaili León <[email protected]>
* An `Overlay` is a flexible floating surface, used to display transient content such as menus, | ||
* selection options, dialogs, and more. Overlays use shadows to express elevation. The `Overlay` | ||
* component handles all behaviors needed by overlay UIs as well as the common styles that all overlays * should have. | ||
* @param positionSettings Settings for calculating the anchored position. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Prop docs below (e.g. ignoreClickRefs
and anchorRef
) are explicitly marked Optional
/Required
. Can we add that to positionSettings
(and positionDeps
, width
, and height
)?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is finally ready to go 🚀 I'll address the animation issues when I create the Popover component. |
skipping the changelog, let's do that when we are ready to make components publicly available. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
✨ ✨ ✨
This PR adds the
Overlay
component 🎉Closes #1061
Component description
An Overlay is a flexible floating surface, used to display transient content such as menus, selection options, dialogs, and more. Overlays use shadows to express elevation. The Overlay component handles all behaviors needed by overlay UIs as well as the common styles that all overlays should have. Overlay is the base component for many of our overlay-type components.
Behaviors
Accessibility
Relevant items from #1117:
In all circumstances, focus moves to an element contained in the dialog.
Unless a condition where doing otherwise is advisable, focus is initially set on the first focusable element.
useFocusTrap
which will be added to this component once it's done)Overlay.Header
component)Addressed in documentation
Notes
Overlay.Header
andOverlay.Footer
in a separate PRuseOpenAndCloseFocus
Hook, but when I was ready to make a PR it felt a little silly since it was basically just focusing an item passed in.