Skip to content
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.

Sign up for GitHub

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 documentation fixes #2221

Merged
merged 3 commits into from
Aug 8, 2022
Merged

Overlay documentation fixes #2221

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5f123d2
Add/remove missing/nonexsiting props
Aug 8, 2022
947a4f9
Add AnchoredOverlay in the navigation
Aug 8, 2022
6b0e19a
Add wicked-otters-warn changeset
Aug 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/wicked-otters-warn.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': patch
---

Overlay documentation fixes
29 changes: 18 additions & 11 deletions docs/content/Overlay.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,23 +72,13 @@ See the W3C accessibility recommendations for modals [here](https://www.w3.org/T

## Positioning

`Overlay` renders its `children` within a div positioned absolutely within a portal within the default portal root. The overlay will not update its positioning if the portal root's positioning changes (e.g., if the portal root is statically positioned after some DOM element that dynamically resizes). You may consider [customizing the portal or specifying a different portal root](/Portal#customizing-the-portal-root) to achieve different positioning behavior.
`Overlay` renders its `children` within a div positioned absolutely within a portal within the default portal root. The overlay will not update its positioning if the portal root's positioning changes (e.g., if the portal root is statically positioned after some DOM element that dynamically resizes). You may consider using the [AnchoredOverlay](/AnchoredOverlay) component or [customizing the portal root](/Portal#customizing-the-portal-root) to achieve different positioning behavior.

## Props

### Overlay

<PropsTable>
<PropsTableRow
required
name="anchorRef"
type="React.RefObject<HTMLElement>"
description={
<>
Element the <InlineCode>Overlay</InlineCode> should be anchored to.
</>
}
/>
<PropsTableRow
required
name="returnFocusRef"
Expand Down Expand Up @@ -182,6 +172,23 @@ See the W3C accessibility recommendations for modals [here](https://www.w3.org/T
</>
}
/>
<PropsTableRow
name="maxHeight"
type={`| 'xsmall'
| 'small'
| 'medium'
| 'large'
| 'xlarge'`}
description={
<>
Sets the maximum height of the <InlineCode>Overlay</InlineCode>, pick from our set list of heights.
<InlineCode>xsmall</InlineCode> corresponds to <InlineCode>192px</InlineCode>, <InlineCode>small</InlineCode> corresponds
to <InlineCode>256px</InlineCode>, <InlineCode>medium</InlineCode> corresponds to <InlineCode>320px</InlineCode>,{' '}
<InlineCode>large</InlineCode> corresponds to <InlineCode>432px</InlineCode>, <InlineCode>xlarge</InlineCode> corresponds
to <InlineCode>600px</InlineCode>.
</>
}
/>
<PropsTableRow
name="visibility"
type={`| 'visible'
Expand Down
2 changes: 2 additions & 0 deletions docs/src/@primer/gatsby-theme-doctocat/nav.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@
url: /ActionList
- title: ActionMenu
url: /ActionMenu
- title: AnchoredOverlay
url: /AnchoredOverlay
- title: Autocomplete
url: /Autocomplete
- title: Avatar
Expand Down